audit-design-system

Audit Figma screens for design-system integration drift and missing component usage.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill audit-design-system-yerzong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit-design-system
Source: https://github.com/yerzong/TEMP-LEAGUE/tree/main/.claude/skills/audit-design-system
Command: npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill audit-design-system-yerzong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs in Figma often drift away from the shared design system: teams rebuild buttons, cards, and nav bars as ad-hoc frames, hard-code colors instead of binding tokens, and duplicate structures that should be reusable components. This Skill inspects a Figma node and reports concrete, evidence-backed findings about that drift. ## Core Features & Use Cases - Structural drift detection: Flags plain frames that should be component instances, repeated sibling structures that should collapse into one primitive, and hard-coded values where tokens should apply. - Replacement suggestions: Uses design-system search to propose credible replacement components from the audited library when a custom primitive is found. - Dual output formats: Produces raw JSON for machine-consumed review surfaces or a human-readable markdown report with priorities, confidence scores, and node anchors. - Use Case: Before shipping a new screen, paste its Figma link to verify it uses shared components and bound tokens, then route confirmed findings to a fix or apply skill for remediation. ## Quick Start Audit this Figma screen for design-system integration issues: https://figma.com/design/<fileKey>/<name>?node-id=<nodeId>

Frequently Asked Questions about audit-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a Figma screen for design-system drift?▼

Provide a full Figma URL or a fileKey and nodeId to the audit. The skill pulls design context, screenshots, and variable bindings via Figma MCP read tools, then reports structural findings like non-instance frames and hard-coded values.

What design issues does a Figma design-system audit flag?▼

It flags shared primitives rebuilt as ad-hoc frames, repeated sibling structures that should be one component, hard-coded colors or geometry beside tokenized peers, variant drift inside components, and custom-built global navigation patterns.

Can the audit suggest replacement components from my Figma library?▼

Yes. After identifying a likely custom primitive, it runs search_design_system to find a credible matching component family. Suggestions are only included when the match is structurally plausible, not based on screenshot similarity alone.

Does the Figma audit output JSON or markdown?▼

Both. Explicit user requests win, otherwise JSON is the default for Codex Desktop and machine-consumed review surfaces, while markdown reports are the default for CLI and chat-style environments. Ambiguous environments default to markdown.

What kinds of issues does the design-system audit not report?▼

It skips purely aesthetic preferences, copywriting decisions, screen-specific layout choices, and one-off compositions whose primitives are already componentized. Every finding requires concrete structural evidence from Figma, not visual taste.