design-system

Generate design tokens and audit UI consistency for web interfaces.

86|21|Updated Feb 9, 2026

Search Tags:#ui #accessibility #audit #tokens #generate #design-system #visual-consistency

Ready to run

npx skills add https://github.com/Jamkris/everything-gemini-code --skill design-system-jamkris

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Jamkris/everything-gemini-code/tree/main/skills/design-system
Command: npx skills add https://github.com/Jamkris/everything-gemini-code --skill design-system-jamkris

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with inconsistent UI, scattered tokens, and unclear design decisions across projects.

Core Features & Use Cases

Generate a cohesive design system by extracting tokens (colors, typography, spacing) from codebases.
Visually audit UI for consistency, accessibility, and responsive behavior, with actionable fixes.
Produce a design-token set, a DESIGN.md rationale, and a self-contained HTML preview to share with stakeholders.
Use cases include starting a new project, auditing an existing codebase, or validating design polish before release.

Quick Start

Run the design-system workflow to generate tokens and a preview for your project.

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 audit UI for visual consistency, accessibility, and responsive behavior by running the design-system workflow, which visually reviews web interfaces and provides actionable fixes for any identified issues.

Can I use this to validate design polish before a web project release?▼

Yes, you can validate design polish before release by running an audit on your web interfaces, which checks accessibility and responsive guidelines and outputs actionable recommendations to ensure visual consistency.

What is the best way to document design decisions for stakeholders?▼

The best way to document design decisions for stakeholders is to generate a DESIGN.md rationale and a self-contained HTML preview, which together explain the token generation and provide a shareable visual reference.

Do I need any dependencies to extract colors and typography into a token set?▼

No dependencies are required to extract colors and typography into a token set, as the design-system workflow operates independently to analyze your UI and produce the structured tokens and design rationale.

When should I not use an automated design system generator?▼

You should not use an automated design system generator when your project requires highly bespoke, non-standard visual rules that cannot be captured by extracting colors, typography, and spacing tokens into a cohesive web interface system.