Designing with Claude's skills
What is a skill?#
A skill is a folder with a SKILL.md file of instructions (and sometimes scripts) that teaches Claude to do one kind of task the way an expert would. Asking "use frontend-design for this page" loads that playbook first.
We set up a Skills Library with design skills (frontend-design, canvas-design, theme-factory, brand-guidelines, algorithmic-art, web-artifacts-builder), data skills (xlsx, pdf, data-analysis), SEO skills and skill-creator.
canvas-design: philosophy first#
For the Master Dashboard's header art, canvas-design works in two steps:
- Write a design philosophy: a short manifesto. Ours was "Orbital Ledger": projects as gold bodies on measured orbits, ink-dark field, one precious metal, thin type, every mark a measurement.
- Make the artwork from it: a star-chart plate drawn with Python (Pillow), each project a body on its own ring, labelled like a catalogue (CP-01, CP-02…).
Why a philosophy before pixels?
It forces specific choices (one accent colour, radial balance, sparse labels) instead of defaults. Later decisions get checked against it: "does this belong in an Orbital Ledger?"
Craft details worth stealing#
- Draw at 2× size, then shrink: lines come out crisp.
- An automatic overlap checker: every label's bounding box is tested against every other and against the margins. When text collided, the build failed instead of shipping a broken image. When a ninth project was added, we added an orbit rather than squeezing.
frontend-design: avoid the "AI look"#
The frontend-design skill lists the tells of generated pages: cream backgrounds with terracotta accents, black with a single neon colour, identical rounded cards with soft shadows, ALL-CAPS labels above every heading, A · B · C meta strings, monospace for small labels, arrows on every link.
Its method:
- Ground the design in the subject. The Web Pages gallery belongs to a newsroom-flavoured studio, so it used Schibsted Grotesk (drawn for a news publisher). This Learn Code site is a learner's notebook: squared exercise-book paper, a red margin line, red-pen boxes for mistakes, yellow highlighter for takeaways.
- Spend boldness in one place. The gallery's big element is a huge search box; everything else stays quiet.
- Structure must mean something. Colour tabs in the gallery encode category; numbers on this course map mean sequence. Not decoration.
- Plan, check against defaults, then build.
Design is information
Every border, colour and number should answer "what does this tell the reader?" If nothing, remove it.
Key takeaways#
- Skills package expert know-how; name one to use it.
- canvas-design: philosophy first, then a crafted artefact.
- frontend-design: choose from the subject, avoid generic defaults, one bold move.
- Automate quality checks (like the overlap checker) so mistakes fail loudly.
Quick quiz#
1. Name two "AI-generated look" tells.
Any two of: cream + terracotta, black + one neon accent, identical rounded cards with soft shadows, ALL-CAPS eyebrow labels, middle-dot meta strings, monospace labels, arrows on every link.
2. Why draw at 2× and shrink?
Thin lines and small text come out sharper after downscaling.
Try it yourself#
Find the one bold thing
Open any page you've made and ask: what is the single most memorable element? If you can't name one, or you name five, simplify.