Guides › What changed

How to stop AI websites looking all the same: Claude's free design skill

Updated Oct 31, 2026 · Level: Beginner · Facts against Anthropic's own files and pages.

What's a "skill"?

A skill is a folder of instructions, and sometimes scripts, that an AI loads only when a task needs it. Anthropic describes skills as a way to teach Claude "how to complete specific tasks in a repeatable way." ⁴

The frontend-design skill is just two files: a SKILL.md with the instructions and a LICENSE.txt. That license is Apache 2.0, so it's free to use and change. ^2,1

Skills follow an open format (published at agentskills.io), so the same folder also works in other AI coding tools that support it. ⁵

What the skill tells the AI to do

The whole skill is plain English, and you can read it in about five minutes. Here are the main ideas²

• Think like a design lead. It asks the AI to act like a studio "known for giving every client a distinct visual identity," for a client who has "already rejected proposals that felt cliché or templated."
• Start with the subject. Distinctive choices come from the topic itself. A toy for 8- to 11-year-olds should look nothing like a dashboard for financial analysts.
• Plan before building. First it writes a short design plan: 4 to 6 named colours, the typefaces and what each is for, a rough layout, and the principles behind it. Then it checks whether that plan is just the default it would produce for any similar page, and if so it changes it. Only then does it write code.
• Make the type do the work. Choose typefaces on purpose, use one or two families, and keep lines under about 80 characters.
• Avoid the usual giveaways. It lists looks it says AI-made design "clusters around." Examples include a warm cream background with a terracotta accent, the "SaaS-card kit" of identical rounded cards with soft grey shadows, all-caps labels above every heading, and a "→" on every button.
• Be bold in one place. Let one thing be memorable and keep the rest quiet. Its advice, borrowed from Chanel, is to look in the mirror and "remove one accessory."
• Get the basics right. It should work on phones, show keyboard focus, respect reduced-motion settings, and use plain, active button text ("Save changes," not "Submit").

Your own words still win. The skill says that if your brief asks for a particular look, even one on its "avoid" list, the AI should follow your brief. ²

How to install it

Claude Code: the official plugin

In Claude Code, run:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

frontend-design is part of Anthropic's example-skills bundle, so this installs it along with the bundle's other example skills. You can also add the marketplace and then pick the bundle from Browse and install plugins. ¹

Any supported AI coding tool: the skills command

If you only want this one skill, run this in your project folder (you need Node.js 22.20 or later):

npx skills add https://github.com/anthropics/skills --skill frontend-design

skills is a small open-source command-line tool from Vercel Labs, not from Anthropic. It downloads the skill and asks which AI coding tools to install it for. Its docs say it supports Claude Code, Codex, Cursor and OpenCode "and 75 more," and its full list includes Grok Build and Gemini CLI. ³

Handy options:

• -a claude-code picks the tool for you. We tested this on Oct 31, and it installed into .claude/skills/frontend-design.
• -g installs it for all your projects, not just this one.

The tool also warns that skills "run with full agent permissions." This one is only text instructions, but it's a good habit to read any skill before you install it. ³

Claude on the web and in the app

Anthropic's repository says its example skills "are all already available to paid plans in Claude.ai." To turn them on^1,6

1. Go to Settings › Capabilities and turn on Code execution and file creation (called Create and edit files in the newer layout).
2. Go to Customize › Skills and switch on the skills you want.

If you don't see it there, you can upload the skill's folder as a ZIP file from the same page ("+", then "Create skill", then "Upload a skill"). ⁶

How to ask for a style direction

The skill works best when you give it something to work with: who the page is for, what it has to do, and how it should feel. These are example prompts. Change the details in square brackets.

Tip: in Claude Code, the AI usually decides on its own when to use an installed skill. Naming it ("use the frontend-design skill") makes sure.

Things to know

• It's a starting point, not a guarantee. Anthropic's repository says these skills are "for demonstration and educational purposes only" and that what you get from Claude "may differ." Test the result before you rely on it. ¹
• It doesn't replace your eyes. The skill tells the AI to critique its own work and take screenshots if it can. Check it on your own phone too. ²
• Fonts and pictures come from somewhere. If the AI picks a web font or uses an image, check that you're allowed to use it.
• Distinctive isn't always better. For a form people use every day, clear and familiar can beat bold. You can say so in your prompt.
• About the numbers going round: the repository's star count (about 185,000 on Oct 31) is public on GitHub. We couldn't find an official install count for this skill, so we haven't quoted one.

Related: Claude Code explained · Build a mini-app with AI, no coding · AI for coding · Claude plans and prices