What is the difference between the Minimal and Comprehensive presets?

Minimal focuses strictly on core colors and typography for small projects, while Comprehensive adds semantic naming, animation scales, and full UI documentation.

How does it handle dark mode?

The setup allows you to define color modes and generates the necessary CSS media queries or data-attribute selectors to support light and dark themes automatically.

Does this skill support existing Tailwind CSS projects?

Yes, it automatically detects your tailwind.config.js and can generate extensions that integrate seamlessly with your existing theme.

Can I export tokens to TypeScript for use in styled-components?

Absolutely. The skill can generate a TypeScript/JavaScript module that exports your design tokens as typed constants for any CSS-in-JS solution.

Design System Setup

Name: Design System Setup
Author: itsimonfredlingjack

byitsimonfredlingjack

0•

Design Tools

Initializes a robust design system foundation with configurable tokens, UI patterns, and multi-format documentation.

Design System Setup is a specialized Claude Code skill that automates the creation of a scalable frontend architecture. It guides users through an interactive configuration process to define brand colors, typography scales, spacing logic, and component patterns. By detecting your existing tech stack—such as Tailwind CSS or TypeScript—the skill generates production-ready tokens in multiple formats including CSS variables, Tailwind configurations, and JSON. It ensures design consistency across large-scale projects while providing comprehensive documentation for developers and designers alike.

Key Features

01Multi-format output including CSS Custom Properties, Tailwind, and TypeScript

02Interactive token configuration for brand colors, typography, and spacing

03Comprehensive documentation generation including UI guidelines and usage patterns

04Automatic detection and integration with existing project styling frameworks

05Support for Light, Dark, and System-aware color modes

060 GitHub stars

Use Cases

01Standardizing UI consistency across a growing team of developers

02Migrating hardcoded styles into a formal, documented design system

03Bootstrapping a new project with a professional-grade token architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add itsimonfredlingjack/codex-dev-plugin design-system-setup

For use in Claude.ai and ChatGPT

Download Skill