skills.rest
mrgreenish
mrgreenishCOMMUNITY
Explore all skills by this author →
GitHub

setup-design-system

Bootstraps bidirectional Figma↔code design systems by inspecting files via MCP and scaffolding skills.

Updated Apr 14, 2026
Search Tags:#automation#scaffolding#figma#mcp#design-system#tokens.json
One-click install
npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill setup-design-system-mrgreenish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-design-system
Source: https://github.com/mrgreenish/design-system-skill-maker/tree/main/.claude/skills/setup-design-system
Command: npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill setup-design-system-mrgreenish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Sets up a repeatable, end-to-end workflow to bootstrap a bi-directional Figma ↔ code design system in a target project. It inspects a Figma file via Dev Mode MCP, detects the CSS framework, scaffolds two skills (figma-to-code-design-system and code-to-figma-design-system), wires hooks, seeds tokens.json, writes initial output files, and auto-generates DESIGN.md to document the system.

Core Features & Use Cases

  • Inspects a Figma file via MCP to extract variable structures, text styles, and effect styles.
  • Scaffolds two operational skills into the project and wires them with hooks.
  • Seeds tokens.json from the current Figma state and generates initial CSS/Tailwind/SCSS output as appropriate.
  • Auto-generates DESIGN.md to reflect the discovered design system.

Quick Start

Run setup-design-system in your project to initialize Figma ↔ code synchronization scaffolding and seed tokens.json.

Frequently Asked Questions about setup-design-system

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

FAQPage Schema
How do I sync Figma variables with code using a design system?▼

To sync Figma variables with code, this Skill inspects the Figma file via Dev Mode MCP, scaffolds two operational skills, and seeds a tokens.json file to establish a bi-directional design system.

What's the best way to bootstrap a design system from Figma into a new project?▼

The best way to bootstrap a design system from Figma is to run this Skill in your project root, which scaffolds the necessary hooks, seeds tokens.json, and generates initial output files.

Does this Figma design system setup support Tailwind and SCSS output formats?▼

Yes, this Figma design system setup detects the CSS framework and generates initial CSS, Tailwind, or SCSS output files as appropriate based on your project's current configuration.

How do I document a Figma design system automatically in my codebase?▼

To document a Figma design system automatically, this Skill extracts variable structures and text styles, then auto-generates a DESIGN.md file reflecting the discovered system.

When should I re-run the Figma to code design system scaffolding?▼

You should re-run the Figma to code scaffolding when the Figma file structure changes meaningfully, ensuring tokens.json, figma-map.json, and related caches are updated accurately.

Do I need Dev Mode MCP to establish a Figma and code design system?▼

Yes, you need Dev Mode MCP to establish a Figma and code design system, because this Skill relies on MCP to inspect the Figma file and extract variable structures and effect styles.

Related Skills

Explore More Design & Creative Skills→
mrgreenishmrgreenish

figma-to-code-design-system

Sync Figma design tokens into DTCG tokens.json and regenerate CSS, Tailwind, or SCSS outputs.

Community
Advanced
mrgreenishmrgreenish

code-to-figma-design-system

Synchronize tokens.json with Figma variables and generate design system documentation pages.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
Bigme2020Bigme2020

figma-rule

Generate repository-specific Figma MCP rules from codebase conventions.

Community
Intermediate