用途：把视觉工作像逻辑测试一样固化下来——用一个持久、规范的设计事实来源消除漂移，用可实时刷新的 lookbook 提供即时反馈。技能只负责结构与流程，审美判断交给 frontend-design 技能。
主要能力：建立两层设计事实来源，YAML 前置元数据承载机器可读的设计 token（精确色值、字体层级、间距、圆角、阴影等“是什么”），Markdown 正文的 ## 小节记录人类可读的理由（“为什么”，如破坏性操作才用警告色）。推荐小节顺序为 Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts。构建 lookbook：有组件体系时用“活的” lookbook 渲染真实组件与关键界面状态；尚无组件体系时用参考 lookbook 收集真实设计截图并标注布局、颜色 token、字体与构图。另提供静态文件服务器机制，监听产物变化并通过 SSE（或 websocket）向浏览器推送刷新，见 references/live-reload-server.md 中的实现与浏览器端代码片段。
使用方式：将事实来源命名为 DESIGN.md 但放在 docs/product/DESIGN_SYSTEM.md，并从 CLAUDE.md 链接过去。lookbook 放 docs/product/lookbook/，入口为 index.html，由事实来源与 CLAUDE.md 链接。切勿另建第二套开发服务器：若项目已有 HMR（Vite、Next 等）就复用它，参考服务器仅用于没有开发服务器的静态 HTML 产物。
分工：environment-manager 作为托管开发服务运行预览服务器并报告 URL；implementer 构建 lookbook，有逻辑处测试先行；verifier 对渲染输出截图作为视觉验收。
限制：编码代理不会自动加载任意根目录 .md 文件，只有 CLAUDE.md 会自动加载，故根目录 DESIGN.md 也需显式链接。审美判断不在本技能范围内。其余收费、价格、平台等资料暂未提供。