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