skills.rest
Jamkris
JamkrisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Jamkris/everything-gemini-code --skill design-system-jamkris
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vanman2024vanman2024
10

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic
phoenicisfphoenicisf

design-system

Generate design tokens and audit UI consistency across codebases.

Community
Advanced