Vibe GuideBETA
中文EN

Understand the capabilities this project type needs and take relevant features back to the project brief.

Project typesWebsites & web apps
WEB DEVELOPMENT

The idea, one link away.

No installation needed. People open a link on their phone or computer and use the product. A practical starting point for the first project.

Use through a link
the-idea.site
A personal portfolio
Start here →
INTERFACE EXAMPLE

Check suitability before building

01Which projects fit this form?

Portfolios, reference sites, forms, calculators, bookings and team tools whose main work fits a browser and benefits from link sharing.

02What should be ready before you start building?

Builders validating an idea for phone and desktop users without installation friction, willing to check screen sizes and maintain needed hosting/data services. Beginners can start with one small flow.

03Which projects should consider a different form?

Projects requiring system control, sustained background work or extensive local-file operations beyond the target browser’s capabilities. Offline use, a camera or a home-screen icon alone does not rule out a PWA; test the actual browsers.

04Which missing prerequisites should you resolve first?

Builders who require system features but will not check browser limits, or expect shared data without arranging data services, access rules and upkeep.

Still unsure? Try a small validation

Open a preview on target phone and desktop devices and complete the key action. If an essential capability fails, test an alternative before changing product type.

For essential desktop file-batch work, compare a desktop app.

Compare an alternative →

MDN · Web / PWA 能力 ↗

This reference helps choose project form; its sections are not a second required route. Return to “Prepare the brief” on the main route to update the brief; technology selection is still “Agree on design and technology”.

Start with a small first version

01 / START
FOR EXAMPLE · AN ILLUSTRATION

A personal portfolio

Introduce the author, share three projects, and give visitors a contact option. Start with that.

Three things to prepare

  • One problem worth solving
  • A computer with an AI tool
  • The first set of words and images

The route from idea to product

02 / BUILD

Finish one small step, check it through actual use, then move on. Open each step to see the expected result.

01Describe the purpose

Tell AI who it is for and what they should be able to do.

Afterwards, you should see: One clear sentence about the goal.
02Keep the first version small

Separate current essentials from what can wait.

Afterwards, you should see: A short, focused list of features.
03Choose how to build

Share the budget, devices, and storage needs. Ask AI to explain its choice.

Afterwards, you should see: A plan with clearly explained tools and limits.
04Map out the pages

Decide where the title, content, and main actions belong.

Afterwards, you should see: A clear page outline.
05Make one flow work

Start with “open the site → view a project → contact the author.”

Afterwards, you should see: A small, usable version.
06Add content and try it out

Add the real content, then try it on a phone and a computer.

Afterwards, you should see: A list of issues and completed changes.
07Share it and look after it

Check the published link and keep track of costs and updates.

Afterwards, you should see: A usable website with a simple upkeep plan.

Ask AI to check project fit

03 / PROMPT

Assess the form, without building

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

After choosing: update the brief and follow the guided route →

What to check when stuck

A button looks clickable but does nothing

Does clicking show loading, success, or an error? Record the page and steps.

  • An error appears → give AI its exact text and time; reproduce it before fixing.
  • No feedback → ask AI to inspect whether a real action is connected. A success message must not replace persistence.
Content is cramped on a phone

Does a narrow page scroll sideways or hide buttons?

  • Provide viewport width and a screenshot; request a layout-only fix, then recheck long headings and inputs.
  • No overflow but hard to use → try finger input and record spacing or readability issues.

Record the version, device, test data, steps, expected outcome, actual result, and failures. Keep AI execution records separate from personal trial results.

Open the hands-on acceptance and release template →

A few useful terms

04 / UNDERSTAND
Domain
The memorable name in the website’s address.
Responsive design
A layout that adapts to phones and computers.
Minimum viable product · MVP
A first version that does the one thing that matters most.

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.