Dev Frontend Design

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

• [ ] Art direction identified and validated with the user
• [ ] Fonts chosen (not Inter/Roboto/Arial by default)
• [ ] Palette defined (not AI-stereotype blue/purple)
• [ ] Radius consistent with the direction
• [ ] Animations consistent with the direction
• [ ] Non-stereotype layout (not auto hero/grid/CTA)

Expected output

1. Confirmation of the chosen direction
2. Design tokens: fonts, colors, radius, spacing (CSS custom properties or Tailwind theme)
3. Components strictly respecting the direction
4. 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: christopherlouet
• Source: christopherlouet/claude-base
• License: MIT
• Homepage: https://christopherlouet.github.io/claude-base/

Install and usage instructions live in the source repository linked above.