Build with AI
How to make Claude build better-looking interfaces
Give Claude a specific user task, references with clear roles and a review checklist. Includes a practical redesign prompt and Taste setup links.
Replace vague style requests with decisions
To improve Claude’s UI output, describe the user’s task, show relevant references and specify what each reference should contribute. Then ask for a small change to an existing screen and inspect the rendered result. ‘Make it beautiful’ leaves hierarchy, content density and interaction behavior unresolved.
Consider a hypothetical invoice page. The user needs to find overdue invoices and send a reminder. A useful brief puts amount, due date and status where they can be compared. It keeps the reminder action beside the relevant invoice. Those decisions matter before choosing a decorative style.
Prepare a collection Claude can actually use
Save a few references in Taste. Give each one a job: one for row density, one for an empty state, one for a clear action hierarchy. Add notes about details you do not want carried over. A dark reference does not mean the app should switch to dark mode.
Connect Taste through the Claude setup guide and verify that Claude can retrieve a known collection. Ask it to inspect the images and notes before proposing changes. If image access fails, resolve that instead of accepting a description inferred from filenames.
A prompt for the first revision
Replace the collection name and task with your own. Keep the scope small enough that you can explain whether the revision helped.
Review the invoice list in this project. The user needs to find overdue invoices and send a reminder. Retrieve my Taste collection named Billing direction and inspect its images and notes. Explain which reference informs hierarchy, density and the empty state. Preserve our existing components, colors and routes. Propose the smallest useful change, then implement it. Include loading, empty, error and long-content states. Tell me if you cannot access a reference.
Review the task before the styling
Use real-looking long names and several invoice statuses. Check whether you can identify the overdue items without studying every row. Try the page on a narrow screen and with a keyboard. The reminder action should remain understandable without depending on color alone.
Give Claude feedback tied to an observation: ‘The amount and due date are too far apart to compare’ is more actionable than ‘It feels off.’ Change one important decision per revision so you can tell what improved.
- Open the rendered page at desktop and mobile widths.
- Check reading order, keyboard focus and labels.
- Exercise empty, loading and failed-request states.
- Compare the result with the original user task and the notes on each reference.