使用 AI 引导快速配置项目 UI 设计系统

解决 UI 开发初期的“盲目猜测”问题：通过一个结构化的交互引导流程，让 AI 逐步确认产品类型、品牌色和视觉风格，从而快速生成一套统一且符合预期的设计系统和首屏脚手架。

为什么需要这个技能

在启动新项目或个性化现有项目时，开发者往往面临两种极端：要么在没有设计规范的情况下随意编写 CSS 导致风格混乱，要么面对庞大的 UI 库不知如何快速定制。

本技能将 AI 转化为一个“设计顾问”。它不再是直接抛出一段随机的代码，而是通过单次提问、确认、再执行的循环，确保品牌色、字体和布局模式在生成首屏之前就已经达成共识，避免了大量的重复修改，确保前端代码在原子级别上就符合设计规范。

单点交互提问：AI 不会一次性抛出所有问卷，而是采取“问一个、答一个、存一个”的模式，确保每一步决策都清晰。
定义应用类型：确定产品形态（如 SaaS 控制面板、电商、金融科技或内部工具），以此决定后续的页面构图模式。
配置品牌 Token：提供默认选项或自定义 Hex 色值。AI 将更新 css/theme.css 等主题文件，确保明暗模式下的品牌色均符合可访问性标准。
设定视觉基准：参考知名品牌（如 Stripe, Linear, Vercel）的视觉密度和调性，而非盲目克隆。
** typography 字体定义**：确认字体栈，更新全局层级规则（标题、正文、标注），避免在组件级散布样式覆盖。
生成首屏脚手架：结合应用名称、页面目的，利用设计系统的 Shell、导航栏和间距比例，快速搭建首屏页面。

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

暂无推荐