把截图/设计稿还原成前端代码并做视觉比对

当用户提供网页、App 界面、仪表盘、组件或线框图截图，要求「照着做出来」「复刻这个设计」时，生成匹配布局、间距、颜色、字体的前端代码并渲染比对。

适用场景

解决思路

1. 先确定目标技术栈：若在已有项目中，读取 package.json 判断 React/Next/Vue 及 Tailwind 版本，复用现有组件、token 和图标库，仓库已给出答案时不要追问；若无项目：单屏或快速原型用单个自包含的 index.html（Tailwind 走浏览器构建）；应用或多屏用 Vite 上的 React + TypeScript + Tailwind v4；用户提到 Next.js、SSR 或路由则用 Next.js App Router。
2. 编码前先写一份简短规格：自上而下记录布局区域（nav、hero、sidebar、grid、footer）及各自的 grid/flex 结构；设计 token（3-6 个十六进制颜色、字体族猜测与字号阶梯、间距节奏通常为 4px 倍数、圆角、阴影风格）；应抽成带 props 的重复组件（卡片、列表行、按钮）；图片无法体现的部分（hover/focus 状态、移动端布局、真实数据、折叠线以下内容）。
3. 根据图片分辨率估算尺寸：若截图为 2x（Retina 截图宽 2880px 对应 1440px 布局），把像素测量值减半。
4. 构建时使用语义化元素（header、nav、main、section、button、a），把重复部分抽成组件，token 集中放在一处（Tailwind v4 的 @theme 或 CSS 自定义属性）而不是散落十六进制色值；使用图片中的真实文案而非 lorem ipsum；无法提取的图片和 logo 用带描述性 alt 的占位图；使用项目已有的图标库（默认 lucide-react），不要手绘 SVG 或 emoji。
5. 做响应式：先按截图视口构建，再定义收缩方式——多列网格堆叠、导航变为菜单按钮、字号用 clamp() 或响应式工具类缩小；若截图是移动端则反向处理。
6. 渲染并比对：若能运行浏览器（Playwright、无头浏览器或浏览器工具），在源图视口宽度下截图结果并并排比对；按差异从大到小修复：先布局与对齐，再间距，再字号与字重，最后颜色；通常两三轮即可，剩余差异停留在字体渲染级别时停止。
7. 交付：提供文件、运行方式，以及简短假设清单（猜测的字体、自行发明的状态、推断的内容），并指出哪些地方需要真实素材。
8. React 19 注意：使用带 TypeScript prop 类型的函数组件；React 19 已移除 propTypes 检查，不要添加；向函数组件传 ref 不再需要 forwardRef。
9. Tailwind CSS v4 注意：配置写在 CSS 中，使用 @import "tailwindcss"; 和 @theme { --color-brand: #...; }，不要用 tailwind.config.js，也不要用 v3 的 @tailwind base/components/utilities 指令；自定义 token 会自动生成工具类（如 bg-brand）。
10. Next.js（App Router）注意：页面放在 app/ 下，组件默认是 Server Component；只有使用 state、effect 或事件处理器的组件才加 "use client"。
11. Create React App 已废弃，纯 React 请用 Vite。
12. 各技术栈的初始化命令见 references/stack-setup.md，视觉检查见 references/visual-check.md。

适用边界 · 注意事项

• 仓库已明确技术栈时不要凭空猜测，也不要把 Tailwind v3 配置混入 v4 项目。
• 不要用绝对定位强行像素级对齐，首次缩放就会崩坏，应使用 flex 和 grid 并接受微小差异。
• 不要把所有东西塞进一个巨型组件，重复三次以上的内容就应抽成带 props 的组件。
• 不要忽略不可见状态：按钮和链接需要 hover 与 focus-visible 样式，输入框需要 label，即使截图看不到。
• 不要从抗锯齿边缘或渐变处取色，应从图片平坦区域取样，并检查文字对比度满足 WCAG AA（正文 4.5:1）。
• 若无法渲染结果，不要声称已匹配，应说明未做比对。