Design System
affaan-m/everything-claude-codeA design system keeps your app looking clean and professional. This tool helps you create a new design system or check an existing one for problems. It looks at your colors, fonts, spacing, and more to find issues.
You can generate a full design system from your code. It scans your styles and suggests a set of design tokens. It also gives you an HTML preview to see the results.
Use the audit mode to score your UI in ten areas like color consistency and accessibility. It points out exact lines where fixes are needed. The slop detector finds generic AI patterns that make your design look cheap.
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
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
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
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules
Brandkitleonxlnx/taste-skill
Create premium brand-kit images that feel intentional, minimal, and presentation-ready