用途
该技能在用户提供截图、模型图、Figma 导出或任何设计图像，并要求将其复刻为代码时触发。参考图像即为规格说明，技能扮演翻译者而非设计者的角色，所有视觉决策均源自图像本身。
主要能力
该技能提供一套结构化的图像到代码复刻流程，运行七个提取层：
- 布局栅格：测量容器最大宽度、列系统、水平内边距、区块高度与间距、对齐方式、Z 轴层叠。
- 字体排版：针对每个可见文本元素提取字体系列、字重、字号、行高、字间距、大小写转换与颜色，并通过特定字符（如小写 a 的单层/双层结构、小写 g 的尾部形态等）辅助字体识别。
- 颜色调色板：提取每个不同颜色的十六进制值，涵盖背景、文本、强调色、边框、阴影等角色分工。
- 间距系统：测量基础单位、按钮内边距、卡片内边距、栅格间隙、元素间距、区块上下内边距、导航高度等。
- 组件清单：盘点每个不同 UI 组件的形状半径、边框、阴影、背景、可见状态、图标风格，并进行圆角一致性检查。
- 氛围与质感：提取噪点/颗粒叠加、径向环境光晕、毛玻璃效果、渐变背景、着色阴影、图像叠加、背景图案、深度层次感。
- 响应式线索与交互推断：从静态图像推断多列折叠、移动端菜单、吸顶导航、入场动画、悬停提升、轮播组件、标签页状态管理等行为。
使用方式
技能按四个阶段执行，每个阶段设有质量关卡：
- 阶段一：图像接收：对参考图进行分类（图像类型、可见区块、目标视口、保真度、主题），输出提取摘要，对不清晰处向用户提问而非猜测。
- 阶段二：深度提取：运行全部七个提取层并填写提取表，跳过任何一层都会导致漂移。
- 阶段三：构建：按全局设计令牌、布局骨架、字体排版等顺序逐步实现，使用提取出的精确 CSS 值，包含具体代码蓝图。
- 阶段四：视觉对比：对照参考图进行验证。
该技能强调质量关卡机制：任何阶段未通过关卡则阻止进入下一阶段。
适用场景
适用于需要将设计图或截图高度还原为代码的前端开发工作，特别是对像素级精度有要求的复刻任务。
限制
关于该技能的收费、价格、平台支持范围、具体性能指标等信息暂未提供。