Agent skills for design teams
The Claude skills my AI-forward design team runs on Figma work, free to use: download one and save it as .claude/skills/<name>/SKILL.md.
Build a design library
Run the whole pipeline with Library builder, or use each step on its own.
Library builder
Runs the whole pipeline and stops for your review after every phase.
Runs these 4 in order: Color system,Typography kit,Component library,Icon set
Download Library builder skilllibrary-builder.mdStep 1 of 4 in Library builder
Color system
Turns brand swatches into full ramps, status colors and light/dark tokens as Figma variables.
Download Color system skillbuild-color-system.mdStep 2 of 4 in Library builder
Typography kit
Explores type pairings, stress-tests the winner on a real page, then applies it everywhere.
Download Typography kit skilltypography-kit.mdStep 3 of 4 in Library builder
Component library
Builds component sets on a token architecture, checking WCAG 2.2 contrast on every variant.
Download Component library skillcomponent-library.mdStep 4 of 4 in Library builder
Icon set
Cleans up a pasted icon set into named components that swap into buttons, inputs and alerts.
Download Icon set skilladd-icon-set.md
Accessibility
Accessibility you can measure, from the palette to the live site.
Contrast audit
Audits a fixed palette against every surface it sits on, gradients included, without changing it.
Download Contrast audit skillcontrast-audit.mdKeyboard accessibility spec
Maps the tab order of a screen and writes the keyboard and ARIA spec developers build from.
Download Keyboard accessibility spec skillkeyboard-accessibility-spec.mdSite accessibility audit
Runs a 30-point WCAG 2.2 AA audit on a live site in a real browser, with code fixes for each failure.
Download Site accessibility audit skillaccessibility-audit.md
Handoff and review
For the moments design meets everyone else.
Documentation
Annotates a frame for developers, business analysts and designers, each in the detail they need.
Download Documentation skilldocumentation.mdComponent harmony test
Shows how color variations work together on a real screen in the fewest comparison screens.
Download Component harmony test skillcomponent-harmony-test.md