skills.rest
samymity
samymityCOMMUNITY
Explore all skills by this author →
GitHub

Design System — Generate & Audit Visual Systems

Generate design token sets and audit UI consistency across accessibility dimensions.

1|Updated Mar 3, 2026
Search Tags:#accessibility#design system#design tokens#tailwind#ui consistency#visual audit#ui governance
One-click install
npx skills add https://github.com/samymity/bridge-ventures-backend --skill design-system-generate-audit-visual-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System — Generate & Audit Visual Systems
Source: https://github.com/samymity/bridge-ventures-backend/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/samymity/bridge-ventures-backend --skill design-system-generate-audit-visual-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It resolves confusing, inconsistent UI styling by turning scattered CSS/Tailwind/component styles into a coherent token-based design system or by auditing what’s currently breaking visual consistency and accessibility.

Core Features & Use Cases

  • Design system generation: Scans existing CSS/Tailwind/styled-component patterns to extract colors, typography, spacing, radii, shadows, and breakpoints, then outputs a token set plus documentation and a no-dependency HTML preview for stakeholders.
  • Visual audit scoring: Evaluates the UI across 10 dimensions (palette consistency, typography hierarchy, spacing rhythm, component consistency, responsive behavior, dark mode completeness, animation intent, accessibility, information density, and polish) and produces actionable fixes with file:line references.
  • AI slop detection: Flags common generic/over-styled patterns (e.g., gradient overuse, glass morphism misuse, mismatched rounding, excessive scroll animation, stock-gradient hero) to help you replace “template” design choices with intentional ones.

Quick Start

Run the design-system skill in generate mode to scan your repository and produce DESIGN.md, design-tokens.json, and an interactive design-preview.html.

Frequently Asked Questions about Design System — Generate & Audit Visual Systems

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

FAQPage Schema
How do I extract design tokens from existing CSS and Tailwind patterns?▼

You can audit UI consistency by evaluating rendered output across 10 dimensions including palette, spacing rhythm, and accessibility, producing an audit report with specific file:line references for actionable fixes.

How do I fix inconsistent UI styling without clear causes?▼

Fixing inconsistent UI styling involves running a visual audit that scores components across dimensions like typography hierarchy and dark mode completeness, identifying exact file:line fixes to resolve visual regressions.

Can I generate a design system for a Tailwind project?▼

Yes, you can generate a design system for a Tailwind project by scanning existing styled-component and CSS patterns to output design-tokens.json, DESIGN.md documentation, and an interactive HTML preview for stakeholders.

What is AI slop detection in visual design audits?▼

AI slop detection in visual design audits flags generic, over-styled patterns like gradient overuse and glass morphism misuse, helping replace unintentional template design choices with deliberate visual governance.

Does this visual audit tool check accessibility and dark mode completeness?▼

Yes, the visual audit checks accessibility and dark mode completeness by evaluating rendered UI output across multi-dimensional scoring criteria, generating specific fixes to ensure proper contrast and theme support.

Related Skills

Explore More Design & Creative Skills→
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
Michal-J-KolodziejMichal-J-Kolodziej

visual-audit

Inspect live web applications across viewports and generate a VISUAL_AUDIT.md report.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
JupiterTheWarlockJupiterTheWarlock

layout

Assess and improve UI layout, spacing, and hierarchy for web interfaces.

Community
Advanced