Frontend Design with Art Direction
Principle
AI-generated interfaces all look alike. Inter/Roboto typography, blue/purple palette, rounded cards, same visual rhythm. To stand out, you must commit to an art direction before writing any code.
Mandatory workflow
1. Check the direction in CLAUDE.md
Read the project's CLAUDE.md to find a Style: directive:
## Design Direction
Style: terminal # or cockpit, vitality, editorial, glass, signal
If found, strictly apply the direction (see rule .claude/rules/design-style.md).
2. If no direction is defined — ASK
Before coding, ask the user:
No art direction is defined in CLAUDE.md. Before coding, choose a direction:
- terminal: monospace, black/neon green, sharp edges (for dev tools, web CLI)
- cockpit: dense, multi-panels, real-time indicators (for dashboards, monitoring)
- vitality: colorful, animated, generously rounded (for B2C apps, gamified)
- editorial: serif, airy, paper/ivory (for blogs, long form)
- glass: glassmorphism, gradients, depth (for premium modern apps)
- signal: minimal, gray/white, dense utilitarian (for productivity tools)
Fonts — what to ban
Forbidden (overused by AI):
- Inter, Roboto, Arial, Space Grotesk
- Helvetica (unless explicit editorial direction)
Prefer depending on the direction:
| Direction |
Recommended fonts |
| terminal |
JetBrains Mono, Fira Code, IBM Plex Mono, Berkeley Mono |
| cockpit |
DM Sans, Geist, IBM Plex Sans + Geist Mono for numbers |
| vitality |
Nunito, Plus Jakarta Sans, Bricolage Grotesque, Instrument Serif |
| editorial |
Playfair Display, Lora, Merriweather, Fraunces + Inter-like sans-serif |
| glass |
Geist, SF Pro, Neue Haas Grotesk |
| signal |
Geist Mono, IBM Plex Mono, system-ui |
IMPORTANT: If no direction is chosen and the user refuses to choose one, use Geist (modern neutral) but NEVER Inter/Roboto.
Colors — banish the generic
Patterns to avoid:
- AI-stereotype blue/purple palette (#6366f1, #8b5cf6, gradients)
- Soft pastels without contrast
- Tailwind-default neutral grays
Prefer:
| Direction |
Typical palette |
| terminal |
#0a0a0a + a single neon accent (#00ff9c, #00d8ff, #ffb000) |
| cockpit |
Layered dark (#0d1117, #161b22) + functional colors (alert red, OK green) |
| vitality |
3-4 distinct vivid colors (e.g., #ff6b35, #004e89, #ffd23f), light background |
| editorial |
Black/white/cream + 1 accent (poppy red, midnight blue, moss green) |
| glass |
Gradient or image background + semi-transparent rgba surfaces |
| signal |
Gray/white only + strictly signaling colors |
Radius — sign the personality
| Direction |
Radius |
| terminal, editorial |
0-4px (sharp) |
| cockpit, signal |
4-6px (subtle) |
| glass |
12-16px (fluid) |
| vitality |
12-16px (generous) |
IMPORTANT: Do NOT use rounded-xl / rounded-2xl by default "because it looks nice". Radius is a signature.
Animations — reject the default
Avoid:
- Linear transitions
transition-all duration-300
- Generic
1.05 scale hover
Prefer:
| Direction |
Animation style |
| terminal |
Caret blink, scanlines, glow pulse (100-150ms, step easing) |
| cockpit |
Instant transitions, pulse on indicators, fade for updates |
| vitality |
Subtle spring/bounce, fluid progress, celebratory feedback |
| editorial |
Fade-in on scroll (300-500ms, ease-out), smooth transitions |
| glass |
Blur transitions, fade with depth, subtle parallax |
| signal |
Almost absent (50-100ms), instant feedback |
Layout — break the AI grid
Patterns to avoid:
- Centered hero + 3 cards in a grid + CTA + footer
- Identical successive full-width sections
- Uniform padding everywhere
Prefer:
- Intentional asymmetry
- Variable density per zone (dense/airy)
- Grids not aligned on uniform columns
- Strategic whitespace (editorial) or maximum density (cockpit, signal)
Checklist before writing code
Expected output
- Confirmation of the chosen direction
- Design tokens: fonts, colors, radius, spacing (CSS custom properties or Tailwind theme)
- Components strictly respecting the direction
- No generic fallback — once the direction is chosen, follow it fully
Rules
IMPORTANT: NEVER code frontend without having confirmed the art direction.
IMPORTANT: NEVER use Inter, Roboto, Arial, Space Grotesk by default.
IMPORTANT: NEVER propose a centered hero + 3-card grid "because it's safe".
YOU MUST read .claude/rules/design-style.md for details per direction.
YOU MUST explain to the user the WHY of the design choices (artistic commitment > neutrality).
See also
Anthropic ships a frontend-design plugin in their official Claude Code repository: anthropics/claude-code/plugins/frontend-design (also installable from the marketplace at claude.com/plugins/frontend-design; 277K+ installs as of March 2026). It covers similar territory: bold design choices, typography, animations, and avoiding the "Inter font + purple gradient" generic aesthetic.
Users of claude.com/code likely already have this plugin installed by default. This skill captures the art-direction taxonomy (terminal, cockpit, vitality, editorial, glass, signal) the foundation imposes via .claude/rules/design-style.md plus the workflow integration (project's CLAUDE.md Style: declaration) — these are claude-base specific. The Anthropic plugin and this skill are complementary rather than duplicates.
Install command and full list of validated vendor skills: docs/recipes/recommended-vendor-skills.md. Audit pilot trace: specs/marketplace-audit/dev-skills-pilot-2026-05-05.md.
1---2name: dev-frontend-design3description: Distinctive UI design with strong art direction. Trigger when the user wants to create an interface, a landing page, a visual component, or when frontend code creation is detected without a defined design direction.4---56# Frontend Design with Art Direction78## Principle910AI-generated interfaces all look alike. Inter/Roboto typography, blue/purple palette, rounded cards, same visual rhythm. To stand out, you must **commit to an art direction before writing any code**.1112## Mandatory workflow1314### 1. Check the direction in CLAUDE.md1516Read the project's CLAUDE.md to find a `Style:` directive:1718```markdown19## Design Direction20Style: terminal # or cockpit, vitality, editorial, glass, signal21```2223If found, strictly apply the direction (see rule `.claude/rules/design-style.md`).2425### 2. If no direction is defined — ASK2627Before coding, ask the user:2829> No art direction is defined in CLAUDE.md. Before coding, choose a direction:30>31> - **terminal**: monospace, black/neon green, sharp edges (for dev tools, web CLI)32> - **cockpit**: dense, multi-panels, real-time indicators (for dashboards, monitoring)33> - **vitality**: colorful, animated, generously rounded (for B2C apps, gamified)34> - **editorial**: serif, airy, paper/ivory (for blogs, long form)35> - **glass**: glassmorphism, gradients, depth (for premium modern apps)36> - **signal**: minimal, gray/white, dense utilitarian (for productivity tools)3738## Fonts — what to ban3940**Forbidden** (overused by AI):41- Inter, Roboto, Arial, Space Grotesk42- Helvetica (unless explicit editorial direction)4344**Prefer** depending on the direction:4546| Direction | Recommended fonts |47|-----------|-------------------|48| terminal | JetBrains Mono, Fira Code, IBM Plex Mono, Berkeley Mono |49| cockpit | DM Sans, Geist, IBM Plex Sans + Geist Mono for numbers |50| vitality | Nunito, Plus Jakarta Sans, Bricolage Grotesque, Instrument Serif |51| editorial | Playfair Display, Lora, Merriweather, Fraunces + Inter-like sans-serif |52| glass | Geist, SF Pro, Neue Haas Grotesk |53| signal | Geist Mono, IBM Plex Mono, system-ui |5455IMPORTANT: If no direction is chosen and the user refuses to choose one, use **Geist** (modern neutral) but NEVER Inter/Roboto.5657## Colors — banish the generic5859**Patterns to avoid**:60- AI-stereotype blue/purple palette (#6366f1, #8b5cf6, gradients)61- Soft pastels without contrast62- Tailwind-default neutral grays6364**Prefer**:6566| Direction | Typical palette |67|-----------|-------------|68| terminal | `#0a0a0a` + a single neon accent (`#00ff9c`, `#00d8ff`, `#ffb000`) |69| cockpit | Layered dark (`#0d1117`, `#161b22`) + functional colors (alert red, OK green) |70| vitality | 3-4 distinct vivid colors (e.g., `#ff6b35`, `#004e89`, `#ffd23f`), light background |71| editorial | Black/white/cream + 1 accent (poppy red, midnight blue, moss green) |72| glass | Gradient or image background + semi-transparent `rgba` surfaces |73| signal | Gray/white only + strictly signaling colors |7475## Radius — sign the personality7677| Direction | Radius |78|-----------|--------|79| terminal, editorial | 0-4px (sharp) |80| cockpit, signal | 4-6px (subtle) |81| glass | 12-16px (fluid) |82| vitality | 12-16px (generous) |8384IMPORTANT: Do NOT use `rounded-xl` / `rounded-2xl` by default "because it looks nice". Radius is a signature.8586## Animations — reject the default8788**Avoid**:89- Linear transitions `transition-all duration-300`90- Generic `1.05` scale hover9192**Prefer**:9394| Direction | Animation style |95|-----------|----------------|96| terminal | Caret blink, scanlines, glow pulse (100-150ms, step easing) |97| cockpit | Instant transitions, pulse on indicators, fade for updates |98| vitality | Subtle spring/bounce, fluid progress, celebratory feedback |99| editorial | Fade-in on scroll (300-500ms, ease-out), smooth transitions |100| glass | Blur transitions, fade with depth, subtle parallax |101| signal | Almost absent (50-100ms), instant feedback |102103## Layout — break the AI grid104105**Patterns to avoid**:106- Centered hero + 3 cards in a grid + CTA + footer107- Identical successive full-width sections108- Uniform padding everywhere109110**Prefer**:111- Intentional asymmetry112- Variable density per zone (dense/airy)113- Grids not aligned on uniform columns114- Strategic whitespace (editorial) or maximum density (cockpit, signal)115116## Checklist before writing code117118- [ ] Art direction identified and validated with the user119- [ ] Fonts chosen (not Inter/Roboto/Arial by default)120- [ ] Palette defined (not AI-stereotype blue/purple)121- [ ] Radius consistent with the direction122- [ ] Animations consistent with the direction123- [ ] Non-stereotype layout (not auto hero/grid/CTA)124125## Expected output1261271. **Confirmation** of the chosen direction1282. **Design tokens**: fonts, colors, radius, spacing (CSS custom properties or Tailwind theme)1293. **Components** strictly respecting the direction1304. **No generic fallback** — once the direction is chosen, follow it fully131132## Rules133134IMPORTANT: NEVER code frontend without having confirmed the art direction.135136IMPORTANT: NEVER use Inter, Roboto, Arial, Space Grotesk by default.137138IMPORTANT: NEVER propose a centered hero + 3-card grid "because it's safe".139140YOU MUST read `.claude/rules/design-style.md` for details per direction.141142YOU MUST explain to the user the WHY of the design choices (artistic commitment > neutrality).143144## See also145146Anthropic ships a `frontend-design` plugin in their official Claude Code repository: [`anthropics/claude-code/plugins/frontend-design`](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) (also installable from the marketplace at [claude.com/plugins/frontend-design](https://claude.com/plugins/frontend-design); 277K+ installs as of March 2026). It covers similar territory: bold design choices, typography, animations, and avoiding the "Inter font + purple gradient" generic aesthetic.147148Users of `claude.com/code` likely already have this plugin installed by default. This skill captures the **art-direction taxonomy** (terminal, cockpit, vitality, editorial, glass, signal) the foundation imposes via `.claude/rules/design-style.md` plus the workflow integration (project's CLAUDE.md `Style:` declaration) — these are claude-base specific. The Anthropic plugin and this skill are complementary rather than duplicates.149150Install command and full list of validated vendor skills: `docs/recipes/recommended-vendor-skills.md`. Audit pilot trace: `specs/marketplace-audit/dev-skills-pilot-2026-05-05.md`.
christopherlouet