编程 · 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 改写;嵌入许可需人工复核。无字幕批次,步骤据章节+描述重建。

按片内章节与描述重建步骤(本轮无字幕,勿编造旁白细节)。

方法要点

  1. 项目初始化;写清 Plans / Overview(可含 Playwright)。
  2. 先原型 UI,再按 Feature 切片(模板→表单预览→导出)。
  3. 每片加单元测试;失败才改 Prompt。
  4. 部署到 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

来源与版权