Work with Design Systems

Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync desi

52 stars 4 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems

Manual install

git clone --depth 1 https://github.com/natdexterra/work-with-design-systems.git /tmp/work-with-design-systems
mkdir -p ~/.claude/skills
cp -r /tmp/work-with-design-systems/. ~/.claude/skills/work-with-design-systems

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Work with design systems in Figma

Two modes in one skill: **inspect** (read-only quality audits with reports) and **build** (creating, fixing, extending components and tokens). Inspect produces structured reports. Build produces working Figma files. Build mode optionally extends to **Phase 6 (sync to code)** — generates `tokens.css`, an audit script, and AI rules file for the user's codebase. Phase 6 is off by default and only triggers on explicit user request.

Between inspect and build, the skill always pauses for the user to decide what to do with the report.

**Always pass `skillNames: "work-with-design-systems"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution.

## Prerequisites

**You MUST invoke the `figma-use` skill (Skill tool: `skill: "figma-use"`) before every `use_figma` call.** It contains critical Plugin API rules, gotchas, and script templates. Never call `use_figma` without it.

IMPORTANT: Before working with design systems in Figma, load the `working-with-design-systems/wwds.md` reference from the figma-use skill to understand key concepts and guidelines.

## Critical rules

These apply to BOTH modes — inspect and build.

1. **Work incrementally.** One component (or one variant set) per `use_figma` call. Validate after each step. This is the single most important practice for avoiding bugs.
2. **Never build on unvalidated work — match validation depth to change type.**

Read the full skill on GitHub

Details

Skill name: work-with-design-systems
Repository: natdexterra/work-with-design-systems
License: MIT
Repo updated: 20 October 2026

FAQ

What does the Work with Design Systems skill do?

How do I install the Work with Design Systems skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Work with Design Systems popular?

It lives in natdexterra/work-with-design-systems, which has 52 GitHub stars and 4 forks.

Related skills

Ak Elementor Studio

abanoubkhaliil/Ak-Elementor-Studio

AK Elementor Studio — built by Abanoub Khalil (akstudio.me). Converts ANY input — HTML/CSS/JS code, screenshots, images (PNG, JPG, WebP), PDFs, Figma exports, design mockups, wireframes, or any visual file — into fully structured Elementor page JSON templates importable into WordPress. Activate this skill whenever the user: uploads a design image or screenshot and wants it built in WordPress, shares HTML/CSS/JS to convert to Elementor, pastes code or attaches a file and mentions Elementor, WordPress, or page builder, says anything like "convert this to Elementor", "build this in WordPress", "t

Frontend & Design

Website Audit

appariciojunior/website-audit-skill

Comprehensive website content and UX audit. Use this skill whenever someone asks to review, audit, check, or improve a website, landing page, or web product. Triggers include: "audit my website", "review my site", "check my content", "is my website ready to launch", "what's wrong with my site", "content review", "UX review", "website feedback", "check for broken links", "check for lorem ipsum", "review my copy", or any request that involves evaluating an existing website's content quality, UX structure, copy, or readiness for launch. Also trigger when someone shares a URL and asks for feedback

Frontend & Design

Sbox

gavogavogavo/claude-sbox

Use when writing or modifying code for s&box, sbox, the Facepunch sandbox engine, or any Source 2 game project in C#. Triggers on mentions of s&box, sbox, sandbox game, Facepunch engine, Source 2 game, `.sbproj`, `.razor` with `PanelComponent`, `@inherits PanelComponent`, `Sandbox.Component`, `GameObject` + `Components.Get<T>`, `Scene.Trace`, `CharacterController` + `.Move()`, `SkinnedModelRenderer`, `NavMeshAgent`, `[Sync]`, `[Rpc.Broadcast]`, `[Property]`, `INetworkListener`, `ISceneEvent`, `PlayerController` in C#. Also triggers on any file with `using Sandbox;` or `using Sandbox.UI;` that

Frontend & Design

Feel

diip3sh/feel

Build UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, reac

Frontend & Design

Animate Text

sakuraoxo-clio/sakura-animate-text

Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks.

Frontend & Design

Exploded

diip3sh/exploded

Turn a real, rendered UI component (button, input, switch, card, menu, dialog, any React/Vue/HTML component) into a live, interactive exploded spec sheet. The component is pulled apart in isometric into its paint layers (elevation, surface, stroke, inner surfaces, content, focus ring), every state (hover, focus, pressed, disabled, invalid, on/off) can be switched, and every measurement (padding, radius, gap, type, shadow, ring) plus the design token the author actually wrote is read from the browser, never typed. Use this whenever someone wants component documentation, a design-system or Story

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.