design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

24|6|Updated Dec 19, 2025

Search Tags:#typography #design #css #tailwind #tokens

Ready to run

npx skills add https://github.com/johnlindquist/claude --skill design-johnlindquist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/johnlindquist/claude/tree/main/skills/design
Command: npx skills add https://github.com/johnlindquist/claude --skill design-johnlindquist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design system and token management to maintain visual consistency across products.

Core Features & Use Cases

Manage color tokens, typography, spacing
Export tokens to CSS, JSON, Tailwind config
Audit and review design systems

Quick Start

Define a CSS variables block for a core color scheme and export as Tailwind config.

Frequently Asked Questions about design

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

FAQPage Schema

How do I manage design tokens across CSS, JSON, and Tailwind config?▼

Design tokens let you centralize color, typography, and spacing definitions in one place, then export them to CSS variables, JSON, or Tailwind config formats. This keeps your entire design system synchronized across platforms without manual duplication.

Can I export design tokens to Tailwind config?▼

Yes. Define your color palettes, typography scales, and spacing scales as design tokens, then export directly to Tailwind configuration. This ensures your Tailwind theme stays consistent with your broader design system.

What's the best way to maintain design system consistency across products?▼

Design tokens enforce consistency by defining a single source of truth for colors, typography, spacing, and component tokens. Audit and export these tokens to CSS, JSON, and SCSS/JS formats across all your products.

How do I audit and review a design system?▼

Audit design tokens by reviewing your defined color palettes, typography systems, spacing scales, and component tokens to catch inconsistencies. Export audits to multiple formats for stakeholder review and validation.

Can I convert between CSS variables, JSON tokens, and Tailwind config?▼

Yes. Design token workflows support conversion and export across CSS variables, JSON token formats, and Tailwind config, enabling seamless integration with different tools and platforms in your design pipeline.

Do I need to know CSS or code to set up design tokens?▼

Design tokens work with CSS variables, JSON, and Tailwind config formats. Familiarity with at least one format helps, but the token definitions themselves are structured data that abstract away complex CSS or configuration syntax.