Prototype to Code
When building pages with AI, the most common waste is asking it to generate a "complete app" all at once: page, data, and logic in one go. The order should be reversed — static page first to confirm the look, then wire real data, then cover the edge cases. Only when every step is cheap can you afford to change it at every step.
- 让 AI 一次生成整个页面加数据加逻辑，改起来牵一发动全身
- 样子还没确认，接口和状态已经写了一大堆
- 「看起来挺对」的页面，真接了数据才发现结构撑不住
Static page first: confirm the look
First step, one job: have AI output the static structure of this screen. Title, list, card, button — all content is placeholder text. This version wires no data and writes no logic; its only reason to exist is for someone to confirm — does the look work?
- Have AI output only the static structure. Tell it "this screen first, as a static HTML version, content in placeholders" — don't let it write the data and states in passing. It over-delivers by default; you explicitly say no.
- Focus on structure, not styling. Are the fields enough, is the hierarchy right, is room left for states? Styling is the last step; staring at it now is pure waste.
- A static page is the cheapest spec confirmation there is. Editing one placeholder field takes seconds. Wait until data is wired to change the structure, and every change costs ten times as much.
- Once confirmed, the spec for this screen is set. Save the confirmed static page as your reference; the data and code steps both work against it. See Spec Before Code.
Then wire data: confirm the shape
Second step: swap real samples in for the placeholders. What this step verifies isn't the "look", it's the "shape" — once real data flows in, does the structure still hold?
- 用真实字段，别再造一遍样例。用户的昵称、标题、评论是什么长度、什么格式，只有真实数据知道。样例数据永远是「刚刚好」的，而真实数据不是。
- 看三样：长度、空值、格式。超长的换行换不换得动，空值显示什么，时间、金额、图片的格式对不对。静态页没留的位置，这里全现形。
- 这一步让规格从「样子」变成「形状」。上一步定的还是「长什么样」，这一步定的是「什么数据装进来都不破」。
Finally cover edges: confirm the fallbacks
Third step: cover the edge cases. Loading, load failure, empty data, oversized content — look at each of the four states once. Only after this pass is the screen really ready to hand to AI for the full code.
- 边界是接完数据才会出现的问题。提前补只会空想：你根本不知道真实数据会怎么撑爆布局。顺序上，边界必须排在数据之后。
- 空态是设计出来的，不是顺带的。零条数据时页面该显示什么、下一步动作是什么，得想清楚。参见四态齐全。
- 边界确认完，写代码这件事才真正开始。此时你手里有：确认过的静态页、撑得住的真实形状、兜得住的边界。给 AI 的提示词才有东西可写，参见三段式提示。
Remember the payoff of this order: every step costs almost nothing to roll back. Static page wrong? Edit a few placeholder lines. Data comes in and the shape breaks? Swap the structure. An edge case leaks through? Add two states. The other way around — build the whole app first — and any change means cutting into a tangle of interdependent code.