Problem
When you ask Claude Code to build frontend UI, the default output tends to look generic -- purple gradients, rounded cards, and the unmistakable "AI-generated" aesthetic. Without design guidance in context, the agent falls back to safe, bland defaults that all look the same. Every generated app ends up with the same purple hero section and shadcn-like card layout.
Solution
Install the official Anthropic frontend-design plugin:
# From your project root
claude plugins add https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design
This plugin injects design expertise into Claude Code's context, producing significantly better UI output without any additional prompting.
Alternative: Create a custom design system skill
If you want project-specific design language, create a custom skill with your design tokens:
<!-- .claude/commands/design-system.md -->
When building UI components, follow this design system:
### Colors
- Primary: #2563EB (blue-600)
- Secondary: #64748B (slate-500)
- Background: #FAFAFA (neutral-50)
- Surface: #FFFFFF
- Error: #DC2626 (red-600)
- Success: #16A34A (green-600)
### Typography
- Font family: Inter, system-ui, sans-serif
- Headings: font-weight 600, tracking -0.025em
- Body: font-weight 400, line-height 1.6
### Spacing
- Base unit: 4px
- Component padding: 16px (4 units)
- Section gaps: 32px (8 units)
- Page margins: 24px mobile, 48px desktop
### Components
- Border radius: 8px for cards, 6px for inputs, 4px for buttons
- Shadows: 0 1px 3px rgba(0,0,0,0.1) for cards
- Transitions: 150ms ease for interactive elements
Use Tailwind CSS classes. Prefer subtle, professional aesthetics over flashy gradients.
Workflow for iterating on designs:
# 1. Generate mockup options using Claude on the web
# Paste your design system prompt + describe the page
# Ask for 3 layout variations
# 2. Pick the best layout and save as a reference
# Screenshot or copy the HTML to .claude/templates/
# 3. Use the template as a starting point in Claude Code
claude "Build the dashboard page using the layout in .claude/templates/dashboard.html as reference. Follow /project:design-system tokens."
Why It Works
The frontend-design plugin provides design heuristics and constraints that prevent Claude Code from falling back to generic defaults. Instead of generating "whatever looks reasonable," the agent follows specific guidance on color, typography, spacing, and component patterns. The custom design system skill approach works the same way but gives you full control over the aesthetic. Both methods work by narrowing the design decision space -- the agent produces better output when it has constraints to work within rather than unlimited freedom.
Context
- The official plugin is maintained at
https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design - Plugins persist across sessions, so you only need to install once per project
- The custom design system approach pairs well with Tailwind CSS, which maps design tokens to utility classes
- For large projects, consider generating a full Storybook or component library first, then referencing it in prompts
- You can iterate faster by using Claude on the web (claude.ai) to generate mockup variations, then bringing the best one into Claude Code as a template
- This config works alongside any framework -- React, Vue, Svelte, or plain HTML