Testing Anthropic's /design Command for UI Generation

Anthropic's new `/design` command in Claude Code generates usable UI mockups from a text prompt, which is a neat party trick. The problem is the code it produces. Expecting clean, production-ready components is a mistake; what you get is a starting point that often requires more refactoring than it's worth.

What is the /design command?

Anthropic added a new research-preview command to its Claude Code model. The feature lets you type a prompt like `/design a settings page with toggles` and get back several visual UI options. You then pick one, and Claude is supposed to generate the code for it. The goal is to collapse the distance between a design idea and its implementation.

Does it actually work?

For visual idea generation, yes. I ran a prompt for a user profile card and received three distinct visual mockups within seconds. One was a standard avatar-and-bio layout, while another was a more modern, two-column design. They aren't true artboards like you'd find in Figma; they are static visual representations of rendered HTML.

What broke?

The trouble starts when you ask for the code. The "editable" part of the promise isn't about editing a vector design file; it's about getting the underlying HTML and CSS. The generated markup is passable, but the styling is where it falls apart. The CSS I received was a tangled mess of inline styles and arbitrary, non-semantic class names that resembled a utility-first framework without actually being one. Integrating this into an existing React project was painful. I spent more time stripping out styles and rewriting the CSS to use our existing design system than it would have taken to build the component from scratch.

Should you use it?

My verdict is split. For quick, disposable visual brainstorming, the `/design` command is useful. It’s faster than firing up a design tool to see how an idea might look. For generating code to ship to production? Absolutely not. The code quality is low and creates immediate technical debt. Treat Anthropic's new tool as a concepting aid, not a software engineer.

FAQ

Can you edit the generated UI artboards? No, not in the way you would edit a Figma or Sketch file. The artboards are static images. You select one, and Claude generates HTML and CSS code meant to replicate the design, which you can then edit.

Is the generated code production-ready? In my tests, the code was not production-ready. It often used messy CSS, inline styles, and non-semantic class names that required significant refactoring to integrate into a real-world application with an existing codebase or design system.

Can you specify a framework like Tailwind CSS or React? While you can include framework names in your prompt, the model's adherence is inconsistent. It might generate component-like JSX, but the styling often ignores framework conventions, producing CSS that fights with tools like Tailwind or styled-components.