skills.rest
freedom909
freedom909COMMUNITY
Explore all skills by this author →
GitHub

design-system

Generates design tokens and audits UI visual consistency across ten dimensions.

Updated Mar 18, 2026
Search Tags:#accessibility#design system#css#design tokens#tailwind#UI consistency#visual audit
One-click install
npx skills add https://github.com/freedom909/real-estate-saas --skill design-system-freedom909
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/freedom909/real-estate-saas/tree/main/.trae/skills/design-system
Command: npx skills add https://github.com/freedom909/real-estate-saas --skill design-system-freedom909

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Codebases often accumulate inconsistent colors, arbitrary spacing, and generic AI-generated styling that makes interfaces look unpolished, and teams lack a systematic way to define or audit their visual language. ## Core Features & Use Cases - Design System Generation: Scans CSS, Tailwind, and styled-components to extract existing patterns, then produces design-tokens.json, DESIGN.md with rationale, and a self-contained HTML preview page. - Visual Audit: Scores a UI across 10 dimensions including color consistency, typography hierarchy, spacing rhythm, accessibility, and polish, with fixes citing exact file:line locations. - AI Slop Detection: Flags generic AI-generated design patterns such as gratuitous gradients, purple-to-blue defaults, and purposeless glass morphism. - Use Case: Before a redesign of a SaaS app, run an audit against localhost pages to get scored feedback on every visual dimension, then generate a cohesive token set to guide the new implementation. ## Quick Start Ask the AI to generate a minimal design system with earth-tone palette for your project, or to audit your running app at a local URL for visual consistency.

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 from an existing codebase?▼

Run the generate mode, which scans your CSS, Tailwind, or styled-components for existing colors, typography, spacing, and shadows. It then proposes a design token set as JSON plus CSS custom properties, with a DESIGN.md explaining each decision.

How to audit a website for visual consistency?▼

Use the audit mode with a target URL and page list, such as /design-system audit --url http://localhost:3000 --pages / /pricing. The UI is scored 0-10 across ten dimensions including color, typography, spacing, accessibility, and polish, with fixes citing exact file:line.

What design issues does the visual audit check?▼

The audit covers color consistency, typography hierarchy, spacing rhythm, component consistency, responsive behavior, dark mode completeness, animation purpose, accessibility contrast and focus states, information density, and polish details like hover and loading states.

Can it detect AI-generated design patterns in my UI?▼

Yes, the slop-check mode identifies generic AI design patterns such as gratuitous gradients, purple-to-blue defaults, purposeless glass morphism cards, excessive scroll animations, and personality-free font stacks.

Does the design system generator work with Tailwind CSS?▼

Yes, the generation mode scans Tailwind configurations alongside plain CSS and styled-components to extract existing patterns. Extracted values are consolidated into design tokens exported as JSON and CSS custom properties.

What are the limitations of automated visual audits?▼

Automated scoring relies on code patterns and rendered pages, so subjective brand fit and complex interactive states may still need human judgment. Audits also require a running app URL for page-level checks.

Related Skills

Explore More Design & Creative Skills→
AytsuuAytsuu

design-system

Analyze codebases to generate design systems and audit UI consistency.

Community
Advanced
AvaloniaUIAvaloniaUI
157

tailwind-to-infima

Translate Tailwind utilities into Infima variables for Docusaurus styling.

Official
Intermediate
igot-aiigot-ai

adapt

Create responsive adaptation plans for designs across screen sizes and devices.

Official
Advanced
apexradiusapexradius

design-system

Generate CSS custom properties and a component library from a brand name.

Official
Intermediate