Frontend Design

What it does

Frontend Design changes how Claude approaches UI work by forcing a design-lead process: pin the subject, draft a compact token system (color, type, layout, signature element), critique it against known AI defaults, then build. It explicitly steers away from the three visual clichés Claude tends to produce — cream backgrounds with terracotta accents, near-black with acid-green, and broadsheet layouts with hairline rules — unless the brief actually asks for them. Most useful when you’re building a landing page, marketing site, or hero section and want output that doesn’t immediately read as AI-generated.

Use cases

• Design a new marketing site from a brief where you want Claude to make deliberate typography and palette choices rooted in the subject, not pull from its usual template pile.
• Reshape an existing UI that feels generic, using the skill’s brainstorm-critique-build loop to identify which parts are defaults and swap them for choices specific to the product.
• Write UI copy alongside the visual design, applying the skill’s writing guidance (active voice, action names that persist through flows, errors that don’t apologize) so the words don’t undo the design work.

When to use it

• You’re building a hero section, landing page, or any high-visibility surface where visual identity matters.
• Your first pass with Claude produced something that looks like every other AI-generated site.
• The brief leaves palette, type, or layout undefined and you want Claude to make opinionated choices instead of defaulting.
• You want Claude to also write the interface copy, not just the markup and styles.

When NOT to use it

• You’re working inside an existing design system with locked tokens — the skill’s job is to invent a visual direction, which fights established constraints.
• You need pixel-accurate implementation of a Figma file; this is a design-direction skill, not a Figma-to-code translator.
• You’re building internal admin tooling where consistency with existing patterns matters more than distinctiveness.
• The brief is highly technical (dashboards, data tables) where the skill’s emphasis on signature moments and typographic personality is overkill.

Installation

/plugin install frontend-design@anthropic-agent-skills

If you haven’t added the Anthropic marketplace yet, run this first:

/plugin marketplace add anthropics/skills

After install, just mention it in conversation:

Use the frontend-design skill to design and build a landing page for a small-batch coffee roaster that sources single-origin beans from Ethiopian cooperatives.

Troubleshooting

The output still looks like the cream-background terracotta default. The skill tells Claude to critique its plan against those defaults before building, but that critique step gets skipped when the brief is vague. Give it a concrete subject, audience, and one-line job for the page — the more specific the brief, the more the skill has to push against.

CSS rules cancel each other out, especially padding and margins between sections. The skill warns about this: type-based selectors like .section and element selectors like .cta often collide. Ask Claude to consolidate spacing into a single source (either a section wrapper or a utility scale) and remove the duplicate rules.

Animations feel scattered and reinforce the AI-generated look. The skill says less is often more. Ask Claude to keep one orchestrated motion moment (a page-load sequence or a single scroll reveal) and strip the rest. Hover micro-interactions on every element are usually the giveaway.

Copy reads as generic even though the visual design improved. Point Claude at the writing section of the skill explicitly. Ask it to rewrite labels as actions the user controls, keep action names consistent from button to toast, and rework empty and error states to give direction instead of apologizing.