Claude's frontend-design Skill: Does It Run Once Installed? A Three-Run Test

The frontend-design skill is Anthropic's official skill for making Claude design web pages deliberately, instead of producing the look that "reads as AI-generated". This guide runs a real test: the same landing-page prompt for a café, three times. The most useful finding: after installing the skill, Claude did not use it on its own. Only when the prompt named the skill did the page change completely.

Tested on 10 October 2026 with Claude Code 2.1.294 (Opus 5.5, high effort) on Linux, auto mode on. "Hiên Nhà" is a fictional café; prices, address and phone numbers on the pages were made up by the AI. Each setup ran only once or twice, so this is a hands-on observation, not a statistic.

Watch the real test run (Vietnamese narration): https://youtu.be/9_nXl0opjzw

The test: three runs, one prompt

The prompt (in Vietnamese) asked for a landing page for "Hiên Nhà", a fictional café in Hanoi: an introduction, a six-item menu with prices, opening hours, address and a booking button, in a single index.html with HTML and CSS only, no follow-up questions.

1. Run 1, no skill: an empty folder, nothing installed.
2. Run 2, skill installed, same prompt.
3. Run 3, skill named: the prompt starts with "Use the frontend-design skill."

Each run used its own folder and a fresh Claude Code session.

Installing frontend-design

frontend-design ships in the example-skills plugin of the anthropics/skills repository:

claude plugin install example-skills@anthropic-agent-skills --scope project

If the marketplace is not added yet, run claude plugin marketplace add anthropics/skills first. New to skills? Start with What Are Claude Skills? Install One From GitHub and Test the PowerPoint Skill.

Run 1: no skill, a nice page with the usual AI look

Claude thought for about 1 minute 46 seconds and wrote a 442-line index.html: navigation, introduction, a six-item menu with prices, hours, address, a booking button and a coffee cup drawn in CSS. It looks good at a glance.

But the skill's own SKILL.md lists the traits AI-generated pages tend to share, and run 1 hits most of them:

• Warm cream background, serif display, terracotta accent: the skill names a background near #F4F1EA; run 1 used #F7F1E8, a Lora serif headline and terracotta buttons.
• One phrase in the headline set in italic or a different colour: "một tách cà phê" in italic terracotta.
• A small all-caps label above the headline, joined with a middle dot: "CÀ PHÊ PHỐ CỔ · HÀ NỘI".

The red boxes were not drawn by hand: their positions come from the page's own elements (italic or differently coloured text inside the headline, small uppercase text above the fold).

Run 2: skill installed, still not used

In a new folder, example-skills was installed, then the same prompt was typed. Claude even opened Chrome to screenshot the page at 1280 and 390 pixels wide and reduced the headline size. But the session never loaded frontend-design.

The result follows the same template as run 1: background #F6EFE3, Lora headline, the phrase "nghe phố chậm lại." in italic terracotta, an all-caps label joined with a middle dot.

An earlier, separate session gave the same result: the skill was installed and listed, but not called. Claude decides on its own whether to use a skill, so installing one does not guarantee it runs.

Run 3: name the skill, get a different page

With "Use the frontend-design skill." at the start of the prompt, the terminal shows:

Skill(example-skills:frontend-design)
  ⎿  Successfully loaded skill

Claude then thought longer (about a minute and a half) and settled a design direction before writing code, as the skill requires: an old-quarter Hanoi look with ochre walls, green shutters, bougainvillea pink, Barlow Condensed and Literata, and a single shutter-opening animation on load. The final file has 555 lines.

Run 3 shows the café name like a shop sign on green, a shutter on each side, the menu on deep green and a booking form with date and time fields. No cream background, no italic accent phrase, no all-caps eyebrow label.

Not perfect: you still need to look

The "Hiên Nhà" wordmark in the top-left corner is covered by a shutter and hard to read. Claude was about to take screenshots to check its work when the test session ended, so the flaw remains.

The skill steers away from defaults, but it does not replace opening the page yourself, especially on a phone.

Inside the frontend-design skill

The SKILL.md file is 71 lines, written like a brief for the design lead of a studio. Key points:

• It names the AI defaults: cream with serif and terracotta; near-black with one acid accent; broadsheet layouts; the identical rounded-card SaaS kit; all-caps eyebrows, middle-dot meta strings and "→" on buttons. They are legitimate for some briefs, but they are defaults, not choices.
• Two passes: first a plan with 4–6 named colours, typefaces and roles, a layout sketched in ASCII and the principles for this page; review the plan against generic output, revise, then code.
• "Spend your boldness in one place": one memorable element, everything else quiet.
• A quality floor: responsive to mobile, visible keyboard focus, reduced motion respected.
• Copy: written from the user's side; buttons say exactly what happens.

Using frontend-design well

1. Name the skill in the prompt: "Use the frontend-design skill. …". Claude Code's command menu also lists /example-skills:frontend-design.
2. Give real subject detail: the skill draws colours and type from the subject, so the more specific the brief, the more distinct the page.
3. Check the page yourself on desktop and phone before using it.

Putting the page online

An index.html on your computer is only visible to you. For customers to open it you need:

• Hosting: a place to put the file so anyone can load it. A single static page runs on the cheapest web hosting plan, or on a free static host such as GitHub Pages for testing.
• A domain: your own address to print on menus and signs, and to use for email.

Buying hosting and the domain in one place saves pointing the domain between providers; iNET sells both and supports Vietnamese customers. The link above is a partner link: Dùng Gì may earn a commission if you sign up or buy through it. See plans and prices for Hostinger Web Hosting and iNET domains on Dùng Gì.

FAQ

What is the frontend-design skill?

An official Anthropic skill in the anthropics/skills repository that guides Claude to design interfaces deliberately: colour, type and layout chosen for the subject instead of defaults, with a design plan before any code. Install it with claude plugin install example-skills@anthropic-agent-skills.

Why didn't Claude use the skill after I installed it?

Claude decides whether to use a skill based on your request and the skill's description. In two separate sessions with a plain "make a landing page" prompt, Claude did not call frontend-design either time. To be sure, name the skill in the prompt.

Is Claude's web design bad without the skill?

No. In this test the no-skill page was complete and looked good. The difference is that it landed on the same defaults many AI-made pages share, so it is easy to recognise and hard to remember.

Do I need hosting to view the page Claude made?

No. Opening index.html in a browser shows it on your machine. You only need hosting and a domain when other people should reach it at a web address.