Source
When the agent reaches for it
The agent keeps every installed skill's description in view and loads the full instructions when a request matches. This is the description it reads:
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
What it changes about Claude's output
Left alone, generated interfaces cluster around a few looks. The skill names them outright: a cream background with a serif display and a terracotta accent, a near-black page with one acid-green accent, and a broadsheet layout of hairline rules. None of them is banned. Where the brief leaves a choice open, the skill tells Claude not to spend it on one of those.
The mechanism is a two-pass process. Claude first writes a small token system: four to six named colors, typefaces for at least two roles, a layout concept with ASCII wireframes, and a signature element the page will be remembered by. It reviews that plan for anything that reads like the default answer, revises it, and then builds from the plan exactly.
- Structural devices such as numbered markers must encode something true about the content.
- Motion is chosen deliberately, and one orchestrated moment is preferred over scattered effects.
- Interface copy follows the same discipline: plain verbs, sentence case, one job per element.
What the instructions cover
The sections of its SKILL.md, in order.
- Ground it in the subject
- Design principles
- Process: brainstorm, explore, plan, critique, build, critique again
- Restraint and self-critique
- More on writing in design
Install the frontend design skill
In Claude Code, run this in a session. It comes from the publisher's own instructions.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsLicense: Apache-2.0.