skills.rest
phoenicisf
phoenicisfCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate design tokens and audit UI consistency across codebases.

Updated Nov 7, 2025
Search Tags:#accessibility#tokens#ui-design#design-system#design-tokens#visual-audit
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill design-system-phoenicisf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill design-system-phoenicisf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often contend with inconsistent UI patterns and fragmented design tokens across projects. This skill automates the generation of a cohesive design system and provides visual audits to ensure typography, color, spacing, and components stay aligned.

Core Features & Use Cases

  • Generate a cohesive design system by extracting tokens (colors, typography, spacing, border radii) from a project and producing a design-tokens.json, DESIGN.md rationale, and an interactive preview.
  • Perform visual audits to score UI dimensions (color usage, typography hierarchy, spacing rhythm, accessibility, and polish) and surface concrete fixes.
  • Use with new projects to establish a design system early or on existing codebases to validate consistency and accessibility across pages and components.

Quick Start

Provide context about your project and request a generated design system with tokens and a preview.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate a design system with design tokens from an existing project?▼

To generate a design system, provide your project context and the tool extracts colors, typography, spacing, and border radii to produce a design-tokens.json file, a DESIGN.md rationale, and an interactive HTML preview.

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

A visual audit scores UI dimensions like color usage, typography hierarchy, spacing rhythm, and accessibility to ensure UI consistency, surfacing concrete fixes for misaligned components and fragmented design tokens across pages.

How do I audit my codebase for accessibility and design token consistency?▼

You can audit your codebase by applying the visual audit feature to existing projects, which evaluates accessibility, spacing rhythm, and typography hierarchy, then outputs concrete fixes and a design-tokens.json file for alignment.

Can I establish a design system early for a new project?▼

Yes, you can establish a design system early for new projects by generating cohesive tokens, a DESIGN.md rationale, and an interactive preview to ensure typography, color, spacing, and components stay aligned from the start.

What is the best way to fix fragmented design tokens across multiple web pages?▼

The best way to fix fragmented design tokens is to run a visual audit on your existing codebase to score UI dimensions and surface concrete fixes, then regenerate a unified design-tokens.json file for consistent theming.

What files do I get when generating a design system for UI consistency?▼

When generating a design system, you get a design-tokens.json file containing extracted tokens, a DESIGN.md file with rationale, and an interactive preview HTML linking tokens to ensure UI consistency.

Related Skills

Explore More Design & Creative Skills→
alongor666alongor666
1

css-design-tokens

Define CSS design tokens for colors, spacing, typography, and theming.

Community
Basic
Tasty-Maker-StudioTasty-Maker-Studio

m3-tokens

Provide Material Design 3 token values and color roles for light and dark themes.

Official
Intermediate
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
sevenbelowllcsevenbelowllc

ui-design-system

Generate UI design tokens for colors, typography, and spacing using Python scripts.

Official
Intermediate