Vibe GuideBETA
中文EN

While building the interface, identify components and describe the desired behavior to the project AI.

Does this method fit your project, and how can you check?
When would you use this method?
When the user action is known and an interface is needed.
How should you choose for your situation?
Choose by task first: tabs for content switching, buttons for actions, forms for input; compare style afterward. Map entry and return for complex flows.
What is easy to misunderstand?
Do not copy sample labels, counts or business fields. Small content sets may not need pagination/search; essential actions must not rely only on hover, color or icons.
How can you check that this works for your project?
Check layout with real long text and empty data, then test keyboard/touch, focus, errors and return paths.
Return to the action with the result →
Frontend & UI / Lozenge

TAG

Lozenge

Use a lozenge for compact status text such as IN PROGRESS..

Lozenge · Compact status tag

Check the purpose before choosing

When is this component useful?Briefly identify categories, filters or status.

When should you avoid copying it directly?Avoid clickable styling for passive labels; important errors need explanations and next actions.

Names, counts and fields below are examples. Replace them with project content; a demo does not prove production integration.

Observe appearance and hierarchy

How should you try this example?Distinguish categories, counts and status; click removable/filtering variants.

What should you watch for while trying it?Meaning is not color-only and static tags do not imply filtering.

This is a visual reference without a data service. Some preserved sample labels are in Chinese.

Recreation prompt · replace the context

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
Read the preserved source specification

Use a lozenge for compact status text such as IN PROGRESS.

What should you check if the result looks different?

Appearance only → give AI the missing click, keyboard, or state changes. Interaction exists but behaves differently → provide steps, expected behavior, and actual results and request a focused correction. Verify with sample data before integration.

Continue describing the component →

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.