skills.rest
adamway
adamwayCOMMUNITY
Explore all skills by this author →
GitHub

design-system-creator

Generate design systems with SKILL.md and theme.css from design inputs.

Updated Aug 27, 2026
Search Tags:#design system#components#CSS#style guide#patterns#UI consistency
One-click install
npx skills add https://github.com/adamway/thoughts-cli --skill design-system-creator-adamway
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-creator
Source: https://github.com/adamway/thoughts-cli/tree/main/.claude/skills/design-system-creator
Command: npx skills add https://github.com/adamway/thoughts-cli --skill design-system-creator-adamway

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables users to create or update comprehensive design systems from various design inputs, streamlining the process of maintaining visual consistency.

Core Features & Use Cases

  • Create mode: Generate a complete design system including SKILL.md and theme.css from raw design inputs like Figma exports or screenshots.
  • Update mode: Extend existing design tokens, components, and patterns with new design assets or revisions, ensuring consistency and scalability.
  • Use Case: A developer updates the design system after redesigning a component suite, automatically merging new tokens and styles into the existing framework with minimal effort.

Quick Start

Provide the design files or source code and run the tool to extract tokens, components, and patterns, then generate the updated design system documentation and CSS references.

Frequently Asked Questions about design-system-creator

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

FAQPage Schema
How do I generate a design system from Figma exports or design screenshots?▼

To generate a design system from Figma exports or screenshots, provide the raw design files as input and the tool extracts design tokens, component styles, and layout patterns to produce complete documentation and a theme.css reference file.

What is the best way to update existing design tokens with new component revisions?▼

The best way to update existing design tokens is to use update mode, which automatically merges new design assets and component revisions into your current framework while preserving UI consistency and scalability.

Can I build a project-specific style guide from source code?▼

Yes, you can build a project-specific style guide from source code by providing the code as input, allowing the tool to extract component styles and layout patterns to generate the design system documentation.

Does this design system creator output CSS files for UI consistency?▼

Yes, this design system creator outputs a theme.css file containing extracted design tokens and component styles to enforce UI consistency across your project's development workflow.

What formats do I need to provide to extract design tokens and component patterns?▼

You need to provide raw design inputs such as Figma exports, screenshots, or source code to extract design tokens, component styles, and layout patterns for the design system.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
RomualdPRomualdP

Mobile-First Responsive Design

Implement mobile-first responsive layouts with Tailwind CSS breakpoints.

Community
Intermediate
yusufcmgyusufcmg
1

design-system-patterns

Provides patterns for building scalable design systems with tokens, theming, and React components.

Community
Advanced
delbytedelbyte

extract

Identify reusable UI components and design tokens across projects for consolidation.

Community
Intermediate