What file formats does this skill export?

The skill can export design tokens as CSS custom properties, a tailwind.config.js theme extension, or W3C-compliant Design Tokens JSON.

Can I use this on an existing project?

Absolutely. While it auto-detects missing systems, you can manually invoke it to establish a consistent styling foundation for projects with inconsistent patterns.

How is the design system metadata stored?

Metadata, including the Figma file URL and token formats, is stored in a dedicated Wrangler issue to provide a persistent audit trail for the project.

Does it require a Figma account?

Yes, it requires a Figma Personal Access Token and the Figma MCP server to be configured in your environment to create design files automatically.

What are the available templates?

It includes three specialized templates: Minimal (for MVPs), Modern (enterprise-ready with 20+ components), and Vibrant (for creative consumer applications).

Design System Setup

Name: Design System Setup
Author: samjhecht

bysamjhecht

•

Design Tools

Initializes and exports comprehensive design systems through guided workflows, Figma integration, and automated token generation.

The Design System Setup skill streamlines the foundational phase of frontend development by establishing a consistent visual language. It automatically detects projects lacking styling standards and offers two distinct paths: a rapid template-based setup for speed or a guided Q&A workflow for custom branding. By integrating directly with Figma via MCP and exporting tokens to CSS, Tailwind, or JSON, it ensures a seamless bridge between design and code while maintaining metadata within Wrangler for long-term project traceability.

Key Features

01Three pre-built design templates: Minimal, Modern, and Vibrant

021 GitHub stars

03Guided Q&A workflow for custom color palettes and typography selection

04Automated detection of missing design systems during specification reviews

05Multi-format token export including CSS Variables, Tailwind CSS, and W3C JSON

06Automatic Figma file creation and synchronization via Figma MCP

Use Cases

01Standardizing styling across a legacy project that uses inconsistent CSS patterns

02Starting a new frontend project that requires a professional design foundation

03Bridging the gap between Figma design files and developer implementation using automated tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samjhecht/wrangler design__design-system-setup

For use in Claude.ai and ChatGPT

Download Skill