What it is
frontend-design is a skill (a SKILL.md file) that instructs the model to act as a design lead delivering a distinct visual identity rather than templated output. It asks for a design plan (color, type, layout, principles) that is reviewed against the brief before any code is written. It also lists common AI-generated design defaults to avoid and includes guidance on typography, motion, restraint, and UI writing.
Who it's for
- Developers using an AI assistant to build new UI or reshape an existing one
- Teams who want output that avoids cliché, templated or generic AI-looking design
- Anyone who wants guidance on typography, aesthetic direction, and interface copy
Examples
Two-pass design plan
PromptBrainstorm a short design plan: Color (4–6 named hex values), Type (typefaces and roles), Layout (one-sentence concept plus ASCII wireframes, with alignment guidance), Principles. Then review the plan against the brief and revise any generic parts before writing code.Expected output: Adapted from the skill's process section: plan with a compact token system, critique it against the brief, then build.
Ground the design in the subject
PromptIf the brief does not identify the product, propose one concrete subject, the design's audience, and its primary job, and confirm with the client before designing.Expected output: The skill says distinctive choices come from the subject's industry, materials, and vernacular, so the subject must be identified first.
Typography rules to follow
PromptUse one or two type families (clearly distinct if two). Keep line lengths under 80 characters. Give serif body text slightly more line-height than sans-serif. Avoid accenting a single headline word, all-caps labels, and unnecessary labels above content.Expected output: Condensed from the skill's typography guidance and its list of common generated-page tells.
Write clear interface copy
PromptA CTA says exactly what happens: "Save changes," not "Submit." Keep an action's name consistent through the flow: a "Publish" button produces a toast that says "Published."Expected output: Taken from the skill's writing section on active voice and consistent vocabulary.
Pros & cons
Pros
- Pro:Names concrete AI-design clichés to avoid (cream/terracotta palette, SaaS card kit, all-caps eyebrows, numbered markers), making output easier to differentiate
- Pro:Requires planning and self-review against the brief before coding, encouraging deliberate choices
- Pro:Sets a quality floor: responsive, visible keyboard focus, reduced motion respected, accessible color
- Pro:Includes practical UI writing guidance alongside visual design
Cons
- Con:Documentation provides no setup or installation steps, so how to load the skill depends on the user's environment
- Con:Guidance is opinionated and prose-based, with no code samples or templates
- Con:Defers to the brief's own wording, so results depend heavily on the quality of the brief
Images
Related
Skill algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avo
Skill brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Skill mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Skill web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Skill webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Skill frontend-design-frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.