claude2figma-design-system-harness

Enforces Design System compliance in AI-generated Figma files via token binding and component instances.

3|Updated May 16, 2026

Search Tags:#design system #claude code #figma #ui compliance #mcp workflow #token binding #component instances

Ready to run

npx skills add https://github.com/Aradotso/design-skills --skill claude2figma-design-system-harness

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claude2figma-design-system-harness
Source: https://github.com/Aradotso/design-skills/tree/main/skills/claude2figma-design-system-harness
Command: npx skills add https://github.com/Aradotso/design-skills --skill claude2figma-design-system-harness

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic-ai/figma-mcp.

What problem does it solve?

AI-assisted design in Figma often produces layouts and styles that drift away from your Design System by hardcoding colors, spacing, and typography instead of binding everything to tokens and component instances.

Core Features & Use Cases

Token-binding enforcement for visual properties: Rejects or prevents raw hardcoded values and ensures fills/text/effects reference Variables and Styles.
Library-first component construction: Prioritizes connected Design System libraries, creates instances (not primitives), applies valid variant properties, and maintains component structure.
Preflight-driven compliance workflow: Runs a session-start preflight that loads a Token Map and a Component Registry, then guides the rest of the build with QA verification.
Reference-to-Design-Brief translation: Converts screenshots/references into a structured brief so the build stays aligned with DS constraints.

Quick Start

Run the preflight step before starting any Figma edits so the Token Map and Component Registry are loaded and the compliance rules are enforced for the rest of the session.

Frequently Asked Questions about claude2figma-design-system-harness

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

FAQPage Schema

How do I keep AI-generated Figma designs compliant with my design system?▼

To keep AI-generated Figma designs compliant, you must enforce token binding for visual properties and use component instances instead of primitives. This ensures fills, text, and effects reference existing Variables and Styles rather than hardcoded values.

Why does Claude Code hardcode colors and spacing when editing Figma via MCP?▼

Claude Code hardcodes colors and spacing in Figma because it lacks default design system awareness. Running a preflight workflow that loads a Token Map and Component Registry before editing enforces compliance and prevents raw hardcoded values.

How to convert a design reference into a Figma component using Claude Code?▼

To convert a design reference into a Figma component, translate screenshots into a structured design brief first. Then, execute a library-first lookup and creation loop to apply valid variant properties and maintain correct component structure.

Do I need the Figma MCP to enforce design system token binding?▼

Yes, you need the Figma MCP to enforce design system token binding. It acts as the bridge for Claude Code to operate on Figma, allowing a preflight workflow to load tokens, validate writes, and manage component instances.

Can I use component instances instead of primitives when generating UI with AI?▼

Yes, you can use component instances instead of primitives when generating UI with AI. A DS-aware preflight workflow prioritizes connected libraries to create instances, applies valid variant properties, and maintains strict component structure.

What is a token QA workflow in Figma?▼

A token QA workflow in Figma validates that visual properties reference Variables and Styles after writes. It uses a preflight-loaded Token Map to reject hardcoded values and verify design system compliance for AI-generated files.