UI 设计 AI 工具增强版

要解决的问题

做手机 App、微信小程序或 Windows 桌面界面时，难点通常不是“生成一个页面”，而是让页面贴合目标平台的设计语言：iOS 的字体层级与圆角规则、Android 的 Material You、Windows Fluent 的材质与键鼠交互、微信生态的容器约束。只依赖通用 Web 模板，结果很容易变成“像网页的 App 页面”，而不是可交付的平台化 UI。

技能如何工作

ui-design-aitool-plus 会先锁定三个关键约束：目标风格、配色方向、设备范围，避免模型在用户意图不明确时自行假设。确认后，它按结构化流程生成设计产物：

• 风格路由：从 iOS、Android、HarmonyOS、One UI、Fluent、WeUI 等 11 类平台规范中选择基底，也可叠加品牌设计语言。
• 设计 Token：输出颜色、字体、间距、圆角、阴影、动效等 CSS 变量，作为后续组件与页面的统一参数。
• 组件规范：覆盖导航、按钮、输入、卡片、弹窗等组件的默认、悬停、禁用、加载等状态，并关注浅色/深色主题与触控目标。
• 原型与交付：优先输出可交互 HTML 原型，也可选择 Figma、MasterGo、Pixso、JsDesign、MockingBot、Lanhu 或 Markdown 文档格式。

它对“风格”不是停留在形容词层面，而是把平台规范或品牌规范转成可检查的设计参数，减少“感觉像 iOS”这类模糊判断。

适用边界

该技能适合已有明确页面目标的高保真 UI 生成，例如首页、列表页、详情页、设置页、表单页等。用户仍需提供业务模块、字段、交互优先级等上下文；如果风格、配色或设备范围缺失，它会先询问而不是直接出图。输出可服务于前端原型、设计协作和规范文档，但进入生产环境仍需结合真实素材、品牌资产与工程组件库。