design-intelligence

Generate design tokens, color palettes, typography scales, and component inventories from project context.

96|9|Updated Mar 21, 2026

Search Tags:#typography #tailwind #design-system #spacing #design-tokens #color-palette

Ready to run

npx skills add https://github.com/c0x12c/ai-toolkit --skill design-intelligence-c0x12c

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-intelligence
Source: https://github.com/c0x12c/ai-toolkit/tree/main/.codex/skills/design-intelligence
Command: npx skills add https://github.com/c0x12c/ai-toolkit --skill design-intelligence-c0x12c

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with inconsistent visuals and scattered token definitions when starting new projects. This skill bootstraps a complete design system by generating design tokens, typography scales, color palettes, and a component inventory from your project context.

Core Features & Use Cases

Generate a complete token set (colors, typography, spacing)
Output formats: token reference doc, Tailwind config, CSS variables
Create a component inventory tailored to project type
Use cases: starting a new project, adapting to brand constraints, rapid design system bootstrap

Quick Start

Provide your project context and let the tool generate tokens, typography, and a component inventory to bootstrap your design system.

Frequently Asked Questions about design-intelligence

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

FAQPage Schema

How do I generate design tokens and a typography scale for a new project?▼

To generate design tokens and a typography scale, provide your project context to bootstrap a complete design system. The tool outputs a token reference document, a Tailwind config snippet, and CSS variables aligned to your constraints.

What's the best way to bootstrap a design system with Tailwind?▼

The best way to bootstrap a design system with Tailwind is to generate a Tailwind config snippet directly from your project context. This process creates consistent color palettes, typography scales, and spacing systems.

Can I use existing brand constraints to generate a color palette and spacing system?▼

Yes, you can adapt existing brand constraints to generate a color palette and spacing system. The tool processes your project context to output customized CSS variables and design tokens that align with your current brand guidelines.

How do you create a component inventory tailored to a specific project type?▼

Creating a component inventory tailored to a project type requires analyzing your project context during the design system bootstrap. This generates a structured list of UI components alongside your tokens, typography scales, and color palettes.

Does this design system bootstrap approach output CSS variables or only a Tailwind config?▼

This design system bootstrap outputs both CSS variables and a Tailwind config snippet. It additionally provides a token reference document, ensuring your color palettes, typography scales, and spacing systems are fully documented.