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.
LOADING
Indeterminate Progress
Use an indeterminate progress animation when percent is unknown..
Indeterminate Progress · Unknown progress
Check the purpose before choosing
When is this component useful?Explain genuine waiting during an operation.
When should you avoid copying it directly?Do not invent percentages; offer cancellation or retry for long waits.
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?Simulate completion and observe the content.
What should you watch for while trying it?Waiting ends with content; progress here is advanced only by example controls.
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 Indeterminate Progress 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.
Waiting ends with content; progress here is advanced only by example controls.
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
Use an indeterminate progress animation when percent is unknown.
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 →