关于 replica-build
replica-build 是一项依据重建说明、架构和设计规范实现界面的技能。它引导团队搭建基础结构、实现核心流程并逐屏开发，同时记录功能进度和截图。
主要功能
- 01搭建路由、布局、令牌和种子数据
- 02优先实现核心流程
- 03为页面实现所需界面状态
- 04检查响应式布局与键盘访问
- 05记录功能状态、日志和截图
适用场景
- 01依据重建图构建可运行的端到端流程
- 02按架构与设计规范实现页面
- 03记录页面进度并准备对比截图
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/replica-build确认已加载。
详细介绍
replica-build
读取 replica/recon.md、replica/architecture.md、replica/design/。
更新 replica/features.csv（clone 列），并维护
replica/build-log.md。
规则
- 洁净室。 所有代码都在这里编写，依据调研地图和规格说明。绝不粘贴原版的 HTML、CSS、JavaScript、SVG 或 图片；绝不从其域名或 CDN 加载任何内容；绝不“查看源代码并改造”。
- 使用自己的措辞。 每个标签、按钮、空状态和邮件都要重新撰写。 按钮功能相同属于功能对等；句子相同则属于抄袭。
- 仅使用设计令牌。 组件中不得使用原始十六进制值或像素值。如果缺少某个值，就将它添加到设计令牌中。
第 1 步：搭建外壳
为清单中的每个屏幕配置路由（存根页面也可以），搭建布局 （导航、页眉、侧边栏），接入设计令牌，使用 replica-design 中的基础组件，并准备种子数据，让屏幕能显示实际内容。提交。
第 2 步：实现垂直切片
优先端到端实现调研地图中的核心流程。在此之前不要做其他工作。以预约应用为例：创建活动类型、打开公开页面、预约时段，并在仪表板上查看预约。界面粗糙也没关系，能正常工作才是重点。如果 replica-backend 尚未运行，就使用种子数据和具有相同函数签名的假数据层，这样替换为真实数据层时无需修改任何屏幕代码。
第 3 步：逐个实现屏幕
按 architecture.md 中的顺序进行。对于每个屏幕：
- 阅读调研地图中的对应行：用途、组件、状态，以及经过该屏幕的流程。
- 查看参考截图，了解布局和层级关系，而不是像素。
- 使用基础组件构建屏幕，并通过数据层获取真实数据。
- 覆盖每种状态：空状态、加载状态（如果原版使用骨架屏而非加载指示器，这里也使用骨架屏）、已填充状态、错误状态、无权限状态、长内容（60 个字符的名称）和移动端宽度。
- 每次都做好基础工作：使用语义化 HTML，为输入框添加标签，确保可通过键盘访问并显示焦点，为图片添加替代文本。
- 在
features.csv中将相应行设为yes或partial（并附上说明）。 - 按照与参考图相同的视口尺寸截屏，保存到
replica/clone-screens/S07.png，供 replica-diff 使用。 - 每个屏幕提交一次：
build: S07 booking page。
每个屏幕的完成标准
- 覆盖调研地图中的每种状态，以及空状态、错误状态和加载状态
- 在 390px 和 1440px 宽度下正常工作
- 仅使用键盘也能完成整个流程
- 控制台无错误
- 没有照搬原版的固定文案
- 已更新 features.csv
- 已保存用于比对的截图
第 4 步：记录构建日志
在 replica/build-log.md 中，每个屏幕记录一行：ID、日期、完成或部分完成、缺少的内容，以及比预期更难的地方。如果某项功能比看起来复杂得多，就在日志和聊天中说明。不要悄悄交付半成品。
遇到不清楚的功能时
以用户身份回到原版：阅读帮助文章、观看公开演示，并使用用户自己的账号。不要挖掘其代码或网络请求，然后自行实现相同行为。
输出
完成的屏幕、已更新的功能矩阵、已保存的截图，以及一份摘要：
已完成屏幕数／总屏幕数、已完成必备功能数／必备功能总数、下一步要做的事。然后，如果数据层仍是假的，就运行 /replica-backend；否则运行 /replica-test。