frontend-design Skill Review: 9,390 Bytes of Anti-Template Advice
The frontend-design skill in anthropics/skills is a 9,390-byte SKILL.md sitting next to a 10,174-byte Apache-2.0 license file. That makes the loaded set 19,564 bytes total, or about 4,891 estimated tokens if you use the common bytes ÷ 4 rule. GitHub reports the repo at 174,864 stars, with 19 skill folders present. I read the source, checked public issue threads, and did not run it through our API.
TL;DR
frontend-designis 9,390 bytes of instruction text; withLICENSE.txtthe loaded set is 19,564 bytes and roughly 4,891 estimated tokens by file-size arithmetic.- The repo currently shows 174,864 stars, 19 skill folders, and a root SPDX license field of NONE on GitHub; the skill folder itself carries Apache-2.0 terms.
- The skill is good at pushing Claude away from template UI and toward subject-specific design choices.
- Public discussion is not thin: GitHub issues show requests for design-system mode switching, DESIGN.md handoff, and clearer boundaries with adjacent skills.
- Main weakness: it still reads like a blank-canvas manifesto. If the project already has Material, Spectrum, or Fluent, the skill needs a sharper intake path.
What the skill actually says
Three short lines tell you most of the story:
"Approach this as the design lead at a design studio known for giving every client a distinct visual identity."
"Open with the most characteristic thing in the subject's world."
"Spend your boldness in one place."
That is the right instinct. It tries to stop Claude from making the same rounded-card, gray-shadow, gradient-wash page for everything. The guidance on type is especially useful: it tells the model to choose a deliberate typeface pairing and treat typography as part of the design, not neutral packaging. The anti-slop section is blunt too. It calls out default patterns like all-caps labels, middle-dot metadata, and decorative chrome that appears no matter what the brief says.
What it costs you in context
This is a small skill by modern standards. The arithmetic is straightforward:
SKILL.md: 9,390 B ÷ 4 ≈ 2,348 estimated tokens.SKILL.md+LICENSE.txt: 19,564 B ÷ 4 ≈ 4,891 estimated tokens.
That estimate is just file-size math. It is not a measured session cost, and it should not be confused with runtime spend. The good news is that the skill stays compact while still having a strong point of view.
File structure
| Path | Bytes | Estimated tokens | Role |
|---|---|---|---|
skills/frontend-design/SKILL.md | 9,390 | ~2,348 | Main instructions: visual direction, type, motion, restraint |
skills/frontend-design/LICENSE.txt | 10,174 | ~2,544 | Apache-2.0 terms for the skill folder |
| Total loaded set | 19,564 | ~4,891 | What the agent actually has to load if it needs the full folder |
What the community reports
| Source | Date | What was reported | Link |
|---|---|---|---|
| GitHub issue #1562 | 2026-08-14 | Users asked for a mode that handles existing design systems instead of assuming a blank canvas. | issue 1562 |
| GitHub issue #1008 | 2026-04-22 | One user proposed a DESIGN.md contract so design decisions can be carried forward across passes. | issue 1008 |
| GitHub issue #272 | 2026-01-23 | A user said the line between frontend-design and web-artifacts-builder was unclear at first glance. | issue 272 |
| GitHub issue #1109 | 2026-05-08 | A proposal asked for a separate pre-production motion-ideation skill, which suggests frontend-design is not the right home for marketing storyboards. | issue 1109 |
| GitHub issue #977 | 2026-04-19 | A request to avoid emojis in UI/docs shows users are actively tuning the style rules, not just reading them. | issue 977 |
The signal is pretty consistent: people like the taste, but they want clearer boundaries and a better handoff story. I did not find a big HN thread focused on this skill; GitHub is where the real discussion lives.
How to install it
This repo is published as an Anthropic skills marketplace. The README this run verifies two relevant commands:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsThe second command installs the bundle that contains frontend-design. That matters because the skill is not a standalone product; it is one folder inside a larger example-skill bundle. If you browse locally, the path is skills/frontend-design/SKILL.md.
Where it earns its keep
It earns its keep when the brief is genuinely open. A fresh landing page, a one-off marketing page, a dashboard that needs a point of view, or a redesign where the team has no visual language yet — those are the places where this skill helps. It gives Claude a backbone: pick a subject-specific visual idea, commit to a type system, keep the layout legible, and do not scatter decoration everywhere.
It is also useful as a brake. The skill explicitly calls out the common “AI design” tells. That alone is worth something, because a lot of generated UI fails by looking competent but anonymous. This skill tries to prevent that failure mode.
Where it does not
My main criticism is simple: it is still mostly a blank-canvas skill. Public issue #1562 is the tell. Real teams often start with an existing design system — Spectrum, Material, Fluent, or a house system with tokens and component rules already in place. The current skill gestures at originality, but it does not yet tell the model how to switch from invention mode to compliance mode.
That missing branch matters. Without it, Claude can produce a gorgeous but off-brand page, or spend time inventing a palette where the answer should have been “use the existing system and be quiet.” Issue #1008 points at another gap: people want a DESIGN.md-like handoff artifact so a design can survive multiple passes. The skill has taste, but not much persistence. It is a good first pass, not a complete design operating system.
I also think the skill is slightly too proud of being anti-template. The line between “distinctive” and “self-conscious” is thin. If you use it on a small internal page, it can spend more attention on aesthetic posture than on the boring part: making the thing easy to read, easy to use, and consistent with the surrounding product.
What changed in maintenance
The file has seen recent attention: Anthropic updated frontend-design on 2026-09-03 with a commit named “Update frontend-design skill to avoid generic design defaults (#1713).” That lines up with the current wording. The repo is not frozen; it is being tuned toward the same anti-generic goal the file already states.
FAQ
What does the frontend-design skill do?
It guides Claude toward distinctive, intentional frontend design. The model is told to ground choices in the subject matter, choose typography deliberately, and avoid generic SaaS chrome.
How big is the skill?
The skill file is 9,390 bytes. With the license file beside it, the loaded set is 19,564 bytes. That works out to about 2,348 estimated tokens for the skill file and 4,891 estimated tokens for the whole folder, using bytes divided by four.
How do I install it?
Add the Anthropic skills marketplace with /plugin marketplace add anthropics/skills, then install example-skills@anthropic-agent-skills. The frontend-design skill ships inside that bundle.
What is the biggest complaint?
That it needs a clearer mode for existing design systems and a better design handoff path. In other words: it is strong on taste, weaker on intake and persistence.
Skill by Anthropic. License in skills/frontend-design/LICENSE.txt: Apache-2.0. Repo: github.com/anthropics/skills. Review date: 2026-09-07. Community reception shifts over time; check the linked issues if you need the current mood, not just this snapshot.