A Claude Code skill that turns any codebase into a beautiful single-page HTML course for non-technical vibe coders.
Vibe Coding 提示词模板
Overview
Who it's for
Anyone who wants to turn an idea into a shippable MVP with AI — no need to be an experienced developer, just comfortable with files and copy-paste and willing to spend a few hours.
What you'll learn
01What it provides: prompt templates from zero to launch
The repo slices the flow into copy-pasteable prompt files: part1-deepresearch.md (20-30 min, gauge demand, competitors and scope), part2-prd-mvp.md (15-20 min, pin down what the MVP must actually do), part3-tech-design-mvp.md (15-20 min, pick a stack, budget and timeline), and part4-notes-for-agent.md (get the agent to scaffold your AGENTS.md and workspace docs). The first three steps run in chat tools like ChatGPT, Claude or Gemini — you don't need a repo yet.
02Why 'think it through first' is where viable coding starts
The author's rule is to do the thinking upfront and hand clean context to your tools. Most vibe coding fails not because the AI isn't strong enough but because the requirements themselves are a blur. Deep research confirms 'is this worth building', the PRD locks the scope, and the tech design picks a stack you can actually ship — turning 'code by feel' into 'start with an explicit contract'.
03How the template workflow runs: chat → IDE → MVP
The workflow has two phases. Phase one: run research/PRD/tech design in a chat tool and save them into docs/. Phase two: move to Cursor, VS Code or Claude Code, use part4 to have the agent scaffold AGENTS.md, MEMORY.md and REVIEW-CHECKLIST.md (plus a thin tool adapter for Claude Code / Cursor / Antigravity / Codex), then give the first command: 'Read AGENTS.md, propose a Phase 1 plan, wait for my approval, and then build it step by step.' Iterate in a small loop of plan → execute one feature → verify/test, treating the agent like a junior developer.
04Advanced practice: artifact-first memory, multi-agent orchestration, model strategy
The repo layers on advanced tactics: let the agent write findings into real files instead of burying them in chat history (avoiding context overload), use native compaction and handoff artifacts like 001-spec.md to resume across sessions; when running agent teams, get an approved plan from the lead before the execute agent edits files to cut silent regressions; and a three-tier model matrix (speed-first / balanced / depth-first), recommending model families over pinned version names.
05Pitfalls to avoid and the launch checklist
Common pitfalls have matching fixes: skipping discovery (run Part 1 first), letting agents ship code alone (review the diff and run tests before merging), publishing auto-generated UIs (test accessibility and security before launch), and forcing one tool to do everything (mixing IDE + terminal + builder usually works better). Before deploying, run the security section of REVIEW-CHECKLIST.md over secrets, auth and rate limits; ship Next.js/React/frontend apps on Vercel and static sites on Cloudflare Pages.
Practice tips
- Take an idea you've wanted to build, run the first three prompt steps starting with part1-deepresearch, save the output into docs/, and feel how 'thinking it through' steers the build.
- Compare against the worked example in examples/reddit-to-ai/ to see what research, PRD, tech design and final code look like end to end with this workflow.
- After scaffolding AGENTS.md via part4 in your AI IDE, run one feature with the 'plan first, wait for approval, then execute' first command and feel how small reviewed steps beat one big write.
- Before launch, run the security section of REVIEW-CHECKLIST.md over secrets, auth and rate limits, then decide between Vercel and Cloudflare Pages.
Companion workflows
Related resources
An agent skill that audits vibe-coded apps for the common security vulnerabilities AI coding assistants introduce.
A complete record of building an AI platform from scratch with Claude Code — stack choices through launch, in the open.