Vibe GuideBETA
中文EN
VIBE CODING ROADMAP

The complete path from idea to product

6 stages, 18 milestones and 31 actions. Open the current milestone, follow its actions, check the result, and continue.

Follow the colored path from idea to delivery. 18 milestones connect 31 guided actions; open a node to begin.

STAGE 1

Define the idea

→
  1. 01

    Record the idea

    Write users, problem and a practical success check.

  2. 02

    Prepare the brief

    A project description says what to make, for whom and how it is used.

STAGE 2

Prepare the workspace

←
  1. 03

    Choose an AI tool

    The tool should help save files and run the project; locate its controls first.

  2. 04

    Create the project folder

    A folder stores project files; its path tells you where it is.

  3. 05

    Open it in the tool

    A tool can open different projects; check which one is active.

  4. 06

    Prepare Git and project rules

    Initializing Git creates a place for history; committing saves a version. AGENTS.md states the rules the tool should follow.

STAGE 3

Turn needs into a plan

→
  1. 07

    Clarify needs and scope

    Answer one question at a time; undecided is a valid answer.

  2. 08

    Write requirements and stories

    Requirements record inputs, actions and expected outcomes.

  3. 09

    Agree on design and technology

    A prototype previews appearance and sequence; its Save button may still be simulated.

  4. 10

    Plan development and tests

    A task list names the next job, prerequisites and completion check.

STAGE 4

Build and verify

←
  1. 11

    Check the environment and initialize

    The runtime is software needed to execute the program; dependencies are packages it uses.

  2. 12

    Build and test incrementally

    A preview opens the work in progress so you can see its real pages and behavior.

STAGE 5

Accept and repair

→
  1. 13

    Test the full journey personally

    Acceptance means trying the agreed checks yourself and deciding whether the goal is met.

STAGE 6

Deliver and maintain

←
  1. 14

    Choose how to deliver

    Delivery means intended users can open and use it; a public URL is optional.

  2. 15

    Review release readiness

    This checks preparation; an untried installer or site remains pending.

  3. 16

    Prepare deployment or packaging

    Installers, static pages and backend-powered sites need different preparation.

  4. 17

    Deliver and check the real entry

    Check the local entry for local use or the real URL for a public site.

  5. 18

    Plan maintenance and the next change

    A backup keeps another copy; restoration proves that copy can be opened and used.

Not passed? Repair before continuing

When acceptance or release review finds an issue:

Record feedback→Repair plan and criteria→Repair and retest

↶ Return to acceptance · ↶ Return to release review

Choose a delivery path

Local useWeb deploymentApp installer

GitHub Pages guide for static sites ↗

Check the real entry after delivery; return to feedback and repair if needed.

Prepare Git and project rules before the first file changes; follow the guided action order inside each milestone.

Find the starting point

Module shortcuts

What people build · AI revenue research · 50 ideas · GitHubComplete roadmap · idea to releaseWrite down the ideaI only know I want a websitePrepare a project briefUnsure how to describe the first flowOpen an AI tool that can edit filesInstallation, sign-in, or the screen differsCreate a folder for the projectDocuments or the folder is missingOpen that folder in the AI toolAI names a different projectCreate Git history and project instructionsCommit fails or asks for identityInspect a file AI actually createdPrevious files are missingAnswer one question at a timeAI asks about unfamiliar technical termsChoose only this version’s essentialsReducing scope left only a pictureKeep the agreement in plain languageThe document is too long to reviewDescribe how people will use itAI lists features without a user flowReview a key screen before buildingThe prototype may use simulated behaviorLet AI choose from actual conditionsI do not know local versus shared storageAsk AI for the next small taskThe first task just says “build frontend”Check the runtime and start the projectInstallation or startup failsOpen the first page of the projectThe preview will not openAdjust this page onlyA visual edit changed other behaviorMake Save retain real contentCannot save, or records vanish on refreshFinish the whole flow onceThe button responds but nothing happensTry blank input and repeated clicksBlank or duplicate records appearReopen it after stoppingThe address fails the next dayCheck it against the original ideaAI says done, but I cannot use itRecord the trial feedbackThe issue happens intermittentlyPlan the fix and its passing checksAI starts fixing without a planFix according to plan and hand back for retestingThe same action still fails after a claimed fixChoose: personal use or sharingThe shared local link does not openAssess readiness for deliveryReadiness is claimed without evidencePrepare and try the deliverableInstaller or deployed application failsApprove delivery and verify the real entryIt opens locally but not for othersOptional: publish a simple page on GitHub PagesThe public URL returns 404Continue next time without starting overAI wants to start over in a new chatChoose a tool · Codex Claude Cursor Qoder TRAE Kimi pricingHomeProject typesTalking to agents · prompts and troubleshootingChoosing a stackFrontend & UI · component dictionaryGlossary · AI and development · examples and diagramsOpen the tool and verify project accessPrepare the project, version history, and AI rulesDescribe the intended interface styleHelp AI change exactly one targetBackend: storage and accessTesting: check that it worksDeployment: deliver a real entry pointMaintenance: keep the product usableWebsites & web apps · The idea, one link away.Mini programs · Build where the users already are.Mobile apps · Turn a good idea into an everyday app.Desktop apps · Make a tool for repetitive tasks.

A practical guide for beginners

This bilingual practical guide has 6 stages, 18 milestones and 31 actions. App illustrations are examples; users verify their own project results.