skills.rest
samjhecht
samjhechtCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-setup

Automate design-system setup with template or Q&A paths and token exports.

4|1|Updated Oct 29, 2025
Search Tags:#templates#figma#mcp#tokens#design-system
One-click install
npx skills add https://github.com/samjhecht/wrangler --skill design-system-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-setup
Source: https://github.com/samjhecht/wrangler/tree/main/skills/design__design-system-setup
Command: npx skills add https://github.com/samjhecht/wrangler --skill design-system-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the setup of design systems for projects lacking a design foundation, offering template-based or guided Q&A paths, with Figma MCP integration and token export.

Core Features & Use Cases

  • Auto-detects missing design systems during spec review
  • Two paths: Template + AI Refinement or Guided Q&A Setup
  • 3 pre-built templates (Minimal, Modern, Vibrant) with token export
  • Figma file creation and token export in multiple formats
  • Metadata tracking and integration with wrangler

Quick Start

  • No design system found; choose between Template + AI Refinement or Guided Q&A Setup

Frequently Asked Questions about design-system-setup

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

FAQPage Schema
How do I set up a design system for a project that doesn't have one?▼

Design-system setup automates creation by detecting missing systems and offering two paths: template-based setup with AI refinement or guided Q&A customization. Choose the approach that fits your timeline and design preferences.

Can I export design tokens to CSS variables or Tailwind config?▼

Yes, design-system setup exports tokens in multiple formats: CSS variables, Tailwind config, or design-tokens JSON. Select your format during setup and integrate directly into your project.

Does this work with Figma for creating design files?▼

Yes, the Skill integrates with Figma via MCP to create design files automatically. Tokens sync with your Figma workspace during setup and export.

What are the pre-built design system templates available?▼

Three templates are included: Minimal for lightweight systems, Modern for contemporary designs, and Vibrant for bold color-driven systems. Each exports ready-to-use tokens.

How does the Skill detect if my project needs a design system?▼

Design-system setup auto-detects missing systems during specification review of your project. If gaps are found, it prompts you to choose between template or custom Q&A setup paths.

Where does the Skill store design system metadata after setup?▼

Metadata is stored in wrangler issues for tracking and future reference. This enables version control and team collaboration on design system changes.

Related Skills

Explore More Design & Creative Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
Fire-ants-never-dieFire-ants-never-die

orchestrator-designer

Generate design tokens and component specifications for the Claude Orchestrator UI.

Official
Intermediate
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
moughamirmoughamir

tailwindcss-plugins

Configure Tailwind CSS official plugins and create custom utilities via the plugin API.

Community
Intermediate