Docs · Create
Create from a prompt
Turn product intent into a working React component that gives you something concrete to refine.
5 min read
Outcome and prerequisites
The outcome is a live first pass that does a clear product job. It does not need to be finished; it needs to be specific enough that you can see what works and name what feels off.
- Know who uses the component and what they need to accomplish.
- Bring realistic labels, values, and examples when the content shapes the hierarchy.
- Identify the primary action and any state that changes what the user sees.
- Name only the visual constraints that materially affect the result.
Build the prompt around intent
- 01
State the job
Explain what the component helps someone do and where it appears in the product.
- 02
Set the hierarchy
Name the content that matters most, what supports it, and the primary action.
- 03
Describe behavior
Explain the interaction and the default, loading, empty, selected, or error states that matter.
- 04
Add useful constraints
Specify density, width, responsive behavior, or visual tone when each changes the product outcome.
- 05
Generate and inspect
Review the live result for structure, meaning, and behavior before asking for polish.
Expected result
You should have a working first pass with enough real structure to refine. Continue with Refine a component and compare variants once you can point to the part that needs to move closer to your intent.