How to Install and Use the Frontend-Design Skill with Claude Code

Step 1: Locate the skills directory

Step 2: Clone the skill

The frontend-design skill is open source. Clone it directly into the skills directory:

The clone produces this structure:

Step 3: Verify Claude Code sees the skill

Restart Claude Code (close all windows, reopen). Then in any project, type:

You should see frontend-design in the list. If you don't:

Step 4: Your first prompt

> Build me a landing page for a B2B SaaS that does compliance reporting for mid-market banks. Include hero, features, pricing, FAQ. Use the frontend-design skill.

The skill loads its anti-pattern rules first, then asks two questions before producing code:

1. What's the brand register? (premium / pragmatic / playful) 2. What's the product register? (clinical / friendly / dense)

These two registers being different is the skill's biggest opinion. Most AI-generated UIs collapse them into one tone. Frontend-design forces a contrast.

For the prompt above, a good answer is "premium brand, clinical product." The skill produces a landing page where the marketing copy is bold and confident, and the in-product UI screenshots feel quiet and dense — like a Bloomberg terminal.

Step 5: Inspect the output

Frontend-design output is intentionally hard to spot as AI-generated. Things to check:

The color palette won't be indigo-to-purple. The skill's reference file forces one of four strategies: monochrome with a single accent, two complementary hues, an analogous trio, or a brand-locked palette derived from a logo color. Generic AI gradients are blocked.

Typography won't be Inter (the skill explicitly rejects 12 fonts that read as default-AI). You'll see Söhne, Tiempos, Mona Sans, Geist Mono, or a system stack — fonts with personality.

The component layout won't have three identical feature cards. The skill audits its own output for "rule of three" patterns and breaks them.

Step 6: A real first project end to end

Let's walk through producing a single deliverable. The brief: a one-page landing site for a productivity app called Tempo that schedules deep-work blocks based on calendar availability.

> Use the frontend-design skill. Brief: landing page for Tempo — productivity app that finds deep-work blocks in your calendar. Brand register: premium. Product register: clinical. Sections: hero, problem statement, three-screenshot product walkthrough, pricing, FAQ, footer. Tailwind CSS, single HTML file. Output the full file.

The skill responds in two phases. First it loads its anti-pattern checklist and color strategy reference. Then it generates the file. On a typical run, expect 12-15 seconds for a one-page site.

Open the result in a browser. Things to check against the skill's own rules:

• Hero typography is not Inter. If you see Inter in the body, the skill misfired — re-prompt with "use Söhne, Tiempos, or Geist as the headline font."
• The CTA button is not in indigo or purple. The skill's color strategy reference lists 4 valid palette schemes; default AI gradients should not appear.
• The product walkthrough section is not three identical cards. The skill should produce something asymmetric: maybe one large screenshot followed by two smaller supporting visuals, or a horizontal scroll layout.
• Whitespace between sections varies. AI-generated pages default to uniform 80px gaps everywhere; the skill's rhythm rules should give you a pattern more like 120px / 80px / 64px / 96px depending on the section's weight.

Step 7: Troubleshooting

Skill doesn't appear in /skills list

The most common cause is malformed YAML in SKILL.md. Open the file, check the top three lines look like this:

Stray indentation or missing dashes will break the parser.

Skill appears but Claude doesn't use it

The description field is what triggers the skill. If your prompt doesn't mention frontend, design, UI, or web component, Claude won't invoke it. Either reword your prompt or add "use the frontend-design skill" explicitly.

Output still looks AI-generated

Token usage is high

The skill loads 4-6 reference files per invocation (around 8K tokens). If you're on a metered plan and run many design tasks, consider creating a custom slim version with skill-creator that loads only the references you need.

Security check before installing

If you want a deeper audit method, [our skill audit checklist](/blog/how-to-audit-a-claude-skill-before-installing) walks through the full review process.

Real workflow examples

Use case 1: client landing page

A freelance dev I know rebuilds 4-6 client landing pages a month. With frontend-design, his first-pass output now requires 30% less revision time from clients. The brand-versus-product register split alone removed two rounds of "make this feel less generic" feedback. He charges by project, not by hour, so faster output translates into more billable jobs per quarter — about $4K in extra revenue across the first three months on the skill.

Use case 2: internal dashboard

The dashboard template is the underrated win. Most AI tools generate "marketing dashboards" — pretty, useless. The frontend-design dashboard template optimizes for information density, the way a real product dashboard should. Tables instead of cards. No icons unless they convey state. Numbers prioritized over labels. For internal tools where the user is a power user (sales ops, customer support, ops engineers), this is the right default.

Use case 3: component library

Use case 4: portfolio site

If you're a developer building your own portfolio, the brand-versus-product split is the difference between "another developer portfolio with a dark-mode toggle" and a site that signals taste. The skill's typography rules force a serif headline pairing for the hero, which reads as more designerly than the default Inter-everywhere look most dev portfolios fall into.

Use case 5: pitch deck slides via the HTML route

If you read [our Gamma vs Tome vs Beautiful.ai comparison](/blog/gamma-vs-tome-vs-beautiful-ai-best-ai-presentation-tool-2026), you know AI presentation tools are competent but locked into their templates. An alternative workflow: use frontend-design to generate slide HTML, render to PDF via Playwright, and produce a deck that doesn't look like Gamma's house style. Slower than Gamma, more visually distinctive.

Comparing to other design-focused skills

Updating the skill

Skills don't auto-update. Once a quarter, run:

Read the changelog before pulling. If the skill author has changed the SKILL.md description, test the new version against your own prompts before relying on it for client work.

What it's not

Frontend-design is not a Figma replacement. It generates code, not design files. If your team works in Figma-first and exports to code via Code Connect, this skill complements that workflow but doesn't replace it.

It's also not a layout engine for design tools that already exist. v0 by Vercel, for example, generates better React component code with shadcn integration than this skill does — frontend-design wins on aesthetic distinctiveness, v0 wins on framework integration.

For specifically React + shadcn projects, run frontend-design for the visual decisions and v0 for the implementation.

FAQ

Is frontend-design free?

Yes. It's open source under MIT. No API key required. You only pay for Claude Code usage.

Does it work in Claude Desktop or just Claude Code?

Skills are a Claude Code feature. The reference files (anti-patterns.md, color-strategies.md) work as standalone prompts you can paste into Claude Desktop, but you lose the auto-invocation behavior.

Can I edit the skill for my own use?

Yes — fork the repo, edit the references and templates, install your fork. The skill is intentionally simple to customize.

How does this compare to v0 by Vercel?

v0 generates ready-to-deploy React + shadcn code with tighter framework integration. Frontend-design generates more distinctive aesthetics across any framework. Use v0 for fast shipping, frontend-design for visual differentiation.

Will the skill output look the same on every install?

No. The skill provides constraints, not templates. Your prompts, project context, and choice of brand/product register all influence the final output. Two users with the same skill will produce different designs.

What if I find a bug?

Open an issue on the GitHub repo. Active skill repos respond within a few days. For broken installs, see the troubleshooting section above first.

Does the skill work on Windows?