skills.rest
lucabattistini
lucabattistiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Generate a design token specification document from spacing, typography, and color primitives.

Updated Feb 28, 2026
Search Tags:#typography#design system#color palette#tokens#spacing scale#design primitives
One-click install
npx skills add https://github.com/lucabattistini/concinnitas --skill design-system-lucabattistini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/lucabattistini/concinnitas/tree/main/skills/design-system
Command: npx skills add https://github.com/lucabattistini/concinnitas --skill design-system-lucabattistini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the definition of design system primitives, including spacing, typography, color, and motion, ensuring consistency and scalability in digital products.

Core Features & Use Cases

  • Automated Token Generation: Creates a comprehensive design token specification based on user-defined scales and ratios.
  • Consistency Enforcement: Establishes a clear system for spacing, typography, and color usage.
  • Use Case: A design team needs to establish a robust design system for a new product. This Skill guides them through defining spacing units, type scales, color palettes, and semantic naming conventions, generating a foundational 04-system.md artifact.

Quick Start

Run the design-system skill to define your spacing scale, typography, and color primitives.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate design tokens and a complete design system specification?▼

To generate design tokens, you define your spacing scales, typography ratios, and color logic. The system then automates the creation of a comprehensive design token specification document, establishing consistency across your digital product.

What are design primitives and how do they establish consistency in digital products?▼

Design primitives are foundational elements like spacing units, typography scales, and color palettes. Establishing a clear system for these primitives ensures visual consistency and scalability across a design team's entire product workflow.

Can I use this to create semantic naming conventions for a color palette?▼

Yes, you can define semantic naming conventions for your color palette alongside spacing and typography scales. This establishes clear color logic and ensures design tokens are applied consistently throughout your digital product.

Does the generated design token specification support visual output with Paper.design?▼

Yes, the generated design token specification supports integration with Paper.design. This allows you to produce visual output of your token sheets directly from your defined spacing, typography, and color primitives.

What is the best way to define a spacing scale and typography scale for a new product?▼

The best way to define spacing and typography scales is by using a guided system that automates token generation based on your user-defined scales and ratios. This generates a robust foundational design system artifact for your new product.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-01-brief

Generate a structured 7-section product brief from a business statement.

Community
Advanced
HarshodaiHarshodai

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Community
Advanced
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
deepeshBodhdeepeshBodh
35

analysis-screenshot

Analyze UI screenshots to produce design-token catalogs for CSS, Tailwind, and SwiftUI.

Community
Advanced