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

Ready to run

npx skills add https://github.com/samjhecht/wrangler --skill design-system-setup

💬 Prompt for ChatGPT / Claude Chat▼

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.