Frontend Design Direction

What it does

This official Anthropic skill reframes Claude as the design lead at a small studio whose clients have already rejected templated proposals.

• Plan before code: a compact token system — 4–6 named hex colors, 2+ typeface roles (characterful display, complementary body, utility face), a layout concept with ASCII wireframes, and one signature element the page will be remembered by.
• Anti-cliché calibration: it explicitly names the three looks AI design keeps defaulting to (cream + serif + terracotta; near-black + acid accent; broadsheet hairline columns) and refuses to spend free design axes on them.
• Self-critique loop: the plan is reviewed against the brief, generic parts are revised with a stated rationale, and only then is code written from the revised plan.
• Quality floor: mobile responsiveness, visible keyboard focus, reduced-motion support, plus a warning about CSS specificity collisions between section and element selectors.
• UX writing guidance: active voice, user-facing vocabulary, consistent action naming across button and toast, errors that explain the fix, empty states as invitations.

Who it's for

• Developers shipping product UI without a designer on the team
• Freelancers who need distinctive concept directions fast
• Solo founders building landing pages, portfolios, and marketing sites
• Teams standardizing microcopy across buttons, errors, and empty states

Examples

1. Specialty coffee roaster landing page: from a one-line brief, it proposes a palette, type pairing, and a hero drawn from the subject's own world (say, the roast curve as an interactive) before writing a single line of CSS.
2. SaaS dashboard refresh: instead of the big-number-plus-gradient template answer, it rebuilds the type scale and structural hierarchy around what the data actually means.
3. Interface copy pass: rewrites "Submit" to "Save changes", keeps "Publish" → "Published" consistent through the flow, and turns vague errors into actionable ones.

Install the skill I found on Claude Skill Mart.
Copy the skills/frontend-design folder from the GitHub repo anthropics/skills into my ~/.claude/skills/frontend-design/.
When it's done, tell me in one line what this skill can do.