Vibe GuideBETA
中文EN

Agree on design and technology

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

What will you have after this node?
Environment setup knows what to install and try first.
Why this milestone?

Review a draft before spending time building the features.

Start here2 steps · Follow in order

0102Review a key screen before buildingTo checkOpen this stepClose this step
Sketch the pages users need to complete their task
Try the page’s links and buttons yourself
Label features that are still demonstrations
Illustration · not an app screenshot

01What do you need, and what should you keep?

What do you need before starting?

The requirements and user journey.

What should you keep for the next step?

The design file guides later implementation.

Which files should AI read and save in this step?

In your tool’s project chat, ask it to open the files below. If a file is missing, follow the link back to the step that creates it.

Ask AI to read these materials first: docs/requirements.md · docs/stories.md

Ask AI to save the result to: docs/design.md

Missing these materials? Return to the step that creates them →

02What will this step help you do?

Review a draft before spending time building the features.

Understand it, then judge for yourself

What does this concept mean?

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

How would you decide in a different situation?

How could a “Saved” message be distinguished from a simulation?

See a reference answer

Actually write and reread/reopen the record when implemented; a prototype message alone is not evidence.

Answer in your own words; if unsure, compare the explanation above and check it against your own project.

03What exactly should you do in this step?

OpenClose

Project chat and prototype preview

Send one action at a time: select and copy its prompt (⌘C on Mac, Ctrl+C on Windows), switch to your tool’s project chat, paste it, replace bracketed fields and send. Wait for the reply and check the stated result before continuing.

  1. Preview a draft to decide what goes where and what buttons do.OpenClose

    Suggested prompt:

    Use docs/requirements.md and docs/stories.md to draft the main journey. Tell me how to open it and where buttons lead. Mark simulated behavior. Do not connect a database yet.

    Afterwards, you should see: A draft opens for review.

  2. Click through the draft and identify unclear entries.OpenClose

    Suggested prompt:

    Change only these locations: 【fill in】. Preserve confirmed work and tell me where to review it.

    Afterwards, you should see: Main inputs, buttons and results are easy to find.

  3. Save the approved screen and action decisions.OpenClose

    Suggested prompt:

    Write screen arrangements and button behavior to docs/design.md. Separate working features from demonstrations.

    Afterwards, you should see: The design file guides later implementation.

Practice: personal journal (frontend + backend + database)

Use the same learning-journal project throughout this example. For your own project, compare applicable requirements without creating another project.

Review input fields, Save, status and history using clearly labeled mock data.

What should you see after this step?
You recognize idle, saving, success and failure; the prototype has no real database yet.
What should you do first if you get stuck?
Ask whether saving is mocked; a demonstration does not establish a working backend.

04Not sure how? Follow each action

OpenClose

  1. Preview a draft to decide what goes where and what buttons do.

    What should you see after this action?
    A draft opens for review.
    What should you do if that result is missing?
    Request an exact URL or file location if unclear.

  2. Click through the draft and identify unclear entries.

    What should you see after this action?
    Main inputs, buttons and results are easy to find.
    What should you do if that result is missing?
    Name specific changes rather than asking for a complete redesign.

  3. Save the approved screen and action decisions.

    What should you see after this action?
    The design file guides later implementation.
    What should you do if that result is missing?
    Correct any demonstration described as finished development.

05Words in this step

OpenClose

Prototype ↗

An early model for discussing or checking a design.

A cardboard house shows layout but cannot be lived in.

Mock ↗

A controlled dependency substitute used to verify interactions.

A fake checkout checks requests without charging money.

06How should you handle a problem here?

OpenClose

The prototype may use simulated behavior

Where should you look to understand the problem?
Check for labels identifying simulated data, storage and real services.
Follow these steps to resolve the problem
Ask AI to label controls as simulated, real or unimplemented. Review layout and declared behavior; verify real persistence during development.
Expected recovery
Repeat the original action and obtain the expected result; keep unexecuted checks marked unverified.

Not listed? Ask AI to investigate

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

07Material for this step (fill or copy)

OpenClose

If you completed the individual prompts above, do not resend this full template. Use it to organize this step’s material when needed; replace bracketed fields, confirm and copy into the project chat.

Prompt template for this step

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI
Journal practice: fill or supplement this step

For this full-stack practice only: use this combined prompt, fill its fields and send it once instead of also sending the generic template. It does not authorize later steps.

Full-stack practice: this step

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

08Check this before continuing

The first-version flow is understandable, with simulated and implemented behavior distinguished.

09What should you do if the expected result is missing?

OpenClose

Request an exact URL or file location if unclear.

Compare with an example (illustration, not your result)
A simulated confirmation must say it has not stored a real reservation.
Step 1 of 2Checked, next step →
0202Let AI choose from actual conditionsTo checkOpen this stepClose this step
What devices will users use, and what can you spend?
Compare what each option can do and its limits
Choose the option that fits your project
Illustration · not an app screenshot

01What do you need, and what should you keep?

What do you need before starting?

The agreed page draft, devices, budget and data needs.

What should you keep for the next step?

Environment setup knows what to install and try first.

Which files should AI read and save in this step?

In your tool’s project chat, ask it to open the files below. If a file is missing, follow the link back to the step that creates it.

Ask AI to read these materials first: docs/requirements.md · docs/stories.md · docs/design.md

Ask AI to save the result to: docs/design.md

Missing these materials? Return to the step that creates them →

02What will this step help you do?

Ask which tools will build the project and what they cost.

Understand it, then judge for yourself

What does this concept mean?

The frontend is the page, the backend processes requests and the database stores records. Prepare the parts your project needs.

How would you decide in a different situation?

Why does local storage not imply device sync?

See a reference answer

Local data stays on that device/browser. Cross-device use needs designed storage/identity/sync and another-device verification.

Answer in your own words; if unsure, compare the explanation above and check it against your own project.

03What exactly should you do in this step?

OpenClose

The stack guide, then the project conversation

Send one action at a time: select and copy its prompt (⌘C on Mac, Ctrl+C on Windows), switch to your tool’s project chat, paste it, replace bracketed fields and send. Wait for the reply and check the stated result before continuing.

  1. Give users, storage needs and budget, then ask for an understandable approach.OpenClose

    Suggested prompt:

    Read the requirements and docs/design.md. Recommend one approach and explain the page, the program processing requests, data storage and costs. Do not install yet.

    Afterwards, you should see: You understand the role of each part.

  2. Confirm the approach and record it.OpenClose

    Suggested prompt:

    Save the chosen approach, required accounts and a small test of its hardest part in docs/design.md. Keep unknowns pending.

    Afterwards, you should see: Environment setup knows what to install and try first.

Practice: personal journal (frontend + backend + database)

Use the same learning-journal project throughout this example. For your own project, compare applicable requirements without creating another project.

Identify the HTML/CSS/JavaScript page, Python Flask request handler and SQLite file storing records.

What should you see after this step?
docs/design.md explains roles, file locations and startup.
What should you do first if you get stuck?
Keep an existing confirmed stack; ask for equivalent three-layer locations instead of rebuilding.
  1. Frontend: the page you see, fill in and click.
  2. Backend: receives requests, checks content and decides whether to save. An API is the entry for those requests.
  3. Database: stores numbered records. SQLite is a real file, not browser cache or another account you must register.

Flask installation · SQLite integration

04Not sure how? Follow each action

OpenClose

  1. Give users, storage needs and budget, then ask for an understandable approach.

    What should you see after this action?
    You understand the role of each part.
    What should you do if that result is missing?
    Ask what unfamiliar tools do before choosing them.

  2. Confirm the approach and record it.

    What should you see after this action?
    Environment setup knows what to install and try first.
    What should you do if that result is missing?
    Change an unworkable approach before building extensively.

05Words in this step

OpenClose

Tech stack ↗

The languages, frameworks, runtimes, and services used together.

The combined equipment and procedures of a kitchen.

POC — Proof of concept ↗

A small experiment testing whether an approach is feasible.

Test one recipe before opening the restaurant.

06How should you handle a problem here?

OpenClose

I do not know local versus shared storage

Where should you look to understand the problem?
Must another phone see the same record?
Follow these steps to resolve the problem
If not, start in one browser. If yes, record sharing needs and ask AI about services, accounts, and costs; a local demo is not sync.
Expected recovery
The plan matches real use, and unknown costs are not assumed free.

Not listed? Ask AI to investigate

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

07Material for this step (fill or copy)

OpenClose

If you completed the individual prompts above, do not resend this full template. Use it to organize this step’s material when needed; replace bracketed fields, confirm and copy into the project chat.

Prompt template for this step

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI
Journal practice: fill or supplement this step

For this full-stack practice only: use this combined prompt, fill its fields and send it once instead of also sending the generic template. It does not authorize later steps.

Full-stack practice: this step

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

08Check this before continuing

Know where records live, whether devices share them, and what costs exist.

09What should you do if the expected result is missing?

OpenClose

Ask what unfamiliar tools do before choosing them.

Compare with an example (illustration, not your result)
If phone file access is essential, verify file selection and permissions on the target device first.
Examples and reference

Enter conditions and bring back a proposal →

Step 2 of 2Next milestone: Plan development and tests →

Words in this milestoneIn order of appearance; open for the full explanation

PrototypeAn early model for discussing or checking a design.MockA controlled dependency substitute used to verify interactions.Tech stackThe languages, frameworks, runtimes, and services used together.POC — Proof of conceptA small experiment testing whether an approach is feasible.
More troubleshooting references

Stuck? Start with what actually happens

2 situations

These paths synthesize official docs and public reports, not frequency data. Check the symptom and verify the result.

Too many technology options

Observed symptom: AI lists ten frameworks without connecting them to the project.

  1. What should you check first?

    List devices, login, persistence, public access, and budget needs.

  2. Then resolve

    Request at most two options compared against requirements, maintenance, and migration cost. Prefer the existing stack and verify a small workflow.

  3. Verify the result

    The decision states reasons and limits and has a minimal working proof.

Send this to AI for help

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

ReferencesLovable · Prompting best practices ↗npm · Install Node.js and npm ↗

An AI subscription does not cover every bill

Observed symptom: The project requests API, database, or hosting payments after subscribing.

  1. What should you check first?

    Inspect the separate billing pages for tool, model/API, hosting, database, and integrations.

  2. Then resolve

    List paid accounts, included usage, and overage behavior. Test minimally before enabling upgrades.

  3. Verify the result

    Every service has a budget or alert; alerts are not described as hard caps.

Send this to AI for help

Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.

Plain text · Add actual material before sending to AI

ReferencesVercel · Spend Management ↗

References for this milestone

Open these when the question arises; they are not extra required actions.

Look up this milestone’s terms →
My project material and backups

Material stays in this browser, not in project files or AI chat. Chinese and English template drafts are separate; project selection and progress are shared. Do not enter passwords or API keys here.

Includes idea, progress, template drafts, personal checks and selection conditions, but not project code. Restore creates a new draft and preserves existing projects.

Download/import unavailable? Restore backup text

Draft and progress stay in this browser.

Complete the actions in order; expand the matching checks and remedies if you get stuck.

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.