网页像素级原型复刻

要解决什么问题

产品或设计评审里，你往往只有线上页面 URL或一张截图，却需要一份能在本地改样式、加交互、对接 mock 的代码底座。手工对照 DevTools 搭 Next.js 工程既慢，也容易在颜色、间距、组件边界上漂移。这个技能把「看见页面 → 可维护原型」收成一条固定流水线。

技能如何工作

对话从收集 URL / 截图 开始；若两者都有，URL 负责结构与脚本侧信息，截图作为视觉真值。

抓取（Phase 1） 按优先级尝试：Chrome 自动化（read_page 无障碍树、截图、必要时 JS 抽 computed style）、WebFetch 拉 HTML、或在工具受限时用树结构 + 常见 UI 库经验补全。需要沉淀的是分区（头/侧栏/主内容）、设计 token、 typography、间距与组件形态。

搭建（Phase 2） 不走 create-next-app，按模板手工脚手架；把 token 映射进 tailwind.config.ts，由外到内搭 Shell 与区块；图标用 lucide-react，图片尽量保留原 URL。交付前必须 npx tsc --noEmit 零错误。

内置设计文档：每个项目带右下角「设计文档」浮钮，侧滑面板浏览 src/data/designDocs.ts 中的 Markdown；每次新增页面、弹窗或显著行为变更，都要同步写文档条目，与代码一并交付。

后续可在同一工程上改页面、加功能或再挂一个新 URL 页面，并沿用主题与共享组件。

适用边界

• 目标是高保真可编辑原型，不是 1:1 克隆后端、鉴权或真实 API。
• 部分站点会拦截自动化或出站抓取，此时依赖无障碍树、截图与你的反馈迭代。
• JS 注入提取样式可能被扩展安全策略挡住，需用截图与人工标注补差。