TastefulKit 0 views · 24h
← AI skills

Work with Design Systems — natdexterra

Audits or builds Figma design systems using separate inspect and build workflows: token compliance, component states, accessibility checks, detached instances, variable bindings, documentation and optional code-token export.

figmadesign-systemsaccessibilitydesign-review
View skill source ↗ Repository ↗

52 GitHub stars (repository-wide; checked Oct 23, 2026)

skills.sh installs: not checked View on skills.sh

When to use it

Use for pre-handoff component audits or systematic Figma library construction. Requires a connected remote Figma MCP server and the separate figma-use skill. Inspect is read-only and pauses before build; optional code export needs project file access. Component scores and computed checks are not a complete accessibility certification. Plan/seat limits apply; verify current limits with Figma rather than relying on bundled quotas. Unlike DESIGN.md Sync, this manages component quality and library construction, not just a document bridge. Not runtime-tested.

Compatible agents

Claude CodeCursorCodex

Installation

Upstream Claude Code setup: `git clone https://github.com/natdexterra/work-with-design-systems.git .claude/skills/work-with-design-systems`. Install the separate figma-use skill and connect the remote Figma MCP server first; keep the full scripts and references. Invoke `/work-with-design-systems`. README.md also documents Cursor and Codex folder placement. Optional code sync requires file-write access.

Review the source and instructions before installing in your agent.

License

MIT

Last checked Oct 23, 2026.

Pair this skill with a visual reference

A skill guides how your agent works; a design reference shows the direction you want. Choose an example for a specific job, such as the headline hierarchy or form layout, and keep your project's existing design rules explicit.

Start with design references you can inspect, then use our guide to briefing an AI coding agent to turn observations into requirements. If you need implementation components, compare UI libraries for your stack.

These pages are public. Browsing a skill does not install it, and TastefulKit's design-reference MCP tools do not search the AI-skill directory.