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

•

Design Tools

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

About

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.

Key Features

3 GitHub stars
Metadata tracking and documentation via Wrangler issue integration
Choice of rapid templates (Minimal, Modern, Vibrant) or custom Q&A
Automated Figma file and component library creation via MCP
Multi-format token export including CSS, Tailwind, and W3C JSON
Auto-detection of missing design foundations during spec reviews

Use Cases

Initializing a standardized styling foundation for new frontend applications
Enforcing consistent UI patterns in projects identified with styling debt
Bridging Figma design assets with code-based tokens for existing projects

About

Key Features

3 GitHub stars
Metadata tracking and documentation via Wrangler issue integration
Choice of rapid templates (Minimal, Modern, Vibrant) or custom Q&A
Automated Figma file and component library creation via MCP
Multi-format token export including CSS, Tailwind, and W3C JSON
Auto-detection of missing design foundations during spec reviews

Use Cases

Initializing a standardized styling foundation for new frontend applications
Enforcing consistent UI patterns in projects identified with styling debt
Bridging Figma design assets with code-based tokens for existing projects