design-system

Name: design-system
Availability: InStock
Author: phoenicisf

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

Ready to run

npx skills add https://github.com/phoenicisf/forex-analyzer --skill design-system-phoenicisf

💬 Prompt for ChatGPT / Claude Chat▼

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.