Does this skill require a Figma account?

Yes, you need a Figma Personal Access Token and the Figma MCP server configured to allow the skill to create design files automatically.

Can I use this with Tailwind CSS?

Absolutely. The skill includes a specific export option for Tailwind configurations, mapping your design tokens directly to a tailwind.config.js file.

How does auto-detection work?

The skill scans project specifications and Wrangler metadata; if it finds UI requirements without an established design system, it triggers a setup prompt.

What kind of templates are available?

It includes three primary templates: Minimal (for MVPs), Modern (for enterprise tools), and Vibrant (for consumer-facing creative brands).

Design System Setup

Name: Design System Setup
Author: bacchus-labs

bybacchus-labs

•

デザインツール

Initializes comprehensive design systems for frontend projects using guided Q&A workflows, pre-built templates, and automated Figma integration.

This skill streamlines the creation of design foundations by automatically detecting missing styling systems during specification reviews. It offers two distinct paths: a rapid template-based setup with AI refinement or a guided Q&A to define custom color moods, typography, and spacing. By integrating directly with Figma via MCP and exporting tokens as CSS variables, Tailwind configurations, or W3C-compliant JSON, it ensures a seamless bridge between design and code while maintaining a persistent audit trail through Wrangler issues.

主な機能

013 GitHub stars

02Metadata tracking and documentation via Wrangler issue integration

03Choice of rapid templates (Minimal, Modern, Vibrant) or custom Q&A

04Automated Figma file and component library creation via MCP

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

06Auto-detection of missing design foundations during spec reviews

ユースケース

01Initializing a standardized styling foundation for new frontend applications

02Enforcing consistent UI patterns in projects identified with styling debt

03Bridging Figma design assets with code-based tokens for existing projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bacchus-labs/wrangler design__design-system-setup

For use in Claude.ai and ChatGPT

Download Skill