截图界面解析与可交互原型重建

解决什么问题

设计交付只给一张截图时，最常见的困境是：你没法从 PNG 里读出栅格、间距或色板，只能肉眼量像素；照着抄出来的页面结构混乱，改一处样式可能牵动整块。这个技能针对的就是这类场景——输入一张界面截图，输出一份结构干净、可在浏览器直接打开、至少在一种移动宽度下表现正常的 HTML 原型。

核心能力

• 布局识别：区分页面区域、控件类型与内容层级，而不是把整张图当成一块画布描边
• 样式令牌提取：把主色、语义色、字号阶梯归纳为可复用的 CSS 变量，方便后续统一调整
• 内容替换：截图里不可读或不存在的文案，替换为贴近真实业务的可编辑占位内容，视觉意图保持不变
• 响应式兜底：至少覆盖一种移动端宽度，不输出只在桌面视口成立的死板布局

工作流程

1. 解析截图：识别布局区域、控件、字体层级、色彩角色与内容层级
2. 仅当目标视口无法推断时，才向使用者询问一次
3. 重建为语义化的 index.html，各部分使用语义标签，样式走可复用的 token
4. 保留视觉意图，替换无法辨识的文字
5. 补至少一个移动端宽度的响应式规则
6. 交付前自检：视觉保真度、文字是否溢出、内容是否可编辑

输出约定

• index.html：可直接打开的原型页面
• import-notes.md：简短说明文档，列出推断过程中的关键决策，例如视口假设、取色来源、占位文案策略，便于后续人工复核

适用边界

• 它不做像素级复印，也不产出切图资源；截图中未呈现的交互逻辑（动画、状态切换）需要人工补
• 输入分辨率过低时，字号与层级的推断可能出现偏差
• 遇到无法判断的视口，它会先提问而不是硬猜，使用时需要回应这一轮交互