Hi, it's Ivo. Anthropic publishes a free skill called frontend-design. A skill is a text file with instructions that Claude reads before it starts a job. This one is about how a page should look. On claudemarketplaces.com it shows 792K installs (as of 22 October 2026). I ran the same website prompt twice in Claude Code, once without it and once with it. Here is everything you need to try the same thing.
What it is
- Name: frontend-design, by Anthropic.
- Where it lives: github.com/anthropics/skills, in the folder skills/frontend-design.
- What's inside: one instruction file (SKILL.md) and a license. No code runs. I checked on 22 October 2026: the file in the GitHub folder is the same, byte for byte, as the one I tested.
The install line
Open a terminal in your project folder and paste this. It's the command claudemarketplaces.com gives for Claude Code:
npx -y skills add anthropics/skills --skill frontend-design --agent claude-code
You need Node.js on your computer for npx to work. claudemarketplaces.com says it installs into .claude/skills of the current project. Then start Claude Code in the same folder.
The exact prompt I used
Word for word, nothing added:
"Build a one-page website for a small neighbourhood bakery called Morning Crust: hero, three bestsellers, opening hours, and a contact section. Put everything in a single index.html file with inline CSS and no external images."
I ran it in Claude Code with Claude Sonnet 5.5 on 22 October 2026. Run 1 was in a folder without the skill. Run 2 was in a folder with the skill. Same prompt, same model.
How to check it switched on
- Look in the folder. After the install line, your project should have a frontend-design folder inside .claude/skills.
- Watch the first step. In my Run 2, the first thing Claude did was use the skill. The log says "Launching skill: frontend-design", and only after that did it write index.html. In Run 1 it went straight to writing the file.
- No skill step? Add one sentence to the end of your prompt: "Use the frontend-design skill." I didn't need it. The skill switched on by itself.
5 checks for an AI-made look
The skill lists the things AI-made pages tend to share. Here are five of them, quoted from SKILL.md, so you can check any page Claude builds for you, with or without the skill.
- Cream, serif, clay. The skill: "a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta or warm-clay accent". My Run 1 had exactly this: cream #fbf5ea, Georgia, clay orange #b5651d.
- The same cards everywhere. The skill: "content chopped into identical rounded cards, one border-radius on everything regardless of hierarchy". My Run 1 put the three breads in three identical rounded cards with an emoji on top.
- Labels in capitals. The skill: "Using all caps for labels." My Run 1 had ADDRESS, PHONE and EMAIL.
- One word in a different color. The skill: "Accenting just a single word or phrase in a headline, like putting one word in italic/bold or a different color." My Run 2, the one with the skill, did this: "Crust" is yellow, "Morning" is white.
- Movement on everything. The skill: "fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated." Neither of my runs did this. Run 2 had one animation, a sun that rises once.
If a page hits two or three of these, ask Claude to change those parts and name what to change.
What I saw, one run each
| Run 1 (no skill) | Run 2 (with the skill) | |
|---|---|---|
| Colors | cream, brown, clay orange | night blue, sun yellow, crust brown |
| Fonts | Georgia for everything | Iowan Old Style / Palatino, Avenir Next for small text |
| Top of the page | a centred sentence, a sunrise emoji, a round button | "Morning Crust" in huge type, a sun and bread-shaped hills drawn in code |
| Bestsellers | three identical cards with emoji | a menu list with prices and "Out of the oven at 6:30 a.m." |
| Contact | ADDRESS / PHONE / EMAIL | "Order a loaf for tomorrow": email or call before 4 p.m. and they put one aside |
The honest part
- One run each. Another run can come out differently. This is an example, not a statistic.
- Run 1 isn't ugly. It's clean and works on a phone. It looks like a template, and Run 2 has a character of its own.
- Run 2 has a bug. The sun at the top is cut off on a desktop screen. On a phone it touches the end of the text.
- Run 2 broke the skill's own rule. It coloured one word of the headline (check 4).
- So open the result on a laptop and on a phone, and check it yourself before you show it to anyone.