夜雨聆风这一节课，我们继续往下走：当功能清单确定以后，下一步应该做什么？
很多人的第一反应是：让 AI 开始写代码。
但我建议你先停一下。
因为在真正开发之前，还有一步非常重要：页面原型与设计规范。
简单说，就是你要先告诉 AI：这个产品应该有几个页面，每个页面负责什么，用户从哪里点到哪里，哪些内容放首页，哪些内容不要放首页，按钮应该怎么排，信息应该怎么分层，整体风格应该是什么样。
如果这一步没讲清楚，AI 很容易做出一种产品：功能好像都有，但页面又丑又乱；按钮很多，但不知道先点哪个；首页塞满各种模块，看起来很完整，用起来很痛苦。
这不是 AI 完全不会设计，而是你没有给它设计边界。
一、为什么 AI 做出来的页面容易乱？
很多人让 AI 做页面时，喜欢用一句话：“界面做得好看一点。”
这句话基本没用。
因为“好看”太抽象了。对 AI 来说，它不知道你喜欢的是苹果风、企业风、卡片风、极简风，还是复杂后台风。它也不知道你的用户是普通家庭用户、工程人员、销售人员，还是企业管理者。于是它只能按照通用模板去补全页面，结果就是颜色很多、按钮很多、模块很多，看起来像个产品，实际上不好用。
页面混乱的根本原因通常有三个。
第一，页面职责不清。首页想展示所有东西，添加页又放了很多设置，详情页还塞进统计图，最后每个页面都很重。
第二，信息层级不清。重要信息和辅助信息混在一起，用户不知道第一眼该看什么，也不知道下一步该点哪里。
第三，设计标准不清。你没有提前要求字体、颜色、卡片、按钮、间距、布局风格，AI 就会自由发挥。
所以，页面设计的核心不是“漂亮”，而是“清楚”。
清楚比漂亮更重要。
一个真正好用的产品，用户打开以后应该很快知道三件事：现在是什么状态、我能做什么、下一步应该点哪里。
二、页面原型不是专业设计图，而是产品路线图
很多人一听“页面原型”，就觉得要会 Figma、会设计、会画图。其实普通人用 AI 做产品，不需要一开始就画非常专业的设计稿。你至少要先写出一份文字版页面原型。
文字版页面原型要解决四个问题：这个产品有几个页面；每个页面的核心任务是什么；页面上放哪些内容；用户点击以后跳到哪里。
比如“过期了吗”这个 App，第一版可以先拆成五个页面：首页、添加物品页、库存列表页、购物清单页、设置页。
首页的任务不是展示所有功能，而是让用户快速知道今天需要关注什么。所以首页应该重点放三类信息：即将过期、已经过期、低库存。添加物品页的任务是让用户快速录入一个物品，所以它应该围绕物品名称、分类、数量、位置、过期时间这些字段展开。库存列表页负责查看和筛选所有物品，购物清单页负责管理需要补货的东西，设置页负责提醒规则、数据同步和隐私权限。
你看，这里没有任何复杂设计软件，但页面逻辑已经清楚了。
这一步非常重要，因为它能防止 AI 把所有功能都堆到一个页面里。
三、每个页面只解决一个核心问题
如果你只记住一个原则，那就是：每个页面只解决一个核心问题。
首页负责看重点，不负责录入所有信息；添加页负责录入，不负责统计分析；列表页负责查找，不负责设置提醒；设置页负责规则，不负责展示业务数据。
很多 AI 生成的产品之所以乱，就是因为页面之间没有分工。比如首页既有添加按钮，又有统计图，又有购物清单，又有设置入口，又有推荐内容，又有会员模块。看起来很丰富，实际会让用户迷路。
你在给 AI 下指令时，可以直接这样写：
“请先输出页面职责表，不要直接写代码。每个页面只允许承担一个核心任务。首页只展示用户最需要立即关注的信息，不允许堆放全部功能入口。添加页只负责录入。列表页只负责查看、筛选和搜索。购物清单页只负责补货管理。设置页只负责提醒、同步和权限。”
这段话会明显提升 AI 输出质量。
因为你不是让 AI “随便设计一个页面”，而是在让它按产品结构设计。
四、页面设计要先定信息层级
页面不是把信息摆上去就行，而是要有层级。
一个页面通常可以分成三层：第一层是核心信息，第二层是主要操作，第三层是辅助内容。
比如“过期了吗”的首页，第一层应该是今日概览：有多少即将过期、有多少已过期、有多少低库存。第二层是主要操作：添加物品、查看库存、打开购物清单。第三层才是辅助内容，比如最近添加、分类统计、提醒设置入口。
如果顺序反过来，用户一打开首页看到一堆统计图、设置入口、按钮、分类卡片，就会觉得复杂。
所以你给 AI 的指令不能只写“做一个首页”，而要写：
“首页信息层级为：第一层展示今日概览，突出即将过期、已过期、低库存；第二层展示主要操作入口，包括添加物品、查看库存、购物清单；第三层展示辅助信息，包括最近添加和分类概览。首页不允许展示超过三个主要模块，避免信息过载。”
这个指令比“做得简洁一点”有效得多。
五、设计风格要具体，不要抽象
很多人会告诉 AI：“做得高级一点。”
AI 最怕这种话。
什么叫高级？黑色背景？渐变色？大圆角？玻璃拟态？科技感？商务风？每个人理解都不一样。
所以设计风格要具体。
比如你可以这样写：
“整体采用 iOS 原生风格，白色背景，浅灰分区，卡片式布局，主色控制在一种，按钮圆角统一，避免复杂渐变和过多阴影。字体层级清晰，标题、正文、辅助说明要有明显区分。页面留白充足，不要把信息排得太密。”
如果是企业管理系统，可以写：
“整体采用专业、克制、清晰的后台管理风格，左侧导航，顶部筛选，表格为主，操作按钮集中在右上角，避免花哨颜色，强调数据可读性和批量处理效率。”
你会发现，不同产品的设计要求完全不一样。家庭 App 要轻松直观，企业系统要稳定专业，内容工具要强调阅读体验，工程巡检工具要强调现场操作效率。
设计不是装饰，而是为使用场景服务。
六、不要让 AI 生成一堆假按钮
AI 做页面还有一个很常见的问题：它会生成很多看起来能点、实际没有功能的按钮。
比如“导出报告”“高级设置”“智能推荐”“会员中心”“分享给好友”“查看更多”。这些入口看起来让页面更完整，但如果第一版没有真正实现，就会变成假功能。
所以你必须提前加一条规则：
“第一版页面中不允许出现未实现功能入口。所有按钮必须有真实功能。如果某个功能暂时不做，就不要在页面上展示按钮或入口。”
这句话非常重要。
很多产品看起来低质，不是因为页面不够漂亮，而是因为用户点了按钮却没反应。对用户来说，不能用的功能比没有功能更糟糕。
第一版宁愿少，也不要假。
七、给 AI 的页面原型指令模板
你可以直接使用下面这个模板：
“请基于当前需求说明书和功能优先级，先不要写代码，先输出产品页面原型方案。要求包括：1. 页面列表；2. 每个页面的核心职责；3. 每个页面展示的信息模块；4. 每个页面的主要操作按钮；5. 页面之间的跳转关系；6. 首页信息层级；7. 设计风格规范；8. 第一版不允许出现未实现功能入口。每个页面只解决一个核心问题，避免功能堆叠。”
如果套用到“过期了吗”，可以这样写：
“请为‘过期了吗’设计第一版页面原型。页面包括：首页、添加物品页、库存列表页、购物清单页、设置页。首页负责展示今日概览、即将过期、已过期和低库存，不负责录入复杂信息；添加物品页负责录入物品名称、分类、数量、位置、过期日期；库存列表页负责按分类、位置、状态查看和搜索；购物清单页负责展示低库存自动生成的补货项，并支持勾选完成；设置页负责提醒规则、iCloud 同步、隐私与权限说明。整体采用 iOS 原生风格、卡片式布局、白色背景、信息层级清楚。第一版不允许出现社区、会员、积分、电商购买等未实现入口。”
这就是一份普通人也能写出来的页面原型说明。它不需要你会画图，但它能让 AI 明白产品应该怎么组织。
八、总结：页面原型的本质，是让产品变得可用
这一节课你只需要记住一句话：功能决定产品能做什么，页面决定用户怎么用。
一个产品不是功能越多越好，而是用户能不能顺利完成任务。页面原型的意义，就是提前把用户路径设计清楚，让 AI 不要乱堆功能，不要乱放按钮，不要乱做页面。
当你能写出需求说明书，能拆功能优先级，也能定义页面原型时，AI 做产品就会稳定很多。它不再是凭感觉生成页面，而是在按照你的产品结构执行。
下一节课，我们就可以正式进入 AI 开发 MVP：如何让 AI 按照需求、功能和页面原型，开始生成一个真正能跑起来的最小可用版本。
到那一步，你会发现，AI 编程真正的难点不是写代码，而是你前面有没有把产品地基打好。
