How do I install the Work With Design Systems skill?

Run npx skillmds add podo/work-with-design-systems in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Work With Design Systems safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Work With Design Systems?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Work With Design Systems free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Work With Design Systems?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Work With Design Systems by podo — Agent Skill

Name: Work With Design Systems
Rating: 4.666666666666667 (3 reviews)
Author: podo

Work With Design Systems

Two-mode Figma design system skill — Inspect mode (read-only WCAG audit, component scoring, handoff docs) and Build mode (six-phase creation with variable bindings, slots, descriptions), with optional sync to tokens.css + AI rules.

podo cbb3535 2 files · 2.5 KB Updated Sep 9, 2026

File contents

work-with-design-systems

Catalogue stub — full skill: natdexterra/work-with-design-systems

Decision tree

Is the full skill already installed? Check whether the skill at this location still has a das: block:
- Global: grep -q "^das:" ~/.agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- Project: grep -q "^das:" .agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- No das: block → full skill installed, invoke it and proceed
- das: block present → go to step 2

Detect scope, then install:

To detect scope:

[ -e ~/.agents/skills/work-with-design-systems ] && echo "global" || echo "project"

Global (installed with -g):

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

Project (installed without -g):

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

Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

Skill name: work-with-design-systems
Triggers: "work with design systems", "Figma inspect mode", "build design system Figma", "WCAG component audit"

What it does

Two operational modes for Figma design systems. Inspect mode: read-only analysis — WCAG accessibility audit, component quality scoring, and developer handoff documentation generation. Build mode: guided six-phase design system creation covering variable bindings, component slot architecture, and descriptions, with optional export to tokens.css and AI-readable rules files.

When NOT to use

Single component work not requiring system architecture
General design work without a design system — use mobile-app-design or ui-craft
Token enforcement during Figma writes — use claude2figma

---name: work-with-design-systemsdescription: Two-mode Figma design system skill — Inspect mode (read-only WCAG audit, component scoring, handoff docs) and Build mode (six-phase creation with variable bindings, slots, descriptions), with optional sync to tokens.css + AI rules.--- # work-with-design-systems > Catalogue stub — full skill: [natdexterra/work-with-design-systems](https://github.com/natdexterra/work-with-design-systems) ## Decision tree 1. **Is the full skill already installed?** Check whether the skill at this location still has a `das:` block: - Global: `grep -q "^das:" ~/.agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - Project: `grep -q "^das:" .agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - No `das:` block → full skill installed, invoke it and proceed - `das:` block present → go to step 2 2. **Detect scope, then install:** To detect scope: ```bash [ -e ~/.agents/skills/work-with-design-systems ] && echo "global" || echo "project" ``` **Global** (installed with `-g`): ```bash npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -g -y ``` **Project** (installed without `-g`): ```bash npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -y ``` > **Claude Code:** send either command as a chat message starting with `!` to run it without leaving the conversation. ## Invoke after install - Skill name: `work-with-design-systems` - Triggers: "work with design systems", "Figma inspect mode", "build design system Figma", "WCAG component audit" ## What it does Two operational modes for Figma design systems. **Inspect mode**: read-only analysis — WCAG accessibility audit, component quality scoring, and developer handoff documentation generation. **Build mode**: guided six-phase design system creation covering variable bindings, component slot architecture, and descriptions, with optional export to `tokens.css` and AI-readable rules files. ## When NOT to use - Single component work not requiring system architecture - General design work without a design system — use `mobile-app-design` or `ui-craft` - Token enforcement during Figma writes — use `claude2figma`

Frequently asked questions