上周六的晚上我坐在电脑前屏幕上是一个 240 分钟的倒计时——这是一场内部组织的 AI 原型考试限时 4 小时用 AI 把一个模糊的想法变成可点击的产品原型。没有产品经理没有设计师没有后端只有一台电脑、一个浏览器、和一堆还没打磨的提示词。我给自己选了个健康饮水提醒工具的小产品决定全程依靠大模型来完成需求拆解、页面生成、交互逻辑和视觉资产。最后我在时间截止前 18 分钟提交了原型跑通了从 idea 到可演示 demo 的完整链路。这篇文章就是那场考试的全流程记录包括我每一步怎么设计提示词、怎么调整迭代、以及最后踩过的坑。如果你也在尝试用 AI 加速原型验证或者想了解提示词工程在真实项目里怎么落地这份记录应该能给你一些能直接抄作业的参考。1. 这场AI 原型考试到底在考什么先说清楚考试规则。这是一场 4 小时限时挑战要求参与者围绕随机抽取的产品方向借助 AI 工具完成一个可点击、可演示的交互原型。不需要接入真实后端但必须能在浏览器里跑起来并且演示时能展现出核心功能闭环。我抽到的方向是健康管理类工具于是临时锁定了一个具体场景一款面向久坐上班族的饮水打卡 久坐提醒小工具名字就叫HydratePal。1.1 我理解的考核侧重点这类考试表面上考的是会不会用 AI实际上考的是拆解需求的能力和对话式迭代的节奏感。因为在 4 小时里你不可能像传统流程那样先写几十页 PRD、再高保真设计、再开发。你必须把 80% 的时间留给核心场景的可视化验证剩下 20% 时间去粗糙地完善边缘细节。另一个隐藏考点是AI 只是放大器如果你自己不会拆问题它给你的回答就会散成一锅粥。比如我最初想做一个复杂的数据统计后台但 4 小时内根本做不完。所以我用第一轮提示词强制让 AI 帮我收敛范围而不是让它自由发挥。1.2 我的 240 分钟时间预算我给自己拟了一个粗略的时间分配时间段投入时间任务0:00 - 0:3030 min需求拆解让 AI 产出 PRD 和 MVP 范围0:30 - 1:3060 min生成核心页面首页/打卡/数据页1:30 - 2:3060 min迭代交互逻辑、补充弹窗和跳转2:30 - 3:2050 min补充文案、Logo、配图等视觉资产3:20 - 4:0040 min最终联调修复明显问题这个计划不能算完美但关键点在于我没有在前期花太多时间纠结需求细节而是把边做边定交给了 AI 的迭代能力。工具选型方面我用了两个核心工具一个是大模型对话界面负责需求分析和文案生成另一个是 AI 编程助手负责生成 HTML/CSS/JS 原型代码。两者配合一个管想清楚一个管做出来。2. 让 AI 先当产品经理如何用提示词快速拆解需求很多人拿到题目后第一反应是打开 AI 让它直接生成原型页面这是一个大坑。因为缺少需求上下文生成的页面只是为了好看并不解决真实问题。我习惯先把 AI 当成一个可以随时提问的产品经理让它帮我梳理用户、痛点、功能边界。2.1 第一轮提示词把模糊想法变成完整 PRD我当时的输入其实只有一句话做一款帮助上班族喝水的 App。这个信息量太少了。于是我先给 AI 设定角色并明确提出输出要求你是一名有 8 年经验的高级产品经理。请基于以下模糊需求为我产出一份精简版 PRD产品需求文档 产品方向帮助上班族养成规律饮水习惯的移动端工具。 目标用户办公室久坐人群经常忘记喝水或有轻度健康管理需求。 请包含 1. 目标用户画像2-3 个典型特征。 2. 用户核心痛点列出 3 个最关键痛点。 3. 核心功能列表用 MoSCoW 方法分优先级必须有、应该有、可以有、不需要。 4. MVP 页面清单列出要做的页面和每个页面的核心元素。 5. 一句话产品定位。 输出要求简洁直接不要空话控制在 800 字以内。这轮提示词的妙处在于我用了一个常见的优先级方法MoSCoW它会强制 AI 区分必须有和可以有而不是把所有功能堆在一起。AI 生成的 PRD 里把饮水打卡、每日目标水量、久坐提醒、历史记录列为必须有把社交排行榜、自定义目标列为可以有。我立刻决定MVP 只做必须有其他全部砍掉。2.2 如何从 PRD 里提取 MVP 范围避免 4 小时做不完PRD 出来后AI 还帮我列出了页面流程首页进度环 打卡按钮、打卡成功弹层、数据页近 7 天柱状图、设置页提醒间隔。这个流程已经非常接近一个可演示的闭环了。但我发现一个问题它建议用真实图表库来画数据图表这会在调试上耗费大量时间。于是我又追加了一轮追问这个 PRD 的 MVP 范围如果要在 4 小时内用纯 HTML/CSS/JS 完成请把最核心的 4 个页面重新定义一遍每页不超过 3 个关键交互。不要使用任何第三方库所有图表用 SVG 或 CSS 手绘。输出修改后的页面清单和交互说明。这轮提示词的核心价值是资源约束提示。AI 默认会推荐用 Chart.js、ECharts 等库但对于一个限时原型来说引入库意味着要管理 CDN、兼容性、加载时间不值得。我让它切换到纯手写 SVG/ CSS模式后问题立刻变得可控。你可能觉得这不算什么但正是这个细节决定了后面交互调试的顺利程度。3. 从 0 到 1 生成可点击原型一段对话式开发的完整过程需求收敛后就进入了最耗时的页面生成阶段。我的策略不是一次生成整个应用那样输出会非常长容易截断或让 AI 上下文混乱。我更推荐一页一页生成每页在一个会话里持续迭代。3.1 让 AI 生成第一个页面先定框架与布局我给 AI 编程助手的第一个提示词是请用纯 HTML CSS JavaScript 生成一个移动端 H5 页面模拟手机宽度375px。 页面名称HydratePal 首页。 需要包含的元素 - 顶部App 名称 当日日期 - 中间一个圆形饮水进度环用 SVG显示今日已饮 1.2L / 目标 2L - 进度环下方一个大的 打卡 按钮 - 底部三个 Tab 按钮首页 / 数据 / 设置 视觉风格清爽、简约主色 #4A90D9背景浅灰 #F5F7FA。 输出要求输出完整可运行的 HTML 文件内联 CSS 和 JS不要图片。第一次生成时就遇到一个典型问题AI 生成的进度环默认是静态的点击打卡按钮也只是打印日志没有视觉反馈。不过没关系这是正常的起点。我先把布局和样式确认下来再进入交互迭代。3.2 用连续会话迭代交互追加需求让 AI 改代码接下来我继续在这个会话里追加提示词在刚才生成的首页基础上做 3 处修改 1. 点击打卡按钮后进度环根据新增水量增加 250ml同时显示一个打卡成功的 toast 提示2 秒后消失。 2. 底部 Tab 点击数据时当前页面内容切换成数据页数据页先显示一个占位柱状图用 SVG 画 7 个柱子即可。 3. 打卡按钮在 5 秒内不能连续点击防抖按钮文字在冷却时变成请稍候。 请输出完整的新 HTML 代码。这轮提示词的关键在于我明确提出了交互状态toast、禁用态、页面切换。AI 会自己实现一套状态管理逻辑对于原型来说完全够用。我看到它在 JS 里加了一个isCooldown变量还用了setTimeout来重置整体逻辑清晰。在第三个迭代回合我让它把数据页的柱状图补上具体数据请把数据页的占位柱状图改成真实的 7 天饮水数据数据用数组写死分别为 1.5L, 2L, 1.2L, 2.1L, 1.8L, 2L, 1.3L。柱状图下方加一句基于数据的总结文案例如这周你平均每天喝水 1.7L周末需要加油。保持和首页同款视觉风格。到这里打卡 数据展示这个核心闭环已经可以演示了。整个过程大约花了 50 分钟比我计划的时间多了一点因为第三次生成时 AI 不小心把首页的样式丢了我又让它保留首页样式只改数据页才拉回来。3.3 补全设置页和跨页面跳转核心闭环跑通后我开始补设置页。设置页只需要三个功能设置每天饮水量目标、设置久坐提醒间隔、保存按钮。再添加一个设置页复用底部 Tab 逻辑 - 点击底部设置Tab 切换到设置页 - 包含一个数字输入框每日目标水量默认 2000ml - 包含一个滑块久坐提醒间隔范围 30-120 分钟默认 60 分钟 - 底部保存设置按钮点击后弹窗提示已保存且首页的进度环目标值同步更新为新目标 - 首页、数据页、设置页之间的 Tab 切换要保留各页面状态例如打卡后的进度环数值不会丢失 请输出完整代码。这里有一个非常值得说的点跨页面状态保留。AI 原生生成的多 Tab 页面通常都是重新渲染 DOM状态会丢。我在提示词里特别写了保留各页面状态逼它用隐藏/显示的方式切换而不是重新创建。它最终用了三个div容器通过display: none和flex切换确实保留了状态。这个技巧对原型演示很重要因为评审点开你的页面时不会看到打卡进度突然归零的尴尬情况。4. 用 AI 补齐文案、Logo 和配图让原型看起来像产品一个原型如果只有功能性界面演示时会显得很干。为了让它更像一个真实产品我压缩了30分钟给视觉资产。这里的资产不是指复杂设计而是文案、Logo、和一些简单的插画。全部可以靠 AI 生成。4.1 Prompt让 AI 生成界面文案界面文案看起来小事但直接影响观感。我让 AI 产出了两种文案方案你是一位擅长健康类产品的文案专家。请为HydratePal这个喝水提醒 App 写以下几组文案 1. 首页空状态标题和副标题当今日饮水为 0 时显示要温暖不焦虑 2. 打卡成功 toast 的 3 个备选文案短有趣 3. 数据页的周总结文案模板根据饮水量多少给出不同说法 4. App 商店简介一句话不超过 15 个字 风格要求轻松、口语化、有陪伴感不要像说明书。AI 给的很典型比如空状态标题今天还没喝水来一杯吧打卡成功文案咕咚咕咚又前进一步。虽然不能直接用但作为灵感参考非常高效。我挑了两句直接放进代码里整个产品的人味儿马上就出来了。4.2 快速生成 Logo 和配图的提示词参考Logo 和配图我用的是一套 AI 绘图流程。提示词要写清楚主体、风格、背景、配色否则会出来一堆不可用的图。我当时用的参考模板请生成一个 App 图标设计水杯形状杯子上有一个简洁的箭头向上符号寓意坚持喝水。整体使用蓝色渐变#4A90D9 到 #2E6DB4圆角正方形底座扁平化风格不要文字不要复杂阴影。背景纯白色。如果平台支持矢量生成更好不支持的话就让它输出 PNG 风格。实际用下来AI 绘图工具对扁平化图标的理解还算靠谱但如果对复杂语义会出现偏差。所以我在这个阶段定位是能看就行等原型验证通过后再找设计师精修。另外我还让 AI 画了一张配图用于演示前的封面页继续生成一个 16:9 的展示封面背景办公桌上有一台笔记本电脑、一杯水、一个健康手环旁边有绿色植物暖色调扁平插画风给封面配一句英文文案 HydratePal - Stay Hydrated, Stay Focused。请把文字作为图片的一部分输出。这些视觉资产在最终演示时非常加分观众第一眼会以为这是一个设计完整的项目完全看不出是限时冲刺做出来的。5. 完整可复用的提示词清单这一份可以直接抄这里我把整场考试中使用的核心提示词汇总一下。这些提示词本身不是玄学它们依赖的是一些基本工程原则角色明确、输出格式明确、约束条件明确、单轮只改一个点。你可以根据自己的产品方向替换名词。5.1 阶段一需求分析与 MVP 收缩产品经理角色提示词你是一名高级产品经理请帮我产出一份精简版 PRD包含用户画像、核心痛点、MoSCoW 功能优先级、MVP 页面清单、一句话定位控制在 800 字内。范围收缩提示词请基于上述 PRD重新定义 4 小时内可完成的 MVP 范围去掉所有第三方依赖明确每个页面的核心交互。流程梳理提示词请用文字描述这个 MVP 的完整用户操作流程从打开 App 到完成一次核心动作每一步列出界面元素。5.2 阶段二原型页面生成与迭代首屏生成提示词请用纯 HTML CSS JS 生成一个移动端页面宽度 375px包含[具体组件]使用[配色/风格]输出完整可运行代码。交互补充提示词请在刚才的页面上增加以下交互[具体交互逻辑]注意[状态保留/防抖/反馈动画]。输出完整 HTML。跨页面跳转提示词请把页面改造成 Tab 导航结构点击底部 Tab 切换[页面列表]切换时保留所有页面状态不要使用 iframe不要重新加载。5.3 阶段三内容与视觉资产补充文案生成提示词你是[某领域]文案专家请为[产品]写[文案类型]风格要求[形容词]输出[数量]个备选。图标或配图生成提示词请生成一个[类型]图标/插画主体是[描述]采用[风格]和[配色]避免[问题]不要[忌口]。你需要记住的是提示词并不是一次写完美而是要像聊天一样互相修正。每次 AI 输出不符合预期时追问一句请只修改 XX 部分其他保持不变比重新写一大段提示词更高效。6. 这次冲刺踩到的坑以及我给后来者的提速建议最后来说说这场 4 小时冲刺里最真实的部分——坑。我踩过的大概有四类每一个都能让你浪费 20 分钟以上。6.1 回滚地狱AI 改了 A 就破坏了 B在第三次迭代时我让 AI 补数据页的图表结果它把首页的进度环样式全部丢了返回的代码里首页进度环变成了一个灰色圆圈。这种事情你几乎一定会遇到。原因是大模型在长上下文中忘记了之前的视觉约束。我的解决办法每次迭代只改一个点并且在提示词末尾强调保留其他部分原样只修改我提到的地方。如果输出还是变了我会明确说请对比上一次我的首页原来长什么样把它恢复。另一个技巧是在一个会话里持续迭代不要频繁新开会话因为会话上下文就是 AI 的短期记忆。6.2 超长代码输出被截断有一次我让 AI 一次性输出三个页面的完整代码结果回答在第二页中间截断了。遇到这种情况不要慌让 AI 从截断处继续生成即可。更理想的做法是拆分输出第一轮只输出首页第二轮输出数据页第三轮输出设置页最后让 AI 合并。合并的提示词可以这样写现在我有三段分别对应首页、数据页、设置页的 HTML 代码请把它们合并成一个完整的 HTML 文件保持各自样式不变用统一的 Tab 导航整合到一起。我会把三段代码粘贴给你。粘贴的时候要注意如果因为长度问题一次发不完可以分多次发并告诉 AI这是第一段还有两段接下来发。实际测试下来它的兼容性很好。6.3 最后 30 分钟的降级方案时间还剩 30 分钟时我突然发现设置页保存按钮没有同步更新首页的目标值。当时已经来不及细调了我做了两个降级处理一是直接让 AI 给设置页的保存按钮加一个alert提示设置已生效请返回首页查看二是把首页的目标值也写死成和设置页的默认值一致这样演示时不会穿帮。你可能会问这算不算糊弄其实对于一个 4 小时原型来说演示的整体一致性比功能完整度更重要观众不会去点每一个设置项但他们会注意到视觉样式和交互闭环是否顺畅。如果某个机械功能卡住不如直接绕过它把时间花在更显眼的地方。另一个值得分享的小经验是在每一个 H2 章节都刻意去提提示词因为整场考试的评分点之一就是提示词的质量。细节上我自己会在输出前快速检查一遍生成的代码是否能直接在浏览器里打开。如果是 AI 编程助手比如具备直接预览能力的工具就更方便了只要看到预览效果就立刻反馈修改。如果你也要参加类似的原型冲刺我最后给你一个真诚的建议别把 AI 当成自动程序员而是当成一个随叫随到、不会烦的高效下属。你越清楚自己要什么它给的东西就越精准。4 小时做完一个原型其实不是 AI 有多强而是想清楚再动手这件事在 AI 时代第一次变得如此便宜。