更快验证想法
把静态设计变成可点击、可输入、可演示的原型,让讨论基于真实体验。
01 / What
它的核心不是“写代码”,而是把设计意图、使用场景、交互流程和验收标准,用足够清楚的语言交给 AI。
02 / Why
Vibe Coding 让设计团队在进入研发排期之前,就能先看到体验是否成立。
把静态设计变成可点击、可输入、可演示的原型,让讨论基于真实体验。
用户、场景、目标、输入、输出、边界都会被迫讲清楚,减少模糊沟通。
小工具、小流程、小页面可以先快速验证,不必一开始占用正式研发资源。
03 / Cases
第一批项目要足够小、边界清晰、能独立展示。目的不是炫技,而是完整跑过“想法到原型”的闭环。
04 / Tools
适合想清楚需求、拆解问题、生成文案和推演方案。
适合快速做页面、活动页、交互原型和小型应用。
适合在项目中边写边改,理解代码、局部修改、重构和调试。
适合在终端中执行工程任务,读写文件、运行命令、修 bug 和跑测试。
适合委派完整任务,进行规划、执行、验证、审查和交付。
Codex Focus
学会给它上下文、验收标准和反馈。让它帮你读项目、改页面、跑预览、修问题,再把结果交给你判断。
05 / Tips
Tip 01 / 提问模板
我想开发一个:
【填写:小工具 / 网页应用 / 插件 / 脚本 / 小产品】
它的核心功能是:
【用一句话说明这个工具要解决什么问题】
目标用户是:
【填写:我自己 / 设计师 / 产品经理 / 运营 / 普通用户等】
他们使用这个工具的场景是:
【填写:什么时候会用、为了解决什么问题】
用户使用流程如下:
这个工具需要包含以下功能:
暂时不需要做:
页面结构希望是:
【填写:例如左侧输入,右侧输出 / 单页表单 / 卡片列表 / 多步骤流程】
视觉风格希望是:
【填写:简洁、现代、深色模式、Notion 风、Linear 风、科技感等】
交互要求:
用户输入示例:
【粘贴一段示例输入】
期望输出示例:
【粘贴一段期望输出】
希望使用:
【填写:React / Next.js / Vue / Python / Electron / 不确定,请 AI 推荐】
运行方式:
【填写:本地运行 / 网页部署 / Vercel / 桌面端】
是否需要后端:
【填写:不需要 / 需要 / 不确定】
是否需要数据库:
【填写:不需要 / 需要 / 不确定】
完成后需要满足:
请先理解我的需求,并基于以上信息完成一个可运行的 MVP。
如果信息不完整,请做合理假设继续推进,不要停住。
请先实现核心功能,再考虑优化界面和扩展功能。
Tip 02 / MVP 原则
优先级驱动的渐进式实现
最小可行
增加功能
更多能力
提速加力
完整产品
Tip 03 / Prompt 技巧
当前状态或目标
希望修改什么
风格、尺寸、性能等可验证指标
必须保持不变的部分
错误示例
这个界面太丑了,重新做一个好看的版本。正确示例
当前功能正确但视觉需优化。保持布局不变,将背景改为淡蓝并加轻微渐变;按钮圆角 8px;全站使用无衬线字体;整体风格“简洁、专业”。Tip 04
每轮只聚焦一个目标,比如布局、视觉层级、交互状态或移动端适配。
先确认流程能跑通,再打磨样式、动效和细节,避免还没可用就开始装修。
用浏览器开发者工具定位元素、查看尺寸和样式;用 IDE 让 AI 精准修改对应文件。
每次大改前保存当前版本,方向跑偏时及时回到上一版,而不是继续补救。
06 / Resources