从输入 URL 到交付可运行的原型项目，每一步都清晰可控。
启动 Skill 后，Claude 会请求你提供目标网页的 URL 或界面截图。支持同时提供两者——URL 用于结构提取，截图作为视觉真值。
Claude 调用 Chrome 浏览器自动化工具（导航、读取页面树、截图、JS 提取样式），采集页面的完整结构、配色、字体、间距和组件信息。若 Chrome 不可用，自动回退到 WebFetch 或无障碍树 + 视觉知识。
手动脚手架创建 Next.js 14 + Tailwind CSS 项目，将设计令牌映射到 tailwind.config.ts，由外而内逐层构建组件。通过 npx tsc --noEmit 确保零类型错误后交付。
交付后 Claude 邀请你对比原页面与克隆效果。你可以发送对比截图或文字反馈，Claude 逐轮修正，直到满意为止。
每次新增功能或修改页面，Claude 同步输出代码变更与 Markdown 格式的设计文档。所有文档通过页面右下角浮动按钮打开的挤压式面板浏览，支持复制与切换。
为快速原型设计而生的全链路能力。
Chrome 自动化优先，WebFetch 兜底，无障碍树 + 视觉知识保底。三级回退确保任何页面都能提取。
不是简单截图，而是生成完整的 Next.js 14 + Tailwind CSS 项目——可运行、可编辑、可扩展的真实代码。
交付不是终点。持续对比、反馈、修正，像素级逼近原始设计。支持新增页面与功能扩展。
每次功能变更自动生成 Markdown 设计文档，通过挤压式侧边面板浏览，支持多文档切换与一键复制。
自动提取页面配色、字体、间距，映射为语义化的 Tailwind 主题变量。修改一处，全局响应。
每次交付前执行 npx tsc --noEmit，确保零 TypeScript 错误，代码即刻可用。
每个克隆项目遵循统一的目录结构，清晰可维护。
每个功能变更自动生成结构化文档，以下是两个真实示例。
基于现代前端生态，确保生成的项目即刻投入使用。
点击右下角按钮体验面板效果——主内容区被推向左侧，而非被遮挡。
用户可通过弹窗修改账户登录密码，需验证原密码后设置新密码。
| 标题栏 | "修改密码" + ✕ |
| 表单区 | 原密码 / 新密码 / 确认 |
| 操作栏 | 取消 + 确认修改 |
密码长度 8-20 位，需包含字母和数字…
将 Skill 安装到 Claude，发送任意网页链接，即可开始原型克隆之旅。