Design System Architect — Full Audit & Fixes18 skills
Claude Code skill for auditing design systems, identifying gaps with evidence, and applying fixes directly in Figma, with 3 operating modes for different scopes.
Design Systems Blueprint
Audit & Fix Design Systems at Scale
lsanchez-g2May 2026
Claude Code skill that audits design systems, flags issues with evidence, and applies fixes directly in Figma.
Design System AuditFigma IntegrationCode Export
Install Command
Run this command to deploy the blueprint to your environment.
What does this do
Design systems grow messy: tokens leak into hardcoded values, components lose coverage, UX patterns become inconsistent, and design-code drift widens. Manual audits are slow and subjective. You need systematic evidence-based gaps with production-ready fixes.
How It Works
You provide a Figma design system URL and choose your mode (full system, single component, or custom specs). The skill audits across 4 layers (technical, UX quality, accessibility, design intentionality), produces a prioritized action plan with concrete fixes, waits for your approval, applies changes directly in Figma via MCP, then exports production-ready code artifacts and living documentation.
Included Skill Groups
Key Features
Hardcore Mode (Full System)
5-phase workflow: audit all pages, components, tokens; dual report (human + machine JSON); execution + export; living documentation. Catches token scope pollution, hardcoded values, missing variants, UX inconsistencies, accessibility failures, and design POV weaknesses.
Soft Mode (Single Component)
8-point deep-dive: variant matrix completeness, state coverage, token bindings, accessibility, consistency, documentation, code connect status, design POV alignment. Fast feedback on component quality.
Spec Mode (Custom Requirements)
Capture your requirements (missing states, size constraints, token rules, custom variants), validate the component against your specs + standard checks, fix mismatches.
4-Layer Audit Engine
Technical (tokens, color, typography, drift), UX Quality (touch targets, motion, feedback, consistency, icons, dark mode), Accessibility (WCAG 2.2 AA/AAA), Design Intentionality (aesthetic POV, palette coherence, consistency).
Code Export Pipeline
W3C Design Tokens, CSS custom properties, TypeScript types, Storybook stories, audit history snapshots, and HANDOFF.md documentation — all production-ready and drop-in compatible.
Key Features
Hardcore Mode (Full System)
5-phase workflow: audit all pages, components, tokens; dual report (human + machine JSON); execution + export; living documentation. Catches token scope pollution, hardcoded values, missing variants, UX inconsistencies, accessibility failures, and design POV weaknesses.
Soft Mode (Single Component)
8-point deep-dive: variant matrix completeness, state coverage, token bindings, accessibility, consistency, documentation, code connect status, design POV alignment. Fast feedback on component quality.
Spec Mode (Custom Requirements)
Capture your requirements (missing states, size constraints, token rules, custom variants), validate the component against your specs + standard checks, fix mismatches.
4-Layer Audit Engine
Technical (tokens, color, typography, drift), UX Quality (touch targets, motion, feedback, consistency, icons, dark mode), Accessibility (WCAG 2.2 AA/AAA), Design Intentionality (aesthetic POV, palette coherence, consistency).
Code Export Pipeline
W3C Design Tokens, CSS custom properties, TypeScript types, Storybook stories, audit history snapshots, and HANDOFF.md documentation — all production-ready and drop-in compatible.
Tools in this Blueprint
About This Blueprint
- License
- MIT
- Industry
- Technology
- Skills
- 1 skills total
You might also like
Product IntelligenceMarketingSales
AI + Monitoring what AI influencers and... Playbook
Stay ahead of AI developments with automated daily digests of what key thought leaders are discussing—surfacing emerging tools and model changes before they impact your roadmap.
BD
Ben D.
Sr Dir, AI Engineering
AI + B2B marketing teams produce generic,... Playbook
Transform generic B2B marketing copy into revenue-focused messages that emphasize commercial outcomes. This embedded copywriter enforces discipline across email, landing pages, and thought leadership
DM
Danielle M.
Marketing specialist
G2 Review Intelligence to SC Discovery Brief
Equip Solutions Consultants with data-backed discovery questions and post-call validation by matching prospect pain points to trending G2 reviews—turn generic call prep into targeted, insight-driven c
MR
Matt R.
VP, Solutions and Success