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
Help AI change exactly one target
Describe location, current behavior, desired behavior, what stays unchanged, and how to check it. Inspect one change before expanding it.
The current page URL or screenshot and approved style.
1. Identify the target
Name the page, region, and visible text, or mark it on a screenshot. Avoid vague references; there is no need to guess source filenames.
Continue after you see this result: AI identifies the same target before editing; clarify duplicate labels.
2. Specify the change and invariants
For appearance, specify size, color, spacing, and layout. For behavior, describe before/after actions. State whether the change is local or applies to every matching component.
Continue after you see this result: For reused components, AI explains impact before choosing local or shared changes.
3. Retest the action
Open the latest preview and compare the same target. Use the main action and check mobile layout and nearby behavior. Report remaining expected/actual differences instead of requesting broad optimization.
Continue after you see this result: The target is achieved and existing behavior works. Update the task record and save the checked version.
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] Current page and screenshot, docs/ui-style.md if present, and task list.
[Task] [Target] Page URL, region, visible label, and marked screenshot.
[Current] Observed appearance or behavior.
[Desired] Specific change.
[Unchanged] Text, data, navigation, branding, or other invariants.
[Scope] This region only, or list all locations to update.
Locate and restate the target, clarify ambiguity, then make the smallest focused edit.
[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] Before/after explanation, actual preview, and affected locations; verify original actions, mobile layout, and nearby behavior.
[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.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] Current screenshot or page, requirements, and existing style; dictionary names are optional supporting material.
[Task] [Component] Known name, or provide an image and location for AI to identify.
[Location] Page and region.
[Current states] Default, click, or input behavior.
[Desired states] Appearance and response separately.
[Disabled/empty/error] Expected feedback, or explain inapplicability.
[Scope] This occurrence or all reused locations.
Preserve existing data and events; implement only approved changes.
[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] The edited component and affected page list; check pointer, keyboard, mobile, and key states rather than only a screenshot.
[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.
After the edit passes: connect the full flow →Return to this journey step