用途：把图像参考（截图、模型图、Figma URL、实时网站或混合来源）转化为结构化设计系统，产出两份互为镜像的文件。docs/design.md 是唯一事实来源，包含 Google 开放 design.md 格式的 YAML 令牌块与解释性文字；docs/design.html 是供人阅读的自包含样式指南，所有令牌与组件按同一套值实时渲染。两者必须同步更新，避免漂移。
主要能力：分析图像中的颜色、字体、间距密度、圆角、阴影、组件与整体气质；通过逐条提问确认产品定位、情感基调、受众、颜色角色、字体层级、间距、形状、层次、组件优先级与反模式；按规范推导 YAML 令牌（colors、typography、rounded、spacing、components），组件变体与状态作为独立条目，颜色使用语义命名；撰写 Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts 八个章节；生成令牌驱动的单文件 HTML 样式指南，含色板、字体样张、间距、圆角、层次与组件状态展示，支持明暗模式切换。
使用方式：先提供图像或图像集合，并说明主锚点与灵感参考；若已有 docs/design.md 会先读取并询问是精修、替换还是合并；确认后写入 docs/design.md，再据其生成 docs/design.html。写入失败会按权限、磁盘空间、文件冲突等给出提示。
适用场景：创始人分享截图、模型图、Figma 文件或网站，希望沉淀为可被编码智能体直接实现的设计令牌；或为已有产品愿景、PRD 补充精确令牌规范。该技能完全独立，不依赖其他文档。
限制：未提供图像时不会凭空起草；无法直接截取任意网址，需用户提供截图，WebFetch 仅作辅助信号；Figma 需使用对应 MCP 工具；若与 Product Planner 等技能配合，需另行安装。具体收费、价格与平台信息暂未提供。