skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

design-system-generator

Generate design system tokens, Tailwind config, and documentation templates.

Updated Aug 23, 2026
Search Tags:#design system#color palette#token generation#css variables#typography scale#tailwind config
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill design-system-generator-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-generator
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/design-system-generator
Command: npx skills add https://github.com/andersoncollab/design-agent --skill design-system-generator-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams avoid inconsistent design decisions by turning brand and aesthetic inputs into a cohesive, implementation-ready design system with tokens and documentation.

Core Features & Use Cases

  • Guided 5-phase workflow: Runs Discovery, Aesthetic Direction, Typography, Color System, then Tokens & Components to produce a structured system.
  • Production-ready token outputs: Generates CSS custom properties plus Tailwind extensions for colors, typography scale, spacing, radii, shadows, and component references.
  • Documentation template generation: Produces a 02-DESIGN-SYSTEM.md template so the system is maintained as living specs.
  • Token naming & organization: Structures global → component → instance token layers to keep decisions scalable and understandable.

Quick Start

Run the skill with your project brief and prompts like “build design system for a new SaaS product” to receive token exports, Tailwind config extensions, and the filled design-system documentation template.

Frequently Asked Questions about design-system-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a complete design system with CSS variables and a Tailwind config?▼

To generate a design system, input your project brief to orchestrate discovery, typography, and color phases, producing CSS custom properties, Tailwind extensions, and a structured documentation template for implementation.

What is the best way to structure design tokens for a multi-product SaaS application?▼

Structuring design tokens for a SaaS application involves organizing them into global, component, and instance layers to ensure scalable, consistent aesthetic decisions and implementation-ready CSS variables across multiple products.

How do I create a typography scale and color palette that meets accessibility standards?▼

Creating an accessible typography scale and color palette requires running dedicated aesthetic and color system generation phases that align brand inputs with accessible contrast ratios before exporting final tokens.

Can I use this design system generator for a greenfield project rebuild?▼

Yes, you can use this design system generator for greenfield projects and design system rebuilds by running a guided five-phase workflow that transforms initial aesthetic direction into production-ready tokens.

What documentation format is exported when generating these design tokens?▼

The design system generation exports a 02-DESIGN-SYSTEM.md documentation template, ensuring your design system is maintained as a living specification alongside CSS variables and Tailwind configuration extensions.

Do I need separate skills for aesthetic direction and color system generation?▼

Yes, the workflow requires running dependent skills for aesthetic direction, typography pairing, and color system generation before orchestrating them into final CSS variables and component reference specifications.

Related Skills

Explore More Design & Creative Skills→
adminsairolotech-bitadminsairolotech-bit

branding-generator

Generate three brand directions with color palettes, typography, and logo concepts.

Community
Advanced
marktantongcomarktantongco

frontend-design

Transform UI specifications into React, Next.js, or Tailwind frontend code with token generation and accessibility validation.

Community
Advanced
duc01226duc01226

design-system

Generate design tokens and slide templates from a three-layer token architecture.

Community
Advanced
guideopsguideops

power

Implement a dark aesthetic design system with typography and color scales.

Community
Intermediate