| name | screenshot-to-prototype |
| description | Use only when 用户明确要求把本地截图、设计稿或高保真界面图还原成 Axhub Make client 可运行原型；或显式调用 $screenshot-to-prototype。仅提供图片作为素材、参考图、需求图或风格上下文时不要使用。 |
Screenshot To Prototype
用本地截图/设计稿还原 client 可运行原型：先提取必要素材，再写 React/CSS，最后做真实运行截图回归。正文保持中文、简洁。
退出规则
任一条件不满足就停止：
- 用户未提供源图。
- 必须能获取源图的本地路径；如果源图没有本地路径，必须停止。
- 图片生成能力可以来自
ui-design-image、系统 imagegen、ACP UI 图片 MCP、等价图片 MCP，或 Agent 图片配置。
- 不能只因当前工具面板没有直接暴露图片生成工具就停止；停止前必须主动检查这些通道。
- 确认所有图片生成通道都不可用或都不支持传入本地图片路径时，才停止。
- 启动实现前必须确认存在视觉回归工具。
- 视觉回归工具必须能获取产物真实运行截图；如果无法获取真实运行截图，必须停止。
- 用户只是提供图片作为需求、内容、素材、风格上下文或普通参考图时，必须停止。
- 普通建站、URL 克隆、主题提取、单纯图片生成不要使用本技能。
路径
所有路径都以 client 包根目录为基准，文档里不要写本机绝对路径、平台路径或外层仓库路径。
- 原型：
src/prototypes/<slug>/
- 主规格：
src/prototypes/<slug>/.spec/spec.html
- 最终素材：
src/prototypes/<slug>/assets/
- 最终素材清单：
src/prototypes/<slug>/assets/asset-manifest.json
- 临时文件：
.local/screenshot-to-prototype/<slug>/
- 候选矩阵：
.local/screenshot-to-prototype/<slug>/asset-sheet.png
- 候选切图：
.local/screenshot-to-prototype/<slug>/candidates/
- 候选清单：
.local/screenshot-to-prototype/<slug>/candidate-manifest.json
规格与评审（本技能特例）
- 主规格强制使用
.spec/spec.html，从 HTML 模板创建，不提供 Markdown 选项。
- 在 HTML 中先展示源截图，素材评审以逐项左右对照为主：左侧展示候选矩阵中的对应素材或候选切图，右侧展示最终裁切素材、重绘 SVG 或组件化结果；同项对齐并标注用途，后续实现采用右侧结果，不能只列文件路径。
- 需求与设计完成第一轮对齐时必须确定
DESIGN.md。client 内没有符合需求的现成规范时主动创建；无论复用或新建，都把原文件路径和关键设计规范作为可评审内容直接呈现在 HTML 中。
- 用户确认 HTML 主规格前不得开始实现；实现后同步规格中的素材、设计决策和实际结果。
- 本节覆盖通用对齐规则中关于规格格式可选、不主动创建
DESIGN.md 以及主规格只引用设计基底的默认约定。
流程
- 先应用退出规则，确认用户明确要求把截图/设计稿还原成可运行原型，并确认源图本地路径、图片生成通道、视觉回归工具。
- 若图片生成通道不明确，先按
ui-design-image 的工作流检查 ACP UI 图片 MCP、等价 MCP、Agent 图片配置和系统 imagegen，再决定是否停止。
- 所有素材提取、修复、高清化、设计分析都必须把用户本地图片路径作为参考图传入，不能只用文字描述生成素材。
- 让图片 AI 输出透明 PNG 候选素材矩阵；由图片 AI 判断具体提取对象，只说明筛选规则：保留可复用且 HTML/CSS 难快速稳定还原的视觉素材，包括背景图、背景纹理或复杂背景层；排除纯文本、简单布局容器、普通 CSS 形状和整页截图。
- 候选矩阵只用于定位和分流，不直接视为最终可消费素材。临时候选矩阵放
.local/screenshot-to-prototype/<slug>/，再切到 .local/screenshot-to-prototype/<slug>/candidates/：
node .agents/skills/screenshot-to-prototype/scripts/slice-asset-sheet.mjs \
--input .local/screenshot-to-prototype/<slug>/asset-sheet.png \
--output-dir .local/screenshot-to-prototype/<slug>/candidates \
--grid 4x3 \
--names icon-search,logo-brand,avatar-user,banner-hero \
--manifest .local/screenshot-to-prototype/<slug>/candidate-manifest.json
- 审计候选切图：
node .agents/skills/screenshot-to-prototype/scripts/audit-assets.mjs \
--manifest .local/screenshot-to-prototype/<slug>/candidate-manifest.json
- 逐个候选做最终化分流，最终素材必须从以下三类产生：
- SVG/组件重绘：简单图标、线性图标、几何 logo、少色块图形、需要颜色继承、交互状态或 hover/focus 状态的元素。
- 高清透明 PNG：复杂插画、拟物图标、纹理、照片、渐变阴影重的图形、banner/封面。
- 直接消费 PNG：仅当候选切图通过审计且人工视觉检查无明显污染、误切、模糊、低分辨率时使用。
- 做 SVG/组件重绘或高清透明 PNG 时，必须同时参考原始本地源图和候选切图；候选切图只提供对象范围和风格线索，不能作为唯一依据。
- 只把最终文件型素材放入
src/prototypes/<slug>/assets/。最终 asset-manifest.json 只登记最终 SVG/PNG 文件并指向最终文件名和尺寸；组件化图标可直接放在原型代码中，不必登记到清单。React 原型不得引用 .local/ 候选切图。
- 页面用真实文本、React 结构、Grid/Flex、CSS variables、稳定
aspect-ratio 和响应式约束还原；不要把整张截图当背景。
- 运行
node scripts/check-app-ready.mjs /prototypes/<slug>，再用视觉回归工具检查真实运行截图。
- 最终回复提供轻量偏差报告，不新建长文档：
- 展示或链接原图与真实运行截图。
- 按 P0-P3 列出偏差，重点写未还原到位的问题，不写泛泛总结。
- P0：阻塞验收或页面不可用；P1：关键布局/比例/内容明显不符；P2：素材风格、间距、图标、阴影等显著偏差；P3：细节优化。
- 明确等待用户反馈选择是否继续修，不擅自进入下一轮大改。
命名
素材名用 kebab-case：icon-*、logo-*、avatar-*、image-*、banner-*、cover-*、background-*、decoration-*、border-*。含义不清时用 asset-01。
可消费素材标准
- 候选切图是中间产物；最终可消费素材是
src/prototypes/<slug>/assets/ 中的 SVG/高清透明 PNG，或原型代码里的组件化图标。
- 默认不要把候选切图直接当最终素材。直接消费只适用于清晰、干净、尺寸足够、边缘不脏且没有误切的候选。
- 简单图标优先 SVG/组件化；复杂视觉优先用源图参考单独高清化或修复为透明 PNG。
- 最终清单只登记最终文件型素材，不登记
.local/ 中间产物或代码组件。
提示词
写图片生成提示词时再读 references/prompts.md。
