一个 Claude Code skill:把任何代码库变成漂亮的单页 HTML 教学课程,给非技术背景的 vibe coder 学。
Vibe Coding 提示词模板
简介
适合人群
想用 AI 把一个想法快速做成 MVP 的人——不需要是有经验的开发者,只需要会用浏览器、能复制粘贴文件、愿意投入几个小时。
核心内容
01它提供什么:一份从 0 到上线的提示词模板集
仓库把流程切成可复制的提示词文件:part1-deepresearch.md(20-30 分钟,判断需求、竞品和范围)、part2-prd-mvp.md(15-20 分钟,写清 MVP 到底要做什么)、part3-tech-design-mvp.md(15-20 分钟,定技术栈、预算、时间线)、part4-notes-for-agent.md(让 Agent 生成 AGENTS.md 等工作区文档)。前三个步骤在 ChatGPT/Claude/Gemini 等聊天工具里完成,不需要先建仓库。
02为什么「先想清楚再写」是 viable coding 的起点
作者强调「做思考在前,把干净的上下文交给工具」。多数 vibe coding 翻车不是因为 AI 不够强,而是因为需求本身一团模糊。先跑深度调研确认「这值得做吗」,再写 PRD 把范围钉死,再定技术设计选一个你真能交付的栈——这几步把「凭感觉冲代码」变成「带着明确合同开工」。
03模板工作流怎么用:从聊天到 IDE 再到 MVP
工作流分两阶段:阶段一在聊天工具里完成调研/PRD/技术设计并保存为 docs/ 下的文档;阶段二切到 Cursor、VS Code 或 Claude Code,用 part4 让 Agent 从模板生成 AGENTS.md、MEMORY.md、REVIEW-CHECKLIST.md(并为 Claude Code/Cursor/Antigravity/Codex 各配一层薄适配器),然后输入第一条命令:「Read AGENTS.md, propose a Phase 1 plan, wait for my approval, and then build it step by step.」按「计划→执行单个功能→验证测试」的小循环迭代,把 Agent 当初级开发者对待。
04进阶实践:产物优先记忆、多 Agent 编排与模型策略
仓库补充了高级玩法:让 Agent 把发现写进真实文件而非堆在聊天历史里(避免上下文爆炸),用原生压缩/交接产物(如 001-spec.md)跨会话续接;用 agent teams 并行时先让主 Agent 出计划、批准后再执行,避免静默回归;还给了「速度优先 / 均衡 / 深度优先」三档模型组合矩阵,建议按模型家族而非固定版本号选型。
05避坑与上线检查
常见坑都有对应解法:跳过调研就开写(先跑 Part 1)、让 Agent 独自交付代码(合入前审 diff、跑测试)、把自动生成的 UI 直接发布(上线前测可访问性与安全)、让一个工具包办一切(IDE + 终端 + 构建器混用通常更好)。上线前按 REVIEW-CHECKLIST 的安全清单过一遍密钥、鉴权与限流;Next.js/React 前端走 Vercel,静态站走 Cloudflare Pages。
实践建议
- 拿一个你早就想做的点子,从 part1-deepresearch 开始走完前三个提示词步骤,把输出存进 docs/,感受「想清楚」对后续构建的牵引力。
- 对照 examples/reddit-to-ai/ 的完整示例,看看同一套流程产出的调研、PRD、技术设计和最终代码长什么样。
- 在你的 AI IDE 里用 part4 生成 AGENTS.md 后,按「先计划、等批准、再执行」的首条命令跑一个功能,体会小步验收比一口气写完更可控。
- 上线的 MVP 对照 REVIEW-CHECKLIST 的安全清单自查一遍密钥、鉴权和限流,再决定部署到 Vercel 还是 Cloudflare Pages。
配套工作流
同类资源
用 Agent skill 自动审计 vibe-coded 应用,扫描 AI 助手常引入的安全漏洞。
AI 时代的 Vibe Coding 实践:用 Claude Code 从零开发一个 AI 平台的完整记录,技术选型到上线全流程。