Design
Complete visual redesign of your product. The system asks deep questions before touching a single pixel.
/design
Type /design in Claude Code and the system starts a creative brief process. It does not jump straight to changing colors. It asks you what you are going for.
What mood should the product convey? Who are your users and what do they expect? Are there products you admire visually? Do you want something minimal, bold, playful, corporate? It digs into your intent before it makes any decisions.
What happens
Once it understands your direction, the designer agent rewrites your design tokens — colors, typography, spacing, radius, shadows. It updates the semantic token system that flows through every component. Then it walks through your pages and adjusts layouts, card styles, and visual hierarchy to match the new direction.
The changes are scoped to the visual layer. Your business logic, data fetching, and API routes stay untouched. The designer agent knows the boundary between how things look and how things work.
What you get back
- Updated design tokens (oklch color system, Tailwind v4 semantic tokens)
- Adjusted component styles across all pages
- Mobile responsiveness verified at three breakpoints (375, 768, 1280)
- Dark mode consistency check
- Before/after screenshots so you can see what changed
Example
/design
I want the product to feel premium and minimal. Think Linear or Vercel's
dashboard — lots of whitespace, subtle borders, muted colors with one
strong accent. The current design feels too busy. I want people to open it
and immediately feel like it is a serious tool.