skills.rest
Mozurok
MozurokCOMMUNITY
Explore all skills by this author →
GitHub

design-bootstrap

Extract Figma design tokens and components to scaffold design system documentation.

6|Updated Jul 10, 2026
Search Tags:#documentation#design system#scaffolding#figma#mcp#design tokens#component inventory
One-click install
npx skills add https://github.com/Mozurok/fhorja.dev --skill design-bootstrap-mozurok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-bootstrap
Source: https://github.com/Mozurok/fhorja.dev/tree/main/.claude/skills/design-bootstrap
Command: npx skills add https://github.com/Mozurok/fhorja.dev --skill design-bootstrap-mozurok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a design system from scratch means manually cataloging every color, type scale, and component in a Figma file, then creating dozens of documentation files by hand. This Skill automates that zero-state bootstrap by reading the Figma file directly and generating the full documentation structure. ## Core Features & Use Cases - Token Extraction: Pulls design variables (colors, typography, spacing, radii, elevation) from Figma via MCP tools and groups them into foundation docs. - Component Inventory: Identifies components and screens from Figma metadata, classifies them by atomic tier (atom, molecule, organism, layout), and records them in a traceable inventory. - Directory Scaffolding: Creates the canonical docs/research/ and docs/app/ trees with stub READMEs, templates, a screen map, and an open questions log. - Use Case: You receive a Figma file for a new product. Run this Skill to get a populated design system skeleton with extracted tokens, a component inventory, and a screen map, ready for per-component specification work. ## Quick Start Bootstrap a design system from my Figma file at https://figma.com/design/abc123/my-product into the current project workspace.

Frequently Asked Questions about design-bootstrap

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

FAQPage Schema
How do I create a design system from a Figma file?▼

Provide the Figma file URL and a workspace path, and the Skill extracts design variables, identifies components and screens, then scaffolds foundation docs, a component inventory, and a screen map under docs/research/ and docs/app/.

How to extract design tokens from Figma automatically?▼

The Skill calls the Figma MCP get_variable_defs tool to retrieve all design variables, groups them by foundation area (color, typography, spacing, radii, elevation), and writes one markdown file per area with tokens marked as confirmed or proposed.

What tools are required to run Figma design extraction?▼

You need Figma MCP tools available in the environment, specifically get_variable_defs, get_metadata, and get_libraries, plus standard file tools (Read, Write, Edit, Bash, Glob, Grep) to create the documentation tree.

When should I not use design system bootstrapping?▼

Do not use it when design system docs already exist in the project or when there is no Figma file to extract from. It is a zero-state entry point; re-running it over existing docs would duplicate the structure.

Does Figma extraction support multiple user personas?▼

Yes. Before extraction, the Skill prompts for the persona set (e.g., auth, operative, client, super-admin) and creates one screens folder per persona under docs/app/screens/. Single-persona products get a flat screens directory.

Related Skills

Explore More Design & Creative Skills→
allofmengallofmeng
12

figma-code-connect-components

Identify unmapped Figma components and fetch matching code components for Code Connect mappings.

Community
Advanced
Atypical-ConsultingAtypical-Consulting
2

ghs-backlog-next

Recommend the highest-impact backlog item across audited GitHub repositories.

Official
Intermediate
nextlevelbuildernextlevelbuilder
123.5k

brand

Manage brand voice, visual identity, and asset compliance with validation scripts.

Official
Intermediate
mrgreenishmrgreenish

figma-to-code-design-system

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

Community
Advanced