UI-DESIGNER01
DESIGN.md 是唯一事实来源
做任何界面前先看 DESIGN.md；颜色、字号、圆角都从这份规范里取，不另起炉灶。规范优先于实现。
UI DESIGN SYSTEM GENERATOR
先把规范定清楚，再写第一行样式
UI-DESIGNER 站在资深 UI 设计师的位置，从大量真实网站提取设计规范，产出你项目自己的 DESIGN.md。它不是零散的颜色代码，而是后续开发时 AI 唯一认账的那份事实来源。
02
真实规范素材库
Claude / Stripe / Linear / Vercel / Apple / Tesla… 内置从真实网站提取的设计系统，只读、可溯源。
03
Preset & Remix 双模式
认准一套就整套照搬；喜欢 A 的骨架、B 的配色、C 的字体，就按维度显式混搭。
04
装好就跟 AI 说需求
挑参考、出规范、开预览，全部由 AI 在对话里完成——你只需要在关键节点点头或提意见。
安装
装好 skill，一句话就能用
你不需要碰任何命令或配置文件。装完回到对话，直接对 AI 说你的需求就行。
THE LIBRARY
从真实网站提取的 UI 设计规范
每套都有规范原文和一页可视化预览——AI 读规范、你确认观感。需要时按「分类 + 风格」挑 1–3 个最接近的参考即可。
COVERAGE
覆盖多个行业，从 AI 工具到汽车品牌
AI 与开发者工具、设计协作、数据基建、SaaS、金融、消费品牌、媒体、汽车，外加 dell-1996 / nintendo-2001 两份复古档案。按「分类 + 风格」挑 1–3 个最接近的参考即可。
REMIX IN DEPTH
五个维度，base 必填
base 决定表面层级、间距节奏、组件结构、密度——换它等于换整套气质。colors 情绪最强也最险；type 性价比最高；radius 决定硬软手感；space 决定呼吸感。没指定的维度一律跟随 base。
TWO MODES
整套照搬，或按维度混搭
不用在「完全照抄」和「从零设计」之间二选一。remix 让你借 A 的骨架、B 的配色、C 的字体，且每次借用都在 DESIGN.md 第 13 节留痕，方便回溯。
某套规范调性整体贴合需求
直接采用整套——表面层级、间距节奏、组件结构、密度一次性到位。
- → 跟 AI 说：「就照 Linear 的感觉来」
- → 适合：已有明确对标、气质高度吻合
- → 风险：最低，所见即所得
喜欢 A 的骨架 + B 的配色 + C 的字体
以一套为 base，按维度逐样借用，其余维度跟随 base。
- → 跟 AI 说：「骨架像 Linear，配色换成 Claude 的」
- → 适合：要独特气质、又不想从零
- → 风险：配色替换最高，字体最安全
REMIX DIMENSIONS
Remix 的五个维度
base 决定整套气质；其余维度替换有风险高低之分——配色风险最高（与明暗强绑定），字体最安全。
| 维度 | 决定什么 | 替换风险 |
|---|---|---|
base | 表面层级、间距节奏、组件结构、密度 | —（换它等于换整套气质，必填） |
colors | 情绪与品牌识别 | 高，与明暗模式强绑定 |
type | 声音 / 排印气质 | 低，性价比最高 |
radius | 硬 / 软手感 | 低 |
space | 密度与呼吸感 | 中，注意与字号联动 |
ASK
先给 AI 这四件事，出结果最快
AI 会反问，但你主动给最省事。这四件事说清楚，AI 检索参考时就不会跑偏。
1
什么产品
行业 + 主要页面类型，如「POD 电商店铺后台」「AI 工具 landing page」。
2
要什么气质
专业克制 / 温暖人文 / 科技暗色 / 活泼 / 编辑感 / 复古…明确一个主调。
3
明暗
暗色 / 亮色 / 双模。它直接决定配色与层级策略怎么写。
4
用什么做的（可选）
网站 / App 用的框架或平台。说不清也没关系——AI 看一眼你的项目就能识别。
WORKFLOW
六步，从需求到可交付的 DESIGN.md
全程对话——你用自然语言说需求，AI 自动走完下面这条链路。
1
问清需求
产品类型、要什么气质、明暗、技术栈——四件事一次问完，不挤牙膏。
2
检索候选
AI 快速浏览内置规范，挑出 3–5 个最贴近的候选摆给你看。
3
让你选
把候选摆给你选，不替你拍板；拿不准先摊开色板字阶对比。
4
定模式
认一套→Preset；要混搭→把维度分配写清楚再 Remix。
5
生成
产出你项目的 DESIGN.md 设计规范，外加一页可视化预览。
6
预览确认
AI 打开预览给你看，好不好看由你说了算；你点头后规范才算定稿。
TIPS
几个习惯，让 AI 一次做对
该说
- ✓ 用感觉词描述气质——专业克制、温暖人文、暗黑科技、活泼、复古。
- ✓ 直接报一个对标：「像 Linear 那样」、「像 Stripe 那种感觉」。
- ✓ 拿不准就多看几套候选，让 AI 摊开色板和字阶给你对比。
- ✓ 看完预览再决定——好看是感觉得出来的，数字不等于好看。
- ✓ 说不清楚时先给个大概方向，让 AI 帮你收敛到 3–5 个候选。
- ✓ 任何想改的地方都直接告诉 AI——「换个色」、「字小一点」、「按钮太大」。
别说
- ✕ 不用自己挑颜色代码和字号——交给规范，这是它存在的意义。
- ✕ 不用跳过预览直接动手——返工更贵。
- ✕ 不用一次塞太多要求——先定主调，再一步步细化。
- ✕ 不用说「做漂亮点」这种空话——给感觉词或对标名更有效。
- ✕ 不用认怂——「这界面不好看」也是有效输入，AI 会帮你找原因。
- ✕ 不用动 AI 写好的设计文件——规范是契约，AI 会照它来。
PUT IT TO WORK
规范要能落地，才算数
生成的规范是一份文档，人和 AI 都能读懂；之后 AI 做界面会照着它执行，不再自由发挥。
AI DOES THE WORK
你只管对话，AI 打包搞定
从挑参考、出规范、到开预览、查可用性，全部在对话里完成——你只需要在关键节点点头或提意见。
YOUR PROJECT
下一步，给你的项目出一份 DESIGN.md
直接跟 AI 说：「帮 我的项目 出一份 UI 设计规范，参考 Linear 那种利落的感觉，暗色」。它会反问几个关键问题，再生成预览等你点头。
GET STARTED
装好 skill，直接说人话
你不需要懂任何技术——「这个界面不好看，先定套规范再改」也是合法入口。
WATCH OUT
两个小提醒
数据核对：少数参考（如 Tesla、Spotify、Mastercard）的原始数据没那么规整，用到时 AI 会主动找你确认——别嫌啰嗦，核对一次后续才不返工。
暗底亮色：想要「暗底 + 亮色」这种反差组合时，一定先看预览再点头，AI 会在预览里把层级策略调对。