skills.rest
johnlindquist
johnlindquistCOMMUNITY
Explore all skills by this author โ†’
Website๐•@johnlindquistGitHub

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
One-click install
npx skills add https://github.com/johnlindquist/claude --skill design-johnlindquist
Or copy as Structured Prompt for Agentโ–ผ
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.

Related Skills

Explore More Design & Creative Skillsโ†’
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced