Back to Details

replica-build

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

replica-build

replica-build

Reads 
replica/recon.md
, 
replica/architecture.md
, 
replica/design/
. Updates 
replica/features.csv
(the 
clone
column) and keeps 
replica/build-log.md
.
读取 
replica/recon.md
、
replica/architecture.md
、
replica/design/
。 更新 
replica/features.csv
中的 
clone
列，并维护 
replica/build-log.md
。

The rules

规则

  • Clean room. Every line of code is written here, from the recon map and the specs. Never paste the original's HTML, CSS, JavaScript, SVGs or images, never load anything from its domain or CDN, never "view source and adapt".
  • Your words. Write every label, button, empty state and email fresh. Matching what a button does is parity. Matching its sentence is copying.
  • Tokens only. No raw hex or pixel values in components. If a value is missing, add it to the tokens.
  • 净室实现（Clean room）。 根据 recon map 和规范，在此从零编写每一行代码。绝不粘贴原应用的 HTML、CSS、JavaScript、SVG 或图片，绝不从其域名或 CDN 加载任何内容，也绝不采用“查看源代码后改写”的方式。
  • 全新文案。 所有标签、按钮、空状态和邮件均重新编写。按钮功能与原应用一致属于功能对等，句子与原文一致则属于抄袭。
  • 仅使用 Tokens。 组件中不得使用原始十六进制色值或像素值。如果缺少某个值，将其添加到 tokens 中。

Step 1: the shell

第 1 步：搭建 Shell

Routing for every screen in the inventory (stub pages are fine), the layout (nav, header, sidebar), tokens wired in, the primitives from replica-design, and seed data so screens have something real to show. Commit.
为清单中的每个屏幕配置路由（可以先使用桩页面），搭建布局（导航、页头、侧边栏），接入 tokens，使用 replica-design 中的基础组件，并添加种子数据，让各屏幕有真实内容可展示。创建 commit。

Step 2: the vertical slice

第 2 步：构建垂直切片

The core loop from the recon map, end to end, before anything else. For a booking app: create an event type, open the public page, book a slot, see it on the dashboard. Ugly is fine. Working is the point. If replica-backend has not run yet, use the seed data and a fake data layer with the same function signatures, so swapping in the real one changes no screen code.
先端到端完成 recon map 中的核心闭环，再处理其他内容。以预约应用为例：创建活动类型、打开公开页面、预约时段、在仪表板中查看预约。界面粗糙没关系，重点是功能可用。如果 replica-backend 尚未运行，请使用种子数据和函数签名相同的假数据层，以便替换为真实数据层时无需修改任何屏幕代码。

Step 3: screen by screen

第 3 步：逐屏构建

Work in the order of 
architecture.md
. For each screen:
  1. Read its row in the recon map: purpose, components, states, which flows pass through it.
  2. Look at the reference screenshot for layout and hierarchy. Not for pixels.
  3. Build it with the primitives. Real data from the data layer.
  4. Every state: empty, loading (skeletons, not spinners, if the original does), filled, error, no permission, long content (a 60 character name), mobile width.
  5. Basics, every time: semantic HTML, labels on inputs, keyboard reachable, visible focus, images with alt text.
  6. Set the matching rows in 
    features.csv
    to 
    yes
    or 
    partial
    (with a note).
  7. Screenshot it at the same viewport as the reference into 
    replica/clone-screens/S07.png
    for replica-diff.
  8. One commit per screen: 
    build: S07 booking page
    .
按照 
architecture.md
中的顺序推进。对每个屏幕：
  1. 读取 recon map 中对应的条目：用途、组件、状态，以及经过该屏幕的流程。
  2. 查看参考截图以了解布局和层级，而不是照搬像素。
  3. 使用基础组件进行构建，并从数据层获取真实数据。
  4. 所有状态：空状态、加载状态（如果原应用使用骨架屏，则使用骨架屏而非转圈加载器）、有数据状态、错误状态、无权限状态、长内容（一个 60 字符的名称）、移动端宽度。
  5. 每次都做好基础项：使用语义化 HTML、为输入控件添加标签、确保可通过键盘访问、焦点清晰可见，并为图片提供 alt 文本。
  6. 将 
    features.csv
    中对应的行设为 
    yes
    或 
    partial
    （并添加备注）。
  7. 以与参考截图相同的视口尺寸进行截图，保存到 
    replica/clone-screens/S07.png
    ，供 replica-diff 使用。
  8. 每个屏幕创建一个 commit：
    build: S07 booking page
    。

Definition of done, per screen

每个屏幕的完成标准

  • every state from the recon map, plus empty, error and loading
  • works at 390px and 1440px wide
  • keyboard only: can complete the flow
  • no console errors
  • no hard-coded copy borrowed from the original
  • features.csv updated
  • screenshot saved for diff
  • 包含 recon map 中的所有状态，以及空状态、错误状态和加载状态
  • 在 390px 和 1440px 宽度下均可正常使用
  • 仅使用键盘即可完成整个流程
  • 无控制台错误
  • 未使用从原应用借用的硬编码文案
  • 已更新 features.csv
  • 已保存截图以供差异对比

Step 4: the build log

第 4 步：维护构建日志

replica/build-log.md
, one line per screen: ID, date, done or partial, what is missing, what was harder than expected. When a feature is bigger than it looked, say so in the log and in the chat. Do not quietly ship half of it.
在 
replica/build-log.md
中每个屏幕记录一行：ID、日期、完成或部分完成、缺失内容、哪些部分比预期更难。当某项功能的工作量超出表面呈现时，应在日志和聊天中说明。不要悄悄交付半成品。

When you are stuck on how something works

遇到功能行为问题时

Go back to the original as a user: read its help article, watch its public walkthrough, use the user's own account. Do not dig into its code or network calls. Then build your own version of the behaviour.
以用户身份回到原应用：阅读其帮助文章、观看公开操作演示、使用用户自己的账户。不要挖掘其代码或网络请求。然后构建你自己实现的行为版本。

Output

输出

Screens built, the feature matrix updated, screenshots saved, and a summary: screens done of total, must-haves done of total, what is next. Then 
/replica-backend
if the data layer is still fake, else 
/replica-test
.
已构建的屏幕、已更新的功能矩阵、已保存的截图，以及一份摘要：已完成屏幕数/总数、已完成必备功能数/总数、下一步是什么。如果数据层仍为假数据层，接下来执行 
/replica-backend
；否则执行 
/replica-test
。