vibe-coding
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseVibe Coding
Vibe Coding
Scope
范围
Covers
- Timeboxed, AI-assisted rapid prototyping (“vibe coding”) to produce a functional demo (not slides)
- Turning a rough idea into a buildable prototype spec + task board + prompt pack
- A tight iteration loop: generate → run → verify → adjust → log decisions
- “Build tools to build the thing” when it meaningfully speeds up the demo (timeboxed)
- Safe use of coding agents: least privilege, no secrets, small diffs, validation, rollback
When to use
- “Vibe code a working prototype we can demo in 30–90 minutes.”
- “Replace this Figma concept with a clickable prototype.”
- “I’m not an engineer—help me build a small app/tool with AI and ship a demo.”
- “Turn this AI feature idea into a proof-of-concept with a clear build loop and demo script.”
When NOT to use
- You need a production-grade system, hardening, scaling, or security review (use + engineering process).
building-with-llms - You need upstream problem framing, strategy, or PRD-level alignment (use ,
problem-definition).writing-prds - The work is high-stakes/irreversible (payments, auth, medical, legal, safety-critical) without human owners and reviews.
- The request is “build anything” with no demo target; do intake first and narrow to one scenario.
涵盖内容
- 限时、AI辅助的快速原型开发（“Vibe Coding”），产出可运行的演示原型（非幻灯片形式）
- 将粗略想法转化为可落地的原型规格+任务看板+提示包
- 紧凑的迭代循环：生成→运行→验证→调整→记录决策
- 当能显著加快演示进度时，“构建工具来实现目标”（限时进行）
- 安全使用编码Agent：最小权限、无敏感信息、小幅度变更、验证机制、回滚方案
适用场景
- “通过Vibe Coding在30–90分钟内开发出可演示的工作原型。”
- “将Figma概念原型替换为可点击的交互式原型。”
- “我不是工程师——帮我用AI构建一个小型应用/工具并完成演示版本交付。”
- “将这个AI功能想法转化为带有清晰构建循环和演示脚本的概念验证原型。”
不适用场景
- 你需要生产级系统、加固、扩容或安全评审（请使用+工程流程）。
building-with-llms - 你需要上游问题梳理、战略规划或PRD级别的对齐（请使用、
problem-definition）。writing-prds - 工作涉及高风险/不可逆转的场景（支付、认证、医疗、法律、安全关键领域）且无人工负责人和评审。
- 需求为“随便做个什么”且无明确演示目标；请先进行需求收集并缩小到单一场景。
Inputs
输入信息
Minimum required
- Prototype goal: what should a user be able to do in the demo (1–3 “happy path” tasks)
- Target user + context (who uses it, where it fits)
- Timebox (e.g., 30/60/90 minutes) + demo audience (internal, customer, exec)
- Platform preference (web app, mobile, CLI, spreadsheet, etc.) and constraints (privacy, data sensitivity)
- Data/integrations: mock data ok? any APIs needed? (default to mock)
Missing-info strategy
- Ask up to 5 questions from references/INTAKE.md (3–5 at a time).
- If details remain missing, proceed with explicit assumptions and offer 2–3 options (e.g., mock vs real data; simple UI vs polished).
- If asked to run commands or write/modify files, request confirmation, keep changes in a dedicated folder, and include rollback guidance.
必填输入信息
- 原型目标：演示中用户应能完成的操作（1–3条“顺畅路径”任务）
- 目标用户+使用场景（谁使用、适用场景）
- 时间限制（如30/60/90分钟）+演示受众（内部团队、客户、高管）
- 平台偏好（Web应用、移动端、CLI、电子表格等）及约束条件（隐私、数据敏感性）
- 数据/集成：是否允许使用模拟数据？是否需要调用API？（默认使用模拟数据）
信息缺失处理策略
- 从references/INTAKE.md中最多提出5个问题（每次3–5个）。
- 若仍有信息缺失，基于明确假设推进工作，并提供2–3种选项（如模拟数据vs真实数据；简易UI vs 精致UI）。
- 若要求执行命令或编写/修改文件，需先请求确认，将变更放在专用文件夹中，并提供回滚指导。
Outputs (deliverables)
交付成果
Produce a Vibe Coding Prototype Pack (in chat; or as files if requested), in this order:
- Vibe Coding Brief (goal, demo scenario, non-goals, constraints, timebox)
- Prototype Spec (user flow, screens/components, data model, acceptance criteria, “fake vs real” decisions)
- Prompt Pack (copy/paste prompts to drive the coding agent safely and efficiently)
- Build Plan + Task Board (vertical slices with checks/tests per slice)
- Demo Script + Runbook (how to run, how to demo, what to say, what to avoid)
- Risks / Open questions / Next steps (always included)
Templates: references/TEMPLATES.md
产出Vibe Coding原型包（在对话中交付；若有需求可提供文件），顺序如下：
- Vibe Coding 简要说明（目标、演示场景、非目标、约束条件、时间限制）
- 原型规格（用户流程、界面/组件、数据模型、验收标准、“模拟vs真实”决策）
- 提示包（可直接复制粘贴的提示词，用于安全高效地驱动编码Agent）
- 构建计划+任务看板（按垂直切片划分，每个切片包含检查/测试环节）
- 演示脚本+操作手册（运行方式、演示方式、讲解内容、避坑要点）
- 风险/待解决问题/下一步计划（必须包含）
模板参考：references/TEMPLATES.md
Workflow (7 steps)
工作流程（7个步骤）
1) Pick a single demo outcome (kill ambiguity fast)
1) 确定单一演示成果（快速消除歧义）
- Inputs: Initial idea, timebox, target audience.
- Actions: Write a one-sentence demo promise (“In 60 minutes we will demo…”) + 3–5 non-goals. Choose one “hero” scenario and what can be faked.
- Outputs: Draft Vibe Coding Brief.
- Checks: The demo promise is specific, observable, and fits the timebox.
- 输入信息：初始想法、时间限制、目标受众。
- 行动：撰写一句演示承诺（“我们将在60分钟内完成……的演示”）+3–5条非目标。选择一个核心场景，并确定可模拟的内容。
- 产出：草稿版Vibe Coding 简要说明。
- 校验：演示承诺需具体、可观测，且符合时间限制。
2) Define the prototype’s contract (what exists, what’s mocked)
2) 定义原型约定（哪些是真实功能，哪些是模拟内容）
- Inputs: Demo scenario, platform preference, constraints.
- Actions: Specify the minimum user flow, screens/components, and data shape. Decide: mock data vs real data; stub integrations vs live.
- Outputs: Draft Prototype Spec.
- Checks: Acceptance criteria exist for each user-visible step; “fake vs real” is explicit.
- 输入信息：演示场景、平台偏好、约束条件。
- 行动：明确最简用户流程、界面/组件及数据结构。决策：模拟数据vs真实数据；集成桩vs实时集成。
- 产出：草稿版原型规格。
- 校验：每个用户可见步骤都有验收标准；“模拟vs真实”的决策清晰明确。
3) Set the build loop + guardrails (how we’ll vibe code safely)
3) 设置构建循环+防护规则（安全进行Vibe Coding）
- Inputs: Repo/app context (if any), constraints, desired stack.
- Actions: Create a Prompt Pack that forces: small diffs, clear file list, run instructions, and “ask before risky actions.” Create a task board of 3–8 vertical slices.
- Outputs: Prompt Pack + Build Plan + Task Board.
- Checks: Every slice has a Definition of Done and a quick validation method (manual steps or tests).
- 输入信息：代码库/应用上下文（如有）、约束条件、技术栈偏好。
- 行动：创建提示包，强制要求：小幅度变更、清晰的文件列表、运行说明、“风险操作前需确认”。创建包含3–8个垂直切片的任务看板。
- 产出：提示包+构建计划+任务看板。
- 校验：每个切片都有完成定义及快速验证方法（手动步骤或测试）。
4) Scaffold the thinnest runnable slice (end-to-end)
4) 搭建最简可运行切片（端到端）
- Inputs: Prompt pack, chosen platform/stack, prototype spec.
- Actions: Generate a minimal skeleton that runs. Implement the hero path with mock data. Capture run commands and known limitations.
- Outputs: Runnable prototype + run notes (for the runbook).
- Checks: A fresh user can run it in ≤ 5 minutes; the hero path is demonstrable.
- 输入信息：提示包、选定的平台/技术栈、原型规格。
- 行动：生成最小可运行骨架。基于模拟数据实现核心场景。记录运行命令及已知限制。
- 产出：可运行原型+运行笔记（用于操作手册）。
- 校验：新用户可在≤5分钟内启动运行；核心场景可正常演示。
5) Iterate in vertical slices (generate → run → verify → log)
5) 按垂直切片迭代（生成→运行→验证→记录）
- Inputs: Task board, working prototype.
- Actions: For each slice: request a plan + diff, apply changes, run, verify against acceptance criteria, and record decisions/bugs. Avoid broad refactors; prefer incremental improvements.
- Outputs: Updated prototype + iteration notes.
- Checks: Each slice ends with a user-visible improvement and a validated run.
- 输入信息：任务看板、可运行原型。
- 行动：针对每个切片：请求方案+变更内容，应用变更，运行验证，对照验收标准检查，记录决策/问题。避免大规模重构；优先选择增量改进。
- 产出：更新后的原型+迭代笔记。
- 校验：每个切片迭代后需实现用户可见的功能改进，并完成运行验证。
6) Optional: build a tool to build the thing (timeboxed)
6) 可选：构建辅助工具（限时）
- Inputs: Repeated friction (editing, generating, transforming content).
- Actions: If it reduces time-to-demo, vibe code a tiny helper tool (editor, generator, script) and immediately use it to advance the prototype.
- Outputs: Helper tool + note on how it accelerates the workflow.
- Checks: The helper tool saves time within the current timebox; otherwise cut it.
- 输入信息：重复出现的痛点（编辑、生成、转换内容时的摩擦）。
- 行动：若能缩短演示准备时间，可通过Vibe Coding开发一个小型辅助工具（编辑器、生成器、脚本），并立即用它推进原型开发。
- 产出：辅助工具+关于其如何加速工作流程的说明。
- 校验：辅助工具需在当前时间限制内节省时间；否则取消该步骤。
7) Package the demo + quality gate + handoff
7) 打包演示内容+质量校验+交接
- Inputs: Prototype + all draft artifacts.
- Actions: Write the demo script + runbook. Run references/CHECKLISTS.md and score with references/RUBRIC.md. Finalize Risks / Open questions / Next steps.
- Outputs: Final Vibe Coding Prototype Pack.
- Checks: A stakeholder can demo it without you; risks and next steps are explicit and owned.
- 输入信息：原型+所有草稿文档。
- 行动：编写演示脚本+操作手册。执行references/CHECKLISTS.md并通过references/RUBRIC.md评分。最终确定风险/待解决问题/下一步计划。
- 产出：最终版Vibe Coding原型包。
- 校验：相关人员无需你的协助即可完成演示；风险及下一步计划清晰明确且有负责人。
Quality gate (required)
质量校验（必填）
- Use references/CHECKLISTS.md and references/RUBRIC.md.
- Always include: Risks, Open questions, Next steps.
- 使用references/CHECKLISTS.md和references/RUBRIC.md进行校验。
- 必须包含：风险、待解决问题、下一步计划。
Examples
示例
Example 1 (30–60 min prototype): “Use to build a demo-ready web prototype of an ‘AI meeting notes → action items’ tool. Mock the LLM output. Output the full Vibe Coding Prototype Pack.”
Expected: brief + spec + prompt pack + task board + demo script; prototype plan defaults to mock data and a single hero flow.
vibe-codingExpected: brief + spec + prompt pack + task board + demo script; prototype plan defaults to mock data and a single hero flow.
Example 2 (non-engineer builder): “I’m a PM. Use to help me create a clickable prototype of an onboarding checklist app in 45 minutes. I need a demo script for my team.”
Expected: tight scope, fake data, vertical slices, and a runbook optimized for demo reliability.
vibe-codingExpected: tight scope, fake data, vertical slices, and a runbook optimized for demo reliability.
Boundary example: “Vibe code a production payments backend and deploy it.”
Response: out of scope; propose a prototype-only approach (mock payments), identify required security/engineering owners, and recommend a separate production plan.
Response: out of scope; propose a prototype-only approach (mock payments), identify required security/engineering owners, and recommend a separate production plan.
示例1（30–60分钟原型）：“使用开发一个可演示的Web原型，实现‘AI会议纪要→行动项’工具。模拟LLM输出。交付完整的Vibe Coding原型包。”
预期成果：简要说明+原型规格+提示包+任务看板+演示脚本；原型计划默认使用模拟数据及单一核心流程。
vibe-coding预期成果：简要说明+原型规格+提示包+任务看板+演示脚本；原型计划默认使用模拟数据及单一核心流程。
示例2（非工程师用户）：“我是产品经理。使用帮我在45分钟内创建一个可点击的入职 checklist 应用原型。我需要一份给团队的演示脚本。”
预期成果：范围紧凑、使用模拟数据、按垂直切片开发、操作手册优化以保障演示可靠性。
vibe-coding预期成果：范围紧凑、使用模拟数据、按垂直切片开发、操作手册优化以保障演示可靠性。
边界示例：“通过Vibe Coding开发生产级支付后端并部署。”
回应：超出范围；建议仅做原型方案（模拟支付流程），明确所需的安全/工程负责人，并推荐单独的生产级开发计划。
回应：超出范围；建议仅做原型方案（模拟支付流程），明确所需的安全/工程负责人，并推荐单独的生产级开发计划。