Design System
jezweb/claude-skillsTurn any website or screenshot into a clear design guide. The tool looks at colors, fonts, spacing, and component styles. It builds a DESIGN.md file that lists all design tokens. This helps you copy the look of an existing site for your own projects. You can give a live URL, a local HTML file, or even an image. The result is a neat document ready for consistent page creation.
Developers and designers benefit the most. You no longer need to guess hex codes or font sizes. The tool uses automated browsing to inspect the page source. It finds CSS custom properties, Tailwind settings, and inline styles. This saves hours of manual digging.
The output works with a design loop skill to generate matching pages. It also works for Google Stitch projects. You get a structured reference for brand colors, typography, and component roundness. This makes your next project feel familiar and polished.
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