design-bootstrap

Solid

Bootstrap a design system from a Figma file using MCP tools. Extracts token variables, identifies components, creates the directory structure, and generates scaffolded foundation docs and a component inventory. Use when starting a new project with a Figma design file. Do not use when the design system docs already exist or when there is no Figma file.

AI & Automation 6 stars 0 forks Updated 5 days ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
28
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

Act as a design system architect bootstrapping a new design system from a Figma file. Goal: Read a Figma file via MCP tools, extract design tokens (colors, typography, spacing, radii, elevation), identify components and screens, create the standard directory structure, and generate scaffolded foundation docs and a component inventory. This is the zero-state entry point for design system work, analogous to `project-bootstrap` for project-level memory. Mandatory context bootstrap (before any output): <!-- shared:mandatory-context-bootstrap --> - Read these sections in `WORKFLOW_OPERATING_SYSTEM.md` first: - `## LLM execution contract` - `## Editor mode policy` (mode definitions only; the tool mapping table is lazy-loaded in `wos/editor-mode-mappings.md` and needed only for non-Claude-Code tools) - `## Global output contract` (including **Adaptive handoff** and **Mode selection rule**) - `## Cross-cutting workflow guardrails` - **Bootstrap tiers (ADR-0025):** the light-weight commands (`branch-commit`, `what-next`, `where-we-at`, `slice-closure`, `compact-task-memory`) may skip `## Editor mode policy` good-fits lists and `## Cross-cutting workflow guardrails` sequencing heuristics, reading only the mode definitions and the core guardrail rules (routing memory, command-less input triage, official command names, material change, no-op). The full tier is measured at 9610 tokens: the combined size of the four always-read `WORKFLOW_OPERATING_SYSTEM.md` sections listed above...

Details

Author
Mozurok
Repository
Mozurok/fhorja.dev
Created
1 months ago
Last Updated
5 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

foundation-audit

Compare design tokens in code against foundation docs and optionally Figma variables to detect drift (tokens added without documentation, documented tokens not in code, value mismatches). Use when the design system has been evolving and you want to verify foundations are in sync. Do not use when no foundation docs exist (run design-bootstrap first).

6 Updated 5 days ago
Mozurok
AI & Automation Solid

component-spec

Generate a 15-section component specification from a Figma component using MCP tools (get_design_context, get_screenshot, get_variable_defs). Produces a spec doc matching the COMPONENT_SPEC.md template with anatomy, variants, sizes, states, accessibility, motion, haptics, platform, security, performance, and API sections pre-filled from Figma observations. Use when documenting a design system component. Do not use when the component has no Figma representation or when the spec already exists (edit manually instead).

6 Updated 5 days ago
Mozurok
Web & Frontend Listed

design-system-builder

Build a complete, AI-ready design system from scratch using Supa Palette (color), Typescale (typography), Figma Variables, and tokens.json. Trigger when the user says "build a design system", "set up design tokens", "I need a color system", "create a brand token", "typography scale", "design tokens from scratch", "token integration", "llms.txt", "make my design system AI-readable", "spec file", or "my UI looks inconsistent". Outputs: tokens.json, Tailwind config, Figma Variables (color + typography layers), design-system-doc.md (for humans), llms.txt (for AI agents), and a token audit script. Scope: this skill builds a NEW system from scratch. For auditing an existing Figma file, cataloguing naming drift, or back-filling docs for an existing system, use design:design-system.

1 Updated 1 months ago
hsiangyilu