编程 · Use case
Stop Vibe Coding|AI 开发:计划→原型→测试→部署
TL;DR
- 谁: 喜欢让 AI 直接改代码、但缺少计划与测试门禁的工程师。
- 结果: 可复现流水线:Plans → 原型 UI → Feature 切片 → 单测 → Deploy + 回归。
- 工具: AI 编码助手 + Playwright/单测框架 + Render(或同类)+ 本篇可嵌教程。
视频
Traversy Media · Stop Vibe Coding: There's A Better Way To Use AI · 2026-08-10 · 方法提炼自公开教程;Prompt 为站内 RCTCF 改写;嵌入许可需人工复核。无字幕批次,步骤据章节+描述重建。
按片内章节与描述重建步骤(本轮无字幕,勿编造旁白细节)。
方法要点
- 项目初始化;写清 Plans / Overview(可含 Playwright)。
- 先原型 UI,再按 Feature 切片(模板→表单预览→导出)。
- 每片加单元测试;失败才改 Prompt。
- 部署到 Render(或同类)并回归。
步骤 1 · 写 Plans / Overview
初始化项目,写清目标、验收与测试策略(可含 Playwright)。 完成标志:Plan 文档可独立交给 AI,无需口头补上下文。
步骤 2 · 先原型 UI
只做可点击的 UI 骨架,不急着接全业务。 完成标志:主路径可点通(即使数据是假的)。
步骤 3 · 按 Feature 切片
如证书模板→表单预览→导出,每片可独立 PR。 完成标志:Feature #1 有明确 DoD。
步骤 4 · 每片加单元测试
先写测再实现;红灯时改 Prompt/规格,不盲目重跑。 完成标志:Feature #1 测试绿。
步骤 5 · 部署并回归
部署到 Render 或同类环境,跑关键路径回归。 完成标志:线上/预发环境主路径通过。
截图位:① 起始界面 ② 关键中间态(脱敏)③ 完成标志验收。
可复制 Prompt
全选代码块 → 粘贴到你的 AI 编码助手。把 {{变量}} 换成功能与技术栈。
Role: 你是反 vibe-coding 的工程教练,强制「计划→切片→测试→部署」。
Context:
- Feature: {{FEATURE}}
- Stack: {{STACK}}
- Constraints: {{CONSTRAINTS}}
Task:
1) Write a plan with acceptance tests.
2) Slice into PR-sized tasks.
3) For task #1: files to touch, tests first, Definition of Done.
4) Suggest a minimal deploy + regression checklist.
Constraints:
- Do not invent APIs; list unknowns as questions.
- Prefer vertical slices over horizontal layers.
- Tests before drive-by refactors.
Format:
## Plan + acceptance tests
## PR-sized slices
## Task #1 (files / tests / DoD)
## Deploy & regression
## Open questions来源与版权
- Stop Vibe Coding: There's A Better Way To Use AI — Traversy Media · YouTube · 2026-08-10。页面内播放使用官方嵌入。步骤与 Prompt 由 U know how 站内整理(无字幕轻量精修)。
