用途：将一张喜欢的图片参考（截图、模型图、Figma 链接或网站）翻译为设计系统，产出两份互为镜像的文件。docs/DESIGN.md 采用 Google 开放 design.md 格式的 YAML 令牌并附文字理由，是供 Claude Code、Cursor、Kiro、Stitch 等 AI 编码代理自动读取的事实来源；docs/DESIGN.html 是自包含、人类可读的样式指南，用同一套令牌值实时渲染每个令牌与组件。两者始终一起写入和更新，避免漂移。
主要能力：读取本地图片（PNG/JPG/WebP/截图）、Figma URL（需连接 Figma MCP 工具）或网站 URL（网站需用户提供截图，WebFetch 仅作字体名、颜色值等补充信号）；分析颜色、字体、间距、形状、层次、组件与氛围；结合 Product Identity 与 PRODUCT.md 调和冲突；按固定 YAML 规范派生令牌；撰写八个固定章节的说明文字；生成令牌驱动的 HTML 镜像；校验 YAML 可解析、字体免费且不在禁用列表、组件对比度满足 WCAG AA。
使用方式：先提供图片参考与 Product Identity、PRODUCT.md；技能先做图片分析，再逐条询问颜色角色、字体、密度、形状、层次、组件优先级与反模式；确认后写入 docs/DESIGN.md，再生成 docs/DESIGN.html。若已有 DESIGN.md，会询问是精修、替换还是合并，破坏性覆盖前需确认。会话时长约 30–60 分钟。
适用场景：需要从真实视觉参考建立品牌一致设计系统的产品团队，尤其配合 ProductOS 的 Design 阶段第 2 步使用。
限制：无图片时不应凭空起草；网站 URL 无法直接截图；字体须可商用且避开 Inter、Instrument Serif、Outfit、Plus Jakarta Sans 等默认项；组件属性仅限 backgroundColor、textColor、typography、rounded、padding、size、height、width；正文不得出现重复的 ## 标题。已有代码库而非图片时，应改用 studio-design-design-system-from-code。具体收费、价格与平台信息暂未提供。