skills.rest
GGEdu
GGEduCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate and audit design systems with tokens and consistency reports.

Updated Mar 31, 2026
Search Tags:#audit#generate#design-system#visual-consistency#design-tokens#ui-patterns
One-click install
npx skills add https://github.com/GGEdu/claude-god-mode-template --skill design-system-ggedu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/GGEdu/claude-god-mode-template/tree/main/skills/design-system
Command: npx skills add https://github.com/GGEdu/claude-god-mode-template --skill design-system-ggedu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to keep UI visually consistent across products and scale design systems as projects grow. This skill automates the generation and auditing of design systems, helping teams consolidate tokens, patterns, and guidelines into a cohesive framework.

Core Features & Use Cases

  • Generate a cohesive design system by extracting colors, typography, spacing, border radii, and tokens from a codebase and producing DESIGN.md, design-tokens.json, and a self-contained preview.
  • Visual Audit to score consistency across components, typography, spacing, and accessibility, with actionable fixes and a clear roadmap.
  • AI Slop Detection to identify and surface generic AI-generated design patterns and recommend deviations for originality.
  • Use Case: When starting a new product, run the generate mode to bootstrap a system; when refining an existing UI, run the audit mode to enforce consistency.

Quick Start

Start by running the design-system generate workflow on your project to produce tokens and a design blueprint.

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 from an existing codebase?▼

You can generate design tokens from an existing codebase by running the generate workflow to extract colors, typography, spacing, and border radii, producing a design-tokens.json file and a self-contained preview page.

What is a UI visual consistency audit and how does it work?▼

A UI visual consistency audit scores components, typography, spacing, and accessibility across layouts to surface inconsistencies, providing actionable fixes and a clear roadmap to enforce design system cohesion.

Can I detect generic AI-generated UI patterns in my design?▼

Yes, AI slop detection identifies generic AI-generated design patterns across your UI and recommends deviations to ensure originality and visual consistency within your design system.

Does this design system generator work for new projects without existing tokens?▼

Yes, for new projects you can run the generate mode to bootstrap a complete design system, extracting foundational design tokens and outputting a DESIGN.md blueprint to guide development.

What's the best way to document a cohesive design system across components?▼

The best way to document a cohesive design system is to generate a DESIGN.md file alongside design-tokens.json and a self-contained preview, consolidating tokens, patterns, and guidelines into a unified framework.

Related Skills

Explore More Design & Creative Skills→
www-zaq-aiwww-zaq-ai
66

design-migrate

Migrate legacy CSS styles to the --zaq-* token system for ZAQ UI.

Official
Advanced
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate
Ikki-GroupIkki-Group

extract

Extract reusable UI patterns, components, and design tokens from codebases.

Official
Intermediate