用途：把一张 UI 图片还原成干净、响应式、可访问的前端代码，并在可能时把渲染结果与图片比对。
主要能力与流程：
- 选择目标技术栈。项目内优先匹配现有栈：读取 package.json 判断 React/Next/Vue 及 Tailwind 版本，复用已有组件、设计令牌与图标库，不重复询问。无项目时，单屏或原型输出单个自包含 index.html；多屏应用用 Vite + React + TypeScript + Tailwind v4；提到 Next.js、SSR 或路由则用 Next.js App Router。
- 编码前写简短规格：自上而下的布局区域及其 grid/flex 结构；3-6 个十六进制颜色、字体与字号、间距节奏（通常 4px 倍数）、圆角与阴影；可复用的卡片、列表行、按钮等组件；图片无法体现的悬停/聚焦状态、移动端布局、真实数据与折叠以下内容。按图片分辨率估算尺寸，2x 截图需将像素值减半。
- 构建：使用语义元素（header、nav、main、section、button、a），重复部分抽成组件，令牌集中在一处（Tailwind v4 的 @theme 或 CSS 自定义属性）；使用图片中的真实文字而非 lorem ipsum；无法提取的图片和 logo 用带描述性 alt 的占位符；图标用项目已有库（默认 lucide-react），不手绘 SVG 或 emoji。
- 响应式：先按截图视口构建，再定义折叠方式（多列网格堆叠、导航变菜单按钮、用 clamp() 或响应式工具缩小字号）；若截图是移动端则反向处理。
- 渲染比对：若可运行浏览器（Playwright、无头浏览器或浏览器工具），按原图视口宽度截图并并排比较，优先修复布局对齐、间距、字号字重、颜色，通常两三遍即可，剩余差异到字体渲染级别可停止。
- 交付：提供文件、运行方式与假设清单（字体猜测、状态虚构、内容推断），并标明需要真实素材之处。
技术栈要点：React 19 用带 TypeScript 属性类型的函数组件，不加 propTypes，函数组件传 ref 无需 forwardRef；Tailwind CSS v4 配置写在 CSS 中，用 @import "tailwindcss"; 与 @theme，不用 tailwind.config.js 或 v3 指令，自定义令牌自动生成工具类；Next.js App Router 页面在 app/ 下，组件默认是服务端组件，只有用到状态、副作用或事件处理才加 "use client"；Create React App 已弃用，纯 React 用 Vite。各栈安装命令见 references/stack-setup.md。
失败模式：仓库已定义栈却仍猜测，或把 v3 配置混入 v4；用绝对定位强行像素对齐（首次缩放即失效）；写成巨型单组件；忽略悬停与 focus-visible 等不可见状态、输入框缺 label；从抗锯齿边缘或渐变取色导致色偏，正文对比度需满足 WCAG AA 4.5:1；未渲染就谎称已匹配，若无法渲染应说明未做比对。