frontend-design-frontend-design

What it is

Frontend Design is a skill that asks Claude to act as the design lead at a studio known for giving every client a distinct visual identity. The framing assumes the client has already rejected cliché or templated proposals. Claude is told to make deliberate, opinionated choices about palette, typography, and layout that are specific to the brief, and to take aesthetic risk where it's justified. Designs should be grounded in the subject matter. If the brief doesn't identify the product or subject, Claude proposes a concrete subject, audience, and primary job, then confirms them with the client. Claude also uses any remembered context about the client as a hint, and builds with the brief's real content throughout. The skill sets out concrete design principles: - Hero: open with the most characteristic thing in the subject's world. - Typefaces: choose them deliberately. Use one or two families, and if two, make them clearly distinct. - Type scale: follow the default guidance of The Elements of Typographic Style. - Line length: default to under 80 characters. - Typographic tells to avoid: single-word accents in headlines, all-caps labels, and unnecessary labels above content. - Structure: treat structural devices like numbering and borders as information rather than decoration. - Motion: use non-user-triggered motion sparingly. One orchestrated moment beats scattered effects. - Copy: consider written content carefully, since copy can make a design feel templated too. The skill lists traits that AI-generated design currently clusters around, for calibration: - warm cream backgrounds with terracotta accents - near-black backgrounds with a single acid accent - broadsheet layouts - the SaaS-card kit - template chrome such as ALL-CAPS eyebrows, middle-dot meta strings, and '→' on buttons The brief's own words always win, including when it asks for one of these looks. Where the brief leaves an axis free, Claude shouldn't spend that freedom on these defaults. The process runs in two passes. First, Claude drafts a compact token system: - Color: a core palette of 4–6 named hex values. - Type: the typefaces and their roles. - Layout: a layout concept using prose and ASCII wireframes, including alignment guidance. - Principles: what makes this page unique. Claude then reviews that plan against the brief, revises anything generic, and explains each change before writing code. The skill also warns about CSS selector specificity conflicts. It stresses restraint: spend boldness in one place, and meet a quality floor of responsive layout, visible keyboard focus, reduced motion, accessibility, and harmonious color. Claude should self-critique, using screenshots where the environment supports them. A final section on writing covers: - writing from the end user's perspective - active-voice CTAs - consistent action names - errors that don't apologize - empty states as invitations to act - a conversational, sentence-case tone

Who it's for

• Developers using Claude Code to build new web UIs or reshape existing ones
• Anyone who wants AI-generated frontends that avoid templated, generic-looking defaults
• Users who want guidance on aesthetic direction, typography, layout, motion, and interface copywriting