Vibe GuideWhile 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.
PRACTICAL GUIDE
Describe the intended interface style
Start with how the product is used, then describe visible choices: density, colors, text hierarchy, spacing, borders, and motion. AI turns them into a page; design vocabulary is not a prerequisite.
Requirements and the current page. References are optional, not a prerequisite.
1. Describe the product first
Explain whether people read, fill forms, compare, or perform repeated actions, and identify the main content and action. Style should serve the task.
Continue after you see this result: AI can identify what should be seen first, rather than only adjectives.
2. Describe visible preferences
Describe light/dark mode, compact/spacious density, main colors, corner shape, shadows, and motion. If unsure, request two small samples and choose one before expansion.
Continue after you see this result: Compare one representative page, confirm readability and hierarchy, then apply it elsewhere.
3. Explain what a reference contributes
Number screenshots and identify the layout, color, type, or control to borrow. State exclusions so sample people, text, and business logic are not copied unintentionally.
Continue after you see this result: AI describes visible structure and lists unknown interactions instead of treating unseen behavior as fact.
Copy the material and add actual project details
Edit the template with actual material, confirm, then copy into the current project conversation. Mark unknowns as undecided and replace examples as needed.
Confirmed · personalized content ready to copy
[Background] [fill in product purpose and audience]
[Problem] [fill in current difficulty or desired change]
[Inputs] Requirements, current page, brand colors, and optional screenshots.
[Task] Prepare a style brief before changing all pages.
[Purpose and main action] Actual task.
[Overall feel] Translate preferences into visible choices.
[Colors] Main color, background, retained branding, or ask for two samples.
[Density and spacing] Compact/spacious and priority content.
[Text hierarchy] Headings, body, and supporting text.
[Borders, corners, shadows, motion] Specify each, or request advice.
[References] Attach images and identify what to borrow.
Build one representative page, then save the approved rules in docs/ui-style.md before expanding.
[Limits] Preserve approved scope and existing work; avoid unrelated changes.
Work in this order:
1. Read the material and restate the goal. Ask one essential question when missing information affects the result.
2. Perform reading, organization, edits, and checks that AI can handle. For personal actions, identify the page and control.
3. Preserve a recoverable version and unapproved existing changes before editing.
4. Provide actual artifacts, file locations, and the current preview; a plan is not executed work.
[Deliverables] A style brief and one operable page. Check phone/desktop, long headings, empty/loading/error states, and retained functionality.
[Acceptance] Check the goal item by item and report actual checks, unverified work, and next steps. Await explicit confirmation before deletion, payment, expanded access, or public release.Continue after the checks pass. If a step fails, bring the exact error back to the current AI conversation.
Next: change one area or component →Return to this journey step