skills.rest
gabriellst
gabriellstCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Generates a SYSTEM.md design system and CSS variables from a visual reference.

4|Updated Jul 30, 2026
Search Tags:#typography#design system#design tokens#tailwind#dark mode#css variables#oklch
One-click install
npx skills add https://github.com/gabriellst/codm --skill design-system-gabriellst
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/gabriellst/codm --skill design-system-gabriellst

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend components drift into inconsistent spacing, colors, and patterns when a project lacks a single source of truth for design decisions. This Skill establishes that source of truth by generating a complete SYSTEM.md design system document and synchronized CSS variables from any visual reference. ## Core Features & Use Cases - Design Token Extraction: Analyzes screenshots, HTML/CSS, Figma exports, or descriptions to extract colors (in OKLCH), typography, spacing, radius, depth, and interaction patterns. - SYSTEM.md Generation: Produces a structured 13-section design document covering intent, palette, typography, layout, dark mode, and patterns to preserve, with rationale for every token. - CSS Variable Synchronization: Updates packages/app/react/src/index.css with :root and .dark blocks plus Tailwind @theme mappings so every documented token exists in code. - Use Case: When starting a new project's UI from a brand screenshot, run this Skill to produce the full design system before creating any primitives or components. ## Quick Start Generate a design system from this screenshot and write the SYSTEM.md and CSS variables for the project.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create a design system from a screenshot?▼

Provide the screenshot as a visual reference and the Skill analyzes colors, typography, spacing, radius, depth, and interaction patterns. It then writes a SYSTEM.md document and updates the project's index.css with matching CSS variables.

What is SYSTEM.md and why does a project need one?▼

SYSTEM.md is a single source of truth documenting design intent, palette, typography, spacing, and component conventions. Without it, frontend components drift into inconsistent styling as different primitives make independent decisions.

Why use OKLCH colors instead of hex in design tokens?▼

OKLCH provides perceptual uniformity, making dark mode variants and palette adjustments predictable. The Skill requires every color value in SYSTEM.md and index.css to use oklch() notation rather than hex codes.

Does this work with Tailwind CSS projects?▼

Yes, the Skill is Tailwind-first. Component examples use Tailwind utility classes, and the generated index.css includes @theme and @theme inline blocks mapping CSS variables to Tailwind color and radius tokens.

When should I not generate a new design system?▼

Skip it when SYSTEM.md already exists and only needs small tweaks, when adding a single component (use primitive or component workflows instead), or for backend-only work with no UI surface.

Related Skills

Explore More Design & Creative Skills→
fol2fol2

claude-design

Generate HTML/CSS/JS design artifacts from natural language prompts and references.

Community
Advanced
brtstore4340-glitchbrtstore4340-glitch

tailwind-design-system

Build Tailwind CSS design systems with design tokens, CVA component variants, and dark mode theming.

Community
Intermediate
reason-machinesreason-machines
4

nothing-design-system

Generate UI components in Nothing's monochrome industrial design language with dark and light mode tokens.

Official
Intermediate
ddoman90ddoman90

modern-tailwind

Apply Tailwind CSS utilities for styling instead of custom CSS.

Community
Intermediate