Design Tokens
julianoczkowski/designer-skillsStarting a new project can be overwhelming without a clear visual system. This skill creates a complete set of design tokens for your project. It generates colors, spacing, typography, and component tokens. Use it right after your design brief and before building any components.
The skill reads your existing codebase to avoid duplicating work. It can work with Tailwind, CSS, or CSS-in-JS. It always creates both light and dark color palettes that match your chosen aesthetic philosophy. The tokens make your project consistent and easy to maintain.
You can name a specific philosophy like Dieter Rams or Japanese Minimalism. The skill automatically adjusts spacing, colors, and other values to match that style. Every component built after this will use these tokens instead of random hardcoded values.
Add Design Tokens skill to your workflow
Global
mkdir -p ~/.claude/skills/design-tokensProject
mkdir -p .claude/skills/design-tokensSource 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