Claude Code 实战记录

Overview

Who it's for

Anyone who wants to see what Vibe Coding looks like across an entire real project — especially Chinese-speaking developers who want a copyable playbook (tech-selection doc → execution plan → small commits → screenshot-driven iteration) for building their own product from zero.

What you'll learn

1. 01Setting the tone: what Vibe Coding is, and 'documentation is king'

   The repo first defines the concept: Vibe Coding was coined by Andrej Karpathy in February 2025 — 'There's a new kind of coding I call vibe coding, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.' You no longer really 'write' code; you describe what you want in natural language, look at the result, and adjust. Core traits: natural-language driven, iterative, focused on 'what' rather than 'how', and docs-as-code — which is why the author crowns 'documentation is king' as the doctrine of AI-era programming.

2. 02From tech selection to launch: an initial version in 45 minutes

   The author gives the AI a single tech-selection prompt (Next.js full-stack + SQLite for fast integration), has it produce a 'tech selection and system design' document, checks it, then @-mentions that document to kick off development. The AI auto-generates an execution plan, reviews and revises it, then uses superpowers:subagent-driven-development to fill in project structure, queue processing and database integration. About 45 minutes later, the first version is done.

3. 03Key engineering habits: small commits, screenshot feedback, iterated UI

   A big benefit of building with superpowers is that the agent commits after each feature, so you can easily roll back if the AI breaks code. When the app hits a bug at runtime, no long description is needed — just send a screenshot and the AI fixes it. The initial UI was ugly, so the author triggered ui-ux-pro-max with one sentence to redesign the UI and interactions across every section, polishing through 3 rounds; this 'screenshot + natural language' feedback loop runs through the whole project.

4. 04Feature iteration: from env vars to user-configurable models

   Post-launch iteration continued: model config moved from environment variables to a settings page where users configure their own keys — text/image models support OpenAI and Gemini protocols, video models support ByteDance seedance and Google, defaulting to the /model/list API with manual model_id fallback and local key storage. The author also added user isolation, model-access interception, Veo model integration, and a storyboard sub-flow (shot description → first/last frames → video generation). Every change ships with the original prompt and before/after screenshots.

5. 05Learning value: a copy-pasteable skill setup checklist

   The repo lists every skill the author actually used, with install commands: superpowers (14 composable skills enforcing TDD and four-stage debugging), frontend-design, planning-with-files (Manus-style persistent planning), skill-creator, notebooklm, best-minds (simulator thinking), find-skills, ui-ux-pro-max, and the built-in simplify. If you want to replicate this fully-loaded development environment, install the list as-is.

Practice tips

• Reproduce the author's 0-to-1 path: give the AI one tech-selection prompt, let it generate a design doc, check it, then @-mention the doc to start development — and time the journey from idea to first version.
• Install superpowers and deliberately use subagent-driven-development to feel how 'commit after each feature' helps you roll back when the AI breaks something.
• When you hit a bug or a UI problem, send a screenshot plus one line of natural language to the AI, and compare that feedback loop against writing long descriptions.
• Pick 2-3 skills from the author's list (e.g. planning-with-files, best-minds), install them, and judge the quality of the execution plans they produce in your next project.

Companion workflows

Related resources