Claude UI component prompts

Scope the change to one file

Name the file path and say that no other component changes. Name the props and say "nothing else". Models like to be helpful with options: a size prop, a variant prop, a theme prop. Each one is code you will have to read and none of them were needed.

List the states, including the dull ones

Idle, hover, keyboard focus, pressed, busy, done, error, disabled. A component prompt that describes only the idle state gets only the idle state designed; the others arrive as browser defaults. For each state give what changes and by how much: a border colour, a 6px shift, a 0.18s duration.

Say how it works from the keyboard and what a screen reader hears. Claude does this well when asked and unevenly when not.

Ask for a page that shows everything

You cannot review a component by reading it. Ask for a demo route that renders every state at once, with slow fake data where a state depends on time. It gives you one screen to look at, and it gives Claude Code something to run and check. For a component with no project around it, the chat app is enough: see Claude artifact prompts.

What a Claude component prompt should contain

• The file path and the line "change no other component".
• An order to read the tokens first and ask about missing values.
• The props, all of them, and no others.
• Size and shape: width, height, radius, border, in px.
• Every state, with what changes in each.
• A demo page with all states, and keyboard behaviour to test on it.

A prompt to start from

Add one component to this project: an upload dropzone, <Dropzone />. Before writing it, read CLAUDE.md and src/tokens.css and use the tokens you find; if a value you need is missing, ask me instead of inventing one. Change no other component.

Stack: the project's own (Vite + React + TypeScript, plain CSS). One file, src/components/Dropzone.tsx, with Dropzone.css beside it. No new dependencies.

Props: accept (string), maxSizeMb (number), onFiles(files). Nothing else.

Size and shape: 100% wide, 220px tall, radius 20px, a 1.5px dashed border in #b9b4a7 on a ground of #f6f3ec. In the centre: a 40px arrow drawn in SVG, the line "Drop a file or browse" at 16px in #1d1c19, and under it the size limit at 13px in #7a766b.

States:
1. Idle: as above.
2. Hover and keyboard focus: solid border in #1d1c19; a 3px focus ring in #2b6cff, offset 2px.
3. Drag over: ground #e9f0ff; the arrow lifts 6px in 0.18s.
4. Uploading: the border becomes a progress stroke running clockwise around the box; file name and percent in the centre.
5. Done: a tick draws in 0.4s, then the file name and a "Remove" text button.
6. Error: border #c2331f and one sentence saying what was wrong: too big, or the wrong type.

Keyboard: Enter and Space open the file picker. Announce state changes with aria-live.

Phones: 160px tall, the line reads "Choose a file", no drag state. With prefers-reduced-motion, no arrow lift and the tick appears without drawing.

Add a demo page at /dev/dropzone showing all six states side by side, with a fake upload that takes 2 seconds. Run it, tab through the page, and report which states you saw working.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• Design rules in CLAUDE.mdHow to keep design rules in a CLAUDE.md file so every Claude Code session follows them, with an example rules block to copy.
• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.

• Whole sites
• Landing pages
• Artifacts
• Redesigns
• Dashboards
• Animation