Designer Skill

A cross-cutting skill on staff-software-engineer, applied when the work builds something new with a UI: an app, page, feature, or landing. It layers on the web or mobile area skill. {repo}/.claude/conventions/web.md wins over it, and a repo that already has a design system keeps that system.

Skill file: skills/designer/SKILL.md. /sse:plan and /sse:dev read it for new UI work. When applicability is unclear, /sse:dev marks NOT FOUND - NEEDS REVIEW: designer-skill applicability and proceeds without it.

Why

AI-built UIs converge on one look: centered everything, default blue, emoji icons, lorem ipsum, one theme, English only. The skill is a feedforward guide that raises the bar before the first component.

Material Design 3

M3 is mandatory and used as a token system. Color comes from M3 roles (primary, on-primary, *-container, surface, surface-container, on-surface-variant, outline, error) derived from one seed picked from the product context. Component CSS never holds raw hex.

Type follows display, headline, title, body, label, each in L, M, S, mapped to classes once. Shape is none 0, xs 4, s 8, m 12, l 16, xl 28, full; cards use l, buttons full or m, sheets xl. Elevation has 6 levels of surface-container tints plus a subtle shadow. State layers are hover 8%, focus 10%, pressed 10% of the on-* color. Motion uses emphasized easing cubic-bezier(.2,0,0,1), 200 to 300ms standard, 100ms small.

Inputs are M3 text fields, 56px tall with a floating label. Page headers have an eyebrow, a display title, and a subtitle.

Dark and light

Both themes ship. System preference comes first, then a user toggle that writes data-theme and localStorage. Dark uses a tinted #1A1C1E surface, never pure black.

:root { color-scheme: light dark; }
:root[data-theme="light"] { --surface:#FDFCFF; --on-surface:#1A1C1E; --primary:#0B57D0; }
:root[data-theme="dark"]  { --surface:#1A1C1E; --on-surface:#E3E2E6; --primary:#A8C7FA; }

Type

The UI loads a real variable face, and the system stack is never the final look. Body picks one of Geist, Instrument Sans, General Sans, Manrope, Inter Tight; Inter is a fallback. Display picks one of Bricolage Grotesque, Clash Display, Sora, Fraunces, Space Grotesk at weight 600 to 800. Data uses font-variant-numeric: tabular-nums.

Fonts load with font-display: swap, embedded as a base64 woff2 data URI when the surface runs offline or under a strict CSP.

Color, depth, motion

The palette is vivid: a saturated seed, a second accent, and gradients on the hero, primary buttons, and focal numbers.

Surfaces get layered, tinted shadows and accent glow. Views animate entrance, interaction, value changes, and show and hide in both directions, never a display:none snap. Motion sits under prefers-reduced-motion and animates transform and opacity only.

Callouts and help text use a tonal container (secondary-container or surface-container-high) with a real radius and an info icon. A colored left-border accent bar is forbidden.

Behance-grade polish

The agent searches current Behance and Dribbble work in the product's domain and states what it took. Layouts use an 8pt grid, one focal point per view, realistic copy, and designed empty, loading, and error states. A sum of parts gets a CSS or SVG visual (stacked bar, donut, sparkline) instead of a list of numbers.

Icons

Emojis are banned everywhere. The brand mark and primary actions are original SVGs on a 24px grid with 2px stroke; the rest comes from one set (Material Symbols, Lucide, Phosphor), never mixed. Icons use currentColor and carry aria-label or <title>.

Copy and i18n

User-facing text has no em or en dashes in any locale. Every string goes through t('key') with semantic keys like cart.empty.title. locales/{en,pt-BR,es}.json share one key set; the app detects navigator.language, falls back to en, persists the user's choice, sets <html lang>, and formats with Intl.

Favicon

The favicon is an SVG mark from the product context (a monogram, a cart for commerce) in the brand seed, legible at 16px. The set is favicon.svg, favicon.ico 32, apple-touch-icon.png 180, and site.webmanifest with 192 and 512 maskable PNGs. The agent states the symbol and seed it chose and why.

Accessibility

Contrast is at least 4.5:1 for body text and 3:1 for large text and UI (WCAG 2.2 AA) in both themes. Every interactive element has a :focus-visible ring and a 44x44px hit target, and is keyboard reachable.

What ships

A new UI ships light and dark tokens, a theme toggle, a loaded font, the three locale files with a language switch, original icons, the favicon set, depth and motion, and designed empty, loading, and error states.

References

Material Design 3, m3.material.io. WCAG 2.2. Inter, rsms.me/inter, and Roboto Flex on Google Fonts. ECMAScript Intl. MDN on the Web App Manifest and favicons.

This page mirrors Designer Skill in the wiki. Edit it there.