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.
SELECT
Select
Build a single Select dropdown.
Select · Dropdown Select
Check the purpose before choosing
When is this component useful?Choose from a known set of values.
When should you avoid copying it directly?For a few choices consider buttons/radios; allow input when values are unknown.
Names, counts and fields below are examples. Replace them with project content; a demo does not prove production integration.
Try it before choosing
How should you try this example?Open options, choose and change; search for a missing value where supported.
What should you watch for while trying it?Selected value is clear and no-match does not select an unrelated value.
Interactive example · no real business action
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
Build one Select only, not a whole page.
Project purpose and audience: [fill in]
Page and component location: [fill in]
What appears before interaction: [fill in]
What should happen after clicking, typing or selecting: [fill in]
Actual text, options and data: [fill in]
Devices and existing style: [fill in]
What must stay unchanged: [fill in or none]
Check fit for the task first. Do not copy sample names, brands, counts or sizes; ask about necessary gaps.
Selected value is clear and no-match does not select an unrelated value.
Implement only the agreed scope and record steps, expected and actual results. Check default, selected, disabled, empty and failure states as applicable, explaining omissions. Demo feedback does not prove production integration.Read the preserved source specification
Build a single Select dropdown. Structure: closed field showing one value (Apple); click opens a list of fruits; cannot type a custom value. Interaction: click option to select and close; Escape closes. States: closed, open, selected, disabled. Do not allow free text (combobox) or multi chips. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
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 →