UI implementation brief
Write a precise brief for building a UI component with a coding agent: states, behaviour, accessibility, responsive rules and acceptance criteria.
Fill in your details
Values are inserted into every prompt below. Nothing you type leaves your browser.
5 field(s) left — unfilled variables stay as {{placeholders}}.
1Fill the brief and hand it to your agent
Agents produce the happy path by default. Listing states and acceptance criteria up front is what gets you loading, empty, error and keyboard behaviour.
Build the {{component_name}} component. Stack and conventions: {{stack}}. Before writing code, find and read two existing components in this repository and follow their structure, styling approach and naming. Reuse existing design tokens and primitives; don't add new dependencies without asking. Design: {{design_description}} States to implement: {{states}} Behaviour requirements: - Fully keyboard operable, with visible focus and logical tab order. - Semantic HTML first; ARIA only where native elements can't express the role. - Works from 320px wide upward; describe what changes at each breakpoint. - Respects reduced-motion preferences for any animation. - Text comes from props or the existing i18n system, not hard-coded, if the project uses one. Acceptance criteria: {{acceptance_criteria}} Deliver: the component, a story or example usage covering every state, and tests for the behaviour criteria. Then list any decision you made that the design didn't specify.2Review against the brief
Check every state in the browser, tab through it with the keyboard, and test at 320px. Ask the agent to fix gaps one at a time rather than re-generating the component.
Example input
PlanPicker: three plan cards with a monthly/yearly toggle; React + Tailwind + Radix.
Example output
Decisions not in the design: - Used a radio group pattern (Radix RadioGroup) so arrow keys work and selection is announced. - On error, cards show "Prices unavailable" with a Retry button instead of hiding the cards, to avoid layout shift. - Below 640px, cards stack and the recommended plan is listed first.
Troubleshooting
- Agent ignores existing conventions: name the exact files to imitate instead of 'two existing components'.
Known limitations
- Visual fidelity still needs human review against the design.