用途：把一个用户喜欢的视觉参考——截图、Mockup、Figma 画框或线上网站——转化为可执行的设计系统，产出两份互为镜像、始终同步写入与更新的文件。docs/DESIGN.md 保存 Google 开放 design.md 格式的 YAML 设计令牌与文字理由，是编码智能体据以构建的事实来源；docs/DESIGN.html 是自包含的样式指南，在浏览器中按同一套令牌值实时渲染每个令牌与组件，供人查看。本技能是设计阶段的第 3 步：产品身份已存在于 docs/DESIGN.md 的 ## Product Identity 一节，本技能在其周围补充令牌与八个设计系统章节。
主要能力：分析参考图并映射到令牌角色，包括颜色（背景、表面、主/次文字、强调、边框、语义状态、明暗模式）、字体（字形类别、层级、字号字重、字距、大写用法）、间距与密度、圆角原则、层次（阴影、边框、玻璃模糊、色调分层或扁平）、可见组件与状态、整体气质；随后与产品身份调和——身份决定策略，图像决定战术（十六进制值、圆角、组件节奏），冲突需显式提出解决方案并确认；最后按规范撰写 YAML 前置元数据与八节正文，并生成 HTML 镜像。
两种模式：完整模式从图像推导完整令牌集（颜色用语义命名，如 primary、on-primary、surface、on-surface、outline 等；排版层级 6–10 个；圆角与间距整套；组件变体作为同级条目）。Lite 模式只产出品牌令牌，颜色限于 primary、on-primary、surface、on-surface、on-surface-variant、outline 及至多一个强调色，排版 4–6 级，圆角与间距各 3–4 级，组件仅需按钮、链接、卡片、徽章与代码块或截图框等 5–6 项，并在 YAML 描述、标题下斜体行与 HTML 头部标注 Lite。
使用方式：输入从应用仓库根目录的 docs/ 读取，必须包括图像参考（本地图片路径、Figma 链接、线上网站 URL 或混合，混合时需指明主锚点）、docs/DESIGN.md 中的产品身份、docs/DEFINE.md（产品是什么、谁在什么场景使用）以及产品形态（决定完整/Lite/适配模式）；同时读取技能文件夹中的 REFERENCE-DESIGN.md 作为结构模板（只作格式参考，不复制其设计选择）。流程为：图像接收、图像分析、仅就文档未答的问题逐条提问（每问附 3 个定制建议）、与产品身份调和、推导令牌、撰写八节正文（Brand & Style、Colors、Typography、Layout & Spacing、Elevation & Depth、Shapes、Components、Do's and Don'ts）、确认后写 docs/DESIGN.md、最后据令牌生成 docs/DESIGN.html。字体须可商用免费（Google Fonts、Fontshare、Geist 等），且避免 Inter、Instrument Serif、Outfit、Plus Jakarta Sans 等默认之选；组件的前景/背景色对需满足 WCAG AA。
适用场景：已有明确产品身份、需要一个可从图像出发落地的设计系统的产品；无界面产品的品牌令牌需求；需要让编码智能体与人类查看者共用同一套设计事实的项目。
限制：没有图像时不会凭空起草，只提供较弱的备选；产品身份或 docs/DEFINE.md 缺失时须先完成前置技能；写文件前需确认与查看差异；HTML 镜像必须自包含、不依赖框架与外部 JS（仅可经 Google Fonts 链接加载网页字体）；不得复制模板的设计选择。其他细节如具体收费、平台支持等暂未提供。