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.
TABS
Tabs with Sliding Indicator
Build a single Tabs with Sliding Indicator component, not a full page.
Tabs with Sliding Indicator · Animated underline tabs
A moving line below the labels: a sliding underline follows the selected tab.
Check the purpose before choosing
When is this component useful?Switch between peer content panels on one page.
When should you avoid copying it directly?Use a step flow for ordered tasks and a slider for values.
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?Switch panels and return; try closing or dragging where shown.
What should you watch for while trying it?Selection matches content and closing preserves a usable entry.
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 Tabs with Sliding Indicator 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.
Selection matches content and closing preserves a usable entry.
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 Tabs with Sliding Indicator component, not a full page. Structure: same as underlined tabs: horizontal labels Overview, Billing, Settings above one content panel; a 2px underline sits under the active label. Interaction: click or Left/Right to change the selected tab and panel. States: default, hover, selected, disabled. Motion: the underline must slide to the new tab in about 180ms; do not jump instantly. Do not use pill tabs, a segmented control, or a range slider. 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 →