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.
BUTTON
Link Button
Build a single Link Button that feels like navigation.
Link Button · Button as link
Check the purpose before choosing
When is this component useful?Perform an action such as submit, save or retry.
When should you avoid copying it directly?Use a link for navigation; avoid buttons with no action.
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?Activate once and observe feedback; toggle again or choose a menu action.
What should you watch for while trying it?Distinguish action, state and disabled controls; demo feedback is not a real operation.
Local exercise · restarting clears sample state without changing project data. Some preserved sample labels are in Chinese.
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 Link Button 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.
Distinguish action, state and disabled controls; demo feedback is not a real operation.
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 Link Button that feels like navigation. Structure: label Open docs. Visual: accent or info colored text with an underline affordance (always or on hover, but clearly a link). Interaction: click; focus-visible. States: default, hover, visited optional, disabled. Do not use a bordered button shape, and do not use it as the page primary save action. 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 →