/design

Create, refine, and implement UI components and pages using the project's design system. This is your main tool for turning wireframes into polished interfaces.

When to use this

• You want to create a new component (button, card, header, etc.)
• You want to build a full page layout
• You want to improve the visual quality of existing UI

Three modes

Component mode

Create or modify individual components:

/design a pricing card with three tiers

Claude builds the component using shadcn/ui primitives and your design system tokens. Components are saved to src/components/.

Page mode

Build full page layouts:

/design the settings page

Claude creates the page with responsive layout, proper metadata, and reuses existing components where possible.

Refine mode

Improve existing UI:

/design refine the header

Claude reads the existing component, analyzes it, suggests improvements for spacing, hierarchy, and contrast, then applies the changes.

Design principles

Claude follows these principles when designing:

• Hierarchy first — size, weight, and color guide the eye
• Generous whitespace — spacing is a feature, not waste
• Consistency — reuse design tokens, never hardcode values
• Responsive — mobile-first at 375px, 768px, 1280px
• Accessible — proper contrast, semantic HTML, ARIA labels

What to do next

Run /ship to deploy your design, or use /figma to sync with Figma.