技能介绍

要解决的问题

团队落地一套品牌设计规范时，最常见的痛点是：规范文档很完整，但从 tokens 到真实组件代码这一步全靠手工搬。设计师给的 DESIGN.md 里有颜色、圆角、字体，工程师还得逐个写 CSS、调组件库主题，过程中容易出现三类问题：一是凭记忆手写 HTML，结果和组件库脱节；二是图省事用原生标签假装组件库，比如用 <button> 代替 el-button；三是改着改着就忘了规范里的数值，最后产出的预览页和设计稿对不上。

技能如何工作

这个 skill 把整个流程拆成六个必须按顺序执行的步骤，核心思路是"不手写代码、只替换占位符"。它先读项目 package.json 探测组件库，识别 Element Plus、Antd、Arco、Naive 等常见库并匹配对应骨架模板；然后从内置的 74 个品牌规范里选出气质差异明显的三个，生成一个 design-style-picker.html 视觉对比页让用户挑选；选定后，从对应 DESIGN.md 的 YAML front-matter 提取主色、悬停色、圆角、字体等 tokens，填入骨架模板的 {{XXX}} 占位符，输出可运行的预览文件；最后还会询问是否需要微调，并根据确认把规范追加到 CLAUDE.md、生成 theme.css。

适用边界

需要明确的是，它不负责从零设计 UI，也不能随意修改骨架模板的结构——所有生成物都来自模板替换，这是刻意的限制。当前对 Naive UI、Vuetify、Chakra 等没有专属骨架，会回落到 skeleton-plain.html。适合的是"已有前端项目、想快速套用品牌规范"的场景，而不是替代完整的主题定制工作。