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

•

デザインツール

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.

主な機能

Three pre-built design templates: Minimal, Modern, and Vibrant
1 GitHub stars
Guided Q&A workflow for custom color palettes and typography selection
Automated detection of missing design systems during specification reviews
Multi-format token export including CSS Variables, Tailwind CSS, and W3C JSON
Automatic Figma file creation and synchronization via Figma MCP

ユースケース

Standardizing styling across a legacy project that uses inconsistent CSS patterns
Starting a new frontend project that requires a professional design foundation
Bridging the gap between Figma design files and developer implementation using automated tokens

概要

主な機能

Three pre-built design templates: Minimal, Modern, and Vibrant
1 GitHub stars
Guided Q&A workflow for custom color palettes and typography selection
Automated detection of missing design systems during specification reviews
Multi-format token export including CSS Variables, Tailwind CSS, and W3C JSON
Automatic Figma file creation and synchronization via Figma MCP

ユースケース

Standardizing styling across a legacy project that uses inconsistent CSS patterns
Starting a new frontend project that requires a professional design foundation
Bridging the gap between Figma design files and developer implementation using automated tokens