ClaudeWhat it does
Ask an AI for a website and you often get the same page everyone else gets: a purple gradient, three identical feature cards, a big "Supercharge your workflow" headline. It is not ugly. It just says nothing about your business.
frontend-design is a skill from Anthropic, written by Prithvi Rajasekaran and Alexander Bricken. It gives Claude a design lead's habits: start from what the page is actually about, pick a clear direction, choose type on purpose, and avoid the handful of treatments that give away a generated page. Claude uses it by itself when you ask for frontend work.
It is the starting point several other design skills grew from. Impeccable started from it, and our own Fable Forge adapts ideas from it with credit.
I have it installed in my own Claude Code.
What you need first
- Claude Code.
- A project folder, even an empty one. For an existing site, open that site's project.
- The skill is free, but it runs inside a coding agent such as Claude Code or Codex, which may need a paid plan.
Install (checked 30 Sep 2026)
Inside a Claude Code session, type:
/plugin install frontend-design@claude-plugins-official
Or browse for it under /plugin and then Discover. From a normal terminal, claude plugin install frontend-design@claude-plugins-official does the same; we ran that on a throwaway setup on 30 Sep 2026 and it installed cleanly. Start a new session afterwards.
First use
Give it a real subject, the audience and the one thing a visitor should do:
What the skill's instructions describe (we tested the install, not a full build for this guide): Claude names the subject, who the page is for and its main job, and checks that with you if your brief left it open. Then it picks a direction and builds the page as working code. The type, colours and layout should feel like they belong to a tuition centre, not to a software startup.
If the first version still looks generic, say what feels off ("the headline could be for any business") rather than "make it better".
How it chains with other library skills
- The current skill tells Claude to critique its own work as it builds, taking screenshots where the setup allows. A separate check is still worth it, because the builder is marking its own homework: look at the result at phone and desktop width with agent-browser or Playwright, and click the main action once with test data.
- For a checklist of AI tells and follow-up commands such as polish and audit, add Impeccable.
- The full order we follow is in Vibe-code a website that does not look AI-made.
Watch-outs
- Licence: Apache-2.0. Free to use; keep the notice if you copy or adapt it.
- It will make up content if you let it. Give it your real prices, hours and proof. Remove any testimonial, client logo or number that is not true before the page goes live.
- Design is not proof. A distinctive page still needs real visitors to tell you whether it works.
- Publishing is your call. Deploying the page should wait for your OK.
Link and credit
frontend-design in anthropics/claude-plugins-official, by Anthropic, Apache-2.0. This page is our own summary.