AI Guides › Workbench
By Nigel Guy · 8 min read
Ask Claude for a landing page or deck with no other guidance and you get its house style: safe fonts, identical rounded cards, a soft gradient, a small all-caps label over every heading. Each piece looks fine alone. Together, anyone who uses these tools can tell where the page came from. The usual fix is to type "make it look more professional" and hope, which only gets you a more polished version of the same defaults.
The rule: don't ask for "better design" in a sentence. Install skills that make the choices for Claude, one for direction, one for palette and type, one to check the result, and use them in that order.
A skill is a folder with a SKILL.md instruction file, plus any scripts or assets it needs. Claude loads it when a task matches its description, or when you call it by name. That's why a skill beats a pasted style prompt: it turns up on every job, not just the ones where you remembered.
All of these skills are free to download. What costs money is the Claude plan you run them on. At time of writing, Anthropic lists Pro at $20 a month and Team Standard at $25 a seat a month, in US dollars, so check the £ figure at checkout. Claude Code is not on the Free plan.
| Skill | Layer | What it does | Runs in | Cost | Catch |
|---|---|---|---|---|---|
| frontend-design (Anthropic) | Direction | Makes Claude settle on a subject-specific palette, type and layout plan before it writes code, and steer away from the usual generated-page tells | Claude.ai (upload), Claude Code | Free (skill); needs a plan with code execution | Pages only. It won't restyle a Word document |
| theme-factory (Anthropic) | Palette and type | Ten preset colour-and-font themes, or a new one generated on request, applied to slides, documents, reports or HTML | Claude.ai (upload), Claude Code | Free | Shows you a showcase PDF and waits for your choice, so it isn't one-shot |
| canvas-design (Anthropic) | Direction (static) | Posters and single visual pieces as .png or .pdf, built from a short written design philosophy | Claude.ai (upload), Claude Code | Free | Wrong tool for text-heavy documents |
| Built-in document skills (docx, pptx, xlsx, pdf) | Output | Produce real Word, PowerPoint, Excel and PDF files rather than text you copy across | Claude.ai, automatically, with code execution on | Included | They handle the file format. They don't give it a look, so pair them with a theme |
| Impeccable (Paul Bakaus) | Precision and audit | One skill with sub-commands for critique, audit, typography, layout, colour, polish, toning down and more | Claude Code and other coding agents | Free, Apache 2.0 | No Claude.ai web install route at time of writing. The installer also adds project hooks |
| web-design-guidelines (Vercel) | Audit | Checks UI files against Vercel's published interface guidelines and reports problems by file and line | Claude Code | Free, MIT | Fetches its rules from GitHub each run, so it needs web access. It reports problems but doesn't redesign anything |
skills/frontend-design).Uploads usually fail because the folder name doesn't match the name: line in SKILL.md. Anthropic's help page also mentions a size limit without giving a figure, so zip the skill folder only.
On Team and Enterprise, an owner first has to enable both "Cloud code execution and file creation" and "Skills" under Organization settings > Plugins & skills (the Policy tab). Until that's done, the menu above won't be there for you.
Anthropic's skills install as plugins:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
example-skills includes frontend-design, theme-factory, canvas-design and several others. If you only want one, copy its folder into ~/.claude/skills/<name>/ to use it in every project, or into .claude/skills/<name>/ inside a repository to use it there only. For Impeccable, run /plugin marketplace add pbakaus/impeccable and install it from /plugin. You can also run npx impeccable install from the project root, which asks whether to install globally or just for that project. For Vercel's skill, run npx skills add vercel-labs/agent-skills.
Typing /skill-name at the start of a message runs that skill. If you type the name after other text, Claude is allowed to use the skill but won't necessarily run it.
This skill has Claude write a compact plan before any code: four to six named colours, the typefaces and what each is for, a layout sketch, and the principles that set this page apart. Claude then checks the plan against the brief and revises anything generic. It needs real material to work from, so give it the subject, the audience and what the page has to do. Brand colours alone aren't enough.
/frontend-design
Page: booking page for a two-person bicycle repair workshop in Leeds.
Audience: commuters who need a repair this week, mostly on their phones.
The page's one job: get a booking slot chosen.
Before writing any code, show me your colour, type and layout plan.
Tell me which parts of the plan you changed because they read as generic.
Use our real services and prices below. Do not invent testimonials.
[paste services and prices]
The last line matters. With no real content to use, the model fills the gaps with plausible placeholders, and invented reviews are the worst of them.
Use this for decks and documents where consistency matters more than layout. It shows its showcase and waits for your choice. If no preset fits, ask for a new theme and save the hex values and fonts for reuse.
Use theme-factory. None of the presets: build a new theme from these brand
notes: [colours, existing logo description, tone].
Give me the palette as hex values with a role for each, and a heading and
body font pair. Then apply it to the attached deck without changing any wording.
For one poster or cover image, ask to see the design philosophy it writes first and correct that before it renders.
Run these once the page exists. /impeccable critique and /impeccable audit find problems; narrower sub-commands such as quieter (for a page trying too hard) fix one thing each. Vercel's skill returns findings you then turn into a fix list:
/web-design-guidelines src/pages/booking.html
Then fix only the accessibility and focus-state findings. List anything
you chose not to change and why.
Skills that disagree leave Claude guessing which one wins: two direction skills give you a page that looks half one and half the other, and auditing before the direction is settled tidies things you're about to replace. The Three-Layer Stack keeps each skill to its own job:
| Order | Layer | Use exactly one of | Done when |
|---|---|---|---|
| 1 | Direction | frontend-design or canvas-design | You've approved a written plan |
| 2 | Palette and type | theme-factory, or your own saved brand theme | Colours and fonts are fixed |
| 3 | Check | Impeccable or web-design-guidelines | Findings are fixed or consciously declined |