skills.rest
cropsgg
cropsggCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design system with color, typography, spacing, tokens, and dark mode.

15|5|Updated May 17, 2026
Search Tags:#typography#tokens#design-system#dark-mode#color-palette#design-ops
One-click install
npx skills add https://github.com/cropsgg/skills --skill design-consultation-cropsgg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/cropsgg/skills/tree/main/skills/planning/design-consultation
Command: npx skills add https://github.com/cropsgg/skills --skill design-consultation-cropsgg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build a complete design system foundation from scratch by generating color palettes, typography scales, a spacing system, and component tokens, with a dark mode strategy and DESIGN.md as the single source of truth.

Core Features & Use Cases

  • 11-step color palettes optimized with OKLCH-style tokens and a scalable neutral and semantic color system.
  • Typography scale with modular steps, ratios, and accessible line heights, plus a token-based deployment in CSS or Tailwind.
  • Spacing system and component tokens to enforce design consistency and reduce drift across teams.
  • Dark mode strategy with token swaps and contrast-aware surfaces, ready for production use.
  • Outputs: a DESIGN.md reference document and token files ready for integration.

Quick Start

Run the design-consultation skill to generate a complete design system including color, typography, spacing, tokens, and dark-mode guidance, producing DESIGN.md and token files.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I build a tokenized design system from scratch for a greenfield project?▼

To build a tokenized design system from scratch, generate color palettes, typography scales, spacing systems, and component tokens, outputting a DESIGN.md reference and token files for design-to-code handoffs.

What is the best way to create a dark mode strategy using design tokens?▼

The best way to create a dark mode strategy is by using token swaps and contrast-aware surfaces, generating semantic color systems that automatically adapt across web platforms for production use.

How do I generate a scalable color palette and typography scale with OKLCH tokens?▼

Generate a scalable color palette and typography scale by creating 11-step color palettes optimized with OKLCH-style tokens, paired with modular typography steps, ratios, and accessible line heights.

Can I use this design system generation process for CSS and Tailwind token deployment?▼

Yes, the design system generation process supports CSS and Tailwind token deployment, producing token files and a DESIGN.md single source of truth ready for direct integration into web platforms.

Does a token-based design infrastructure help reduce design drift across teams?▼

A token-based design infrastructure reduces design drift across teams by enforcing design consistency through a standardized spacing system and component tokens defined in the generated DESIGN.md reference.

Related Skills

Explore More Design & Creative Skills→
LeastBitLeastBit
560

brand-guidelines

Apply Anthropic brand colors, fonts, and visual identity to presentations.

Community
Basic
xrehpicxxrehpicx
2

tailwind-design-system

Build and maintain Tailwind CSS v4 design systems with design tokens and responsive patterns.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
boludo00boludo00
80

shadcn-ui

Implement shadcn/ui accessible components using Radix UI primitives for React.

Community
Intermediate