从原型到代码
跟 AI 协作写页面，最常见的浪费是直接让它生成「完整应用」：页面、数据、逻辑一把梭。顺序应该反过来——先出静态页确认样子，再接数据，最后补边界。每一步都便宜，才能每一步都敢改。
你会遇到的现象
- 让 AI 一次生成整个页面加数据加逻辑，改起来牵一发动全身
- 样子还没确认，接口和状态已经写了一大堆
- 「看起来挺对」的页面，真接了数据才发现结构撑不住
先出静态页：确认样子
第一步，只做一件事：让 AI 输出这一屏的静态结构。标题、列表、卡片、按钮，内容全部用占位文本。这一版不接数据、不写逻辑，它存在的唯一意义是让人确认——样子对吗？
- 让 AI 只输出静态结构。告诉它「这一屏先出 HTML 静态版，内容用占位」，别让它顺手把数据和状态一起写了。它默认会多干，你明确说不。
- 重点看结构，不是看样式。字段够不够、层级对不对、状态有没有留位置。样式是最后一步，现在盯它纯属浪费。
- 静态页就是最便宜的规格确认。改一个占位字段只要几秒钟。等数据接上再改结构，代价就是改动的地方多了十倍。
- 确认完，这屏的规格就定下来了。把确认过的静态页存成「参照」，下一步和数据、代码都是对着它来。参见先规格后代码。
再接数据：确认形状
第二步，拿真实样本把占位内容换掉。这一步验证的不是「样子」，是「形状」——真实数据进来之后，结构还撑得住吗？
- 用真实字段，别再造一遍样例。用户的昵称、标题、评论是什么长度、什么格式，只有真实数据知道。样例数据永远是「刚刚好」的，而真实数据不是。
- 看三样：长度、空值、格式。超长的换行换不换得动，空值显示什么，时间、金额、图片的格式对不对。静态页没留的位置，这里全现形。
- 这一步让规格从「样子」变成「形状」。上一步定的还是「长什么样」，这一步定的是「什么数据装进来都不破」。
最后补边界：确认兜底
第三步，补边界。加载中、加载失败、空数据、超长内容——四个状态各看一眼。这一遍做完，这一屏才真的能交给 AI 写完整代码。
- 边界是接完数据才会出现的问题。提前补只会空想：你根本不知道真实数据会怎么撑爆布局。顺序上，边界必须排在数据之后。
- 空态是设计出来的，不是顺带的。零条数据时页面该显示什么、下一步动作是什么，得想清楚。参见四态齐全。
- 边界确认完，写代码这件事才真正开始。此时你手里有：确认过的静态页、撑得住的真实形状、兜得住的边界。给 AI 的提示词才有东西可写，参见三段式提示。
记住这个顺序的回报：每一步的回退成本都极低。静态页错了，改几行占位；数据接进来形状不对，换结构；边界没兜住，补两个状态。反过来先写整个应用，任何一处要改，都是在一片互相纠缠的代码里动刀。