skills.rest
adriancodes
adriancodesCOMMUNITY
Explore all skills by this author →
GitHub

ecc-design-system

Generates design tokens and audits UI codebases for visual consistency.

Updated Apr 18, 2025
Search Tags:#accessibility#design system#css#design tokens#tailwind#ui consistency#visual audit
One-click install
npx skills add https://github.com/adriancodes/dotfiles --skill ecc-design-system-adriancodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ecc-design-system
Source: https://github.com/adriancodes/dotfiles/tree/main/dot_agents/skills/ecc-design-system
Command: npx skills add https://github.com/adriancodes/dotfiles --skill ecc-design-system-adriancodes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It helps teams establish a cohesive design system from an existing codebase and diagnose visual inconsistencies that make a UI feel off, without guessing at causes. ## Core Features & Use Cases - Design Token Generation: Scans CSS, Tailwind, or styled-components to extract colors, typography, spacing, and shadows, then proposes a token set as JSON and CSS custom properties. - Visual Consistency Audit: Reviews color usage, typography hierarchy, spacing rhythm, responsive behavior, dark mode, accessibility, and polish with file/line-level evidence. - AI Slop Detection: Flags generic AI-generated design patterns such as gratuitous gradients, purposeless glass morphism, and excessive scroll animations. - Use Case: Before a redesign, run an audit of your app's home and pricing pages to get evidence-backed findings on inconsistent spacing and weak hierarchy, then generate a proposed token set to standardize styling. ## Quick Start Audit my local app at http://localhost:3000 for visual consistency and propose a design token set based on the existing styles.

Frequently Asked Questions about ecc-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?▼

Scan your CSS, Tailwind, or styled-components code to extract existing colors, typography, spacing, border-radius, and shadows. The skill proposes a cohesive token set as JSON and CSS custom properties with rationale for each choice.

How to audit a website for visual consistency?▼

Review the UI across ten dimensions including color consistency, typography hierarchy, spacing rhythm, responsive behavior, dark mode, and accessibility. Findings include specific evidence with file and line references rather than unsupported scores.

Does this work with Tailwind CSS projects?▼

Yes, the design system generation mode scans Tailwind utility classes alongside plain CSS and styled-components to extract existing patterns. It then proposes tokens that align with the conventions already present in your project.

What are signs of AI-generated design in a UI?▼

Common patterns include gratuitous gradients, purple-to-blue defaults, purposeless glass morphism cards, excessive scroll animations, and generic centered hero sections. The audit distinguishes taste issues from actual usability defects.

Can it audit a site without running it locally?▼

Yes, in a static review it inspects code and any supplied screenshots or results you provide. It requests missing runtime evidence from you rather than executing code or contacting external services on its own.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
Layer-FiLayer-Fi
10

styling

Enforces SCSS conventions with CSS variables, Layer__ BEM naming, and stylelint property ordering.

Official
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate