Every UI state mocked up with /design

Create static UI mockups for [page or feature]. First, read [requirements files and relevant pages] in the current project, and follow its existing design system and components. Then browse the reference repository below, choose a suitable DESIGN.md, and read it in full. Use it to inform layout, typography, and visual styling that the project hasn’t already defined.

Use my project’s content and functionality, and make the primary actions and feedback clear. Alongside the default view, use separate artboards for any loading, empty, error, and success states relevant to this feature. Show me the design first. Don’t modify the application code yet.

Claude Design already has a strong eye for design. Now that it’s built into Claude Code, I think this is going to be huge for frontend work. You can discuss a feature, have Claude Design create the UI mockups, and refine them all in the same development conversation.

One tip that works really well in Claude Design: attach a design reference repo as context when you write your prompt. With the same prompt and model, the difference with and without a reference is noticeable. I used voltagent/awesome-design-md, which had 116.2k stars when I posted. You don’t have to use this one; other suitable design references work too. It’s especially worth trying if you’re a solo builder or on a small team.

Once you have access to /design in Claude Code, run the command and give it your requirements, this prompt, and the reference link: https://github.com/VoltAgent/awesome-design-md