Design System
affaan-m/eccA design system keeps your user interface looking clean and consistent. This tool helps you build one from scratch or check an existing one for problems. It scans your code for colors, fonts, spacing, and other style rules.
You can also run a full visual audit that scores your UI on ten key areas like color use and accessibility. Each score comes with specific examples and fixes. Another mode finds generic AI design patterns that make a site look unoriginal.
Anyone working on a website or app can use this skill to save time and avoid messy styling. It works with CSS, Tailwind, and styled-components. The output includes a design document, a token file, and an interactive preview page.
Add Design System skill to your workflow
Global
mkdir -p ~/.claude/skills/design-systemProject
mkdir -p .claude/skills/design-systemSource Repository
More Design & UI/UX Claude Code Skills
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Brainstormingobra/superpowers
Brainstorm your ideas into a clear design and get approval before building anything
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
All-in-one UI/UX design assistant with styles, colors, fonts, and guidelines for any platform
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Extract Design Systemarvindrk/extract-design-system
Reverse engineer a website's design into ready-to-use token files
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules