UI 克隆器

分析某一产品的 UI 截图，生成一个可复用的 .skill 文件，完整捕获其设计系统 —— 使任何人可在任意技术栈中精准复现该 UI。

适用场景

• 用户提出“克隆这个 UI”、“复制该设计”、“复现此页面”、“从截图中提取设计系统”等需求
• 用户提供一张或多张截图，并希望构建类似效果的界面
• 用户希望将某款产品的视觉语言逆向工程为可复用的结构化格式

工作流

步骤 1 — 收集输入

向用户询问以下信息：

1. 图像来源：单个图像路径、多个路径，或一个目录
2. 产品名称：将作为生成的 skill 名称（例如：notion、linear、stripe-dashboard）
3. 简要描述（可选）：该产品的主要功能 —— 有助于上下文化组件命名

若用户已在原始消息中提供了上述全部信息，则跳过提问，直接进入下一步。

输出位置：确定生成 skill 的保存路径：

• 若用户当前处于项目目录中（即工作目录下存在源码文件、package.json 或类似标识），则将 skill 保存在项目内部的 .claude/skills/{product-name}-ui/ 路径下，并将 .skill 文件一并打包至此处。
• 仅当无法识别出有效项目目录时，才回退至全局 skills 目录（~/.claude/skills/）。
• 在执行后续操作前，必须明确告知用户 skill 将被保存到何处。

步骤 2 — 分析截图

对每张图像，调用 mcp__zai-mcp-server__ui_to_artifact 并设置 output_type: "spec"，以提取设计规范。

再调用 mcp__zai-mcp-server__ui_to_artifact 并设置 output_type: "description"，获取每张页面用途与结构的自然语言描述。

将所有截图视为同一产品的若干页面，统一进行综合分析 —— 不可将其作为彼此独立的设计分别处理。

关于完整的分析维度列表及各维度应提取的内容，请参阅 → references/analysis-guide.md

步骤 3 — 综合构建设计系统

基于全部截图的联合分析，产出以下内容：

• 设计令牌（Design Tokens）：统一的颜色色板、字体排印比例、间距体系、圆角尺寸、阴影层级
• 组件清单（Component Inventory）：识别出的所有独特 UI 组件，及其变体与状态
• 布局模式（Layout Patterns）：网格/弹性布局结构、页面模板、导航模式
• 视觉风格（Visual Style）：依据 references/analysis-guide.md 中定义的分类法所识别出的风格
• 交互模式（Interaction Patterns）：通过视觉线索推断得出（如悬停态、焦点环、加载指示器、动效过渡）

当不同页面间出现令牌冲突（例如按钮颜色不一致）时，需完整记录所有变体 —— 不得丢弃任何信息。

步骤 4 — 生成 Skill

在用户指定路径（默认为输入图像所在目录或当前工作目录）下创建新的 skill 目录。

skill 目录名称：{product-name}-ui

需创建的文件结构如下：

{product-name}-ui/
├── SKILL.md                    # 主技能文件（参考 references/skill-template.md）
└── references/
    ├── design-tokens.md        # 颜色、排印、间距、圆角、阴影
    ├── components.md           # 组件清单（含规格说明与变体）
    ├── layout.md               # 页面布局、栅格系统、导航结构
    └── style-guide.md          # 视觉风格、交互模式、UX 原则

使用步骤 3 中合成的数据填充每个文件。

关于 SKILL.md 的内容规范及各 reference 文件的结构，请参阅 → references/skill-template.md

步骤 5 — 可视化验证（可选）

向用户确认：

“是否需要我基于该设计系统生成一个示例页面，并将其与您的原始截图进行可视化比对，以在最终打包前验证准确性？”

若用户同意，则执行以下操作：

1. 使用草稿版 skill 文件配合 ui-ux-pro-max，生成一个代表性页面（例如截图中的首页），目标技术栈默认采用用户偏好的方案（若未明确则主动询问）。
2. 自行截取渲染结果，或请用户提供渲染后的截图。
3. 调用 mcp__zai-mcp-server__ui_diff_check 对比生成页面与原始参考截图：
   • expected_image_source：原始参考截图
   • actual_image_source：渲染输出截图
   • prompt： “对比这两张 UI 截图。识别颜色、排印、间距、组件形状、布局结构及整体视觉风格方面的差异。逐条列出各项差异，并标注其严重程度（critical / minor）。”
4. 根据差异报告执行修正：
   • 对于 严重 差异（颜色错误、组件缺失、布局崩溃）：更新 skill 中对应 reference 文件（design-tokens.md、components.md 或 layout.md）以修正规范。
   • 对于 轻微 差异：在 style-guide.md 中将其记录为已知变体。
5. 重复“验证 → 差异比对 → 修正”的循环，直至无严重差异残留，或用户确认满意为止。

若用户拒绝，则跳过本步骤，直接进入打包环节。

步骤 6 — 打包为 .skill 文件

待设计系统完成验证（或用户跳过验证步骤）后，执行打包操作。

使用步骤 1 中确定的输出路径运行打包脚本：

python3 /Users/zhenyangze/.claude/skills/skill-creator/scripts/package_skill.py {product-name}-ui {output-dir}

向用户报告生成的 .skill 文件的实际输出路径。

步骤 7 — 确认结果并提供后续选项

向用户说明以下内容：

• .skill 文件路径及其保存位置（项目本地 or 全局）
• 本次捕获内容摘要（共 N 种颜色、N 个组件、识别出的风格类型、分析的页面数量）
• 主动提供下一步支持：“是否需要我立即使用该 skill，在您指定的技术栈中重建此 UI？”

若用户表示同意，则以生成 skill 中的设计令牌与组件规格为上下文，调用 ui-ux-pro-max，并进一步询问其偏好的技术栈。

注意事项

• 多张截图 = 同一产品的不同页面。始终合并为一个统一的设计系统。
• 综合构建过程中严禁丢弃任何设计信息 —— 应记录变体而非取平均值。
• 生成的 skill 必须完全自包含：即使无原始截图访问权限，他人也应能据此 faithful 地复现 UI。
• 技术栈保持开放性 —— 生成的 skill 描述的是设计本身，而非具体实现方式。
• 保存位置优先级：始终优先选择项目本地路径（.claude/skills/），避免污染用户全局环境；仅当未检测到有效项目目录时，才使用全局路径（~/.claude/skills/）作为兜底方案。
• 可视化验证：步骤 5 中的“差异比对-修正”循环为可选步骤，但强烈建议用于高保真度复现；每次执行前必须获得用户明确授权。