Claude MarketplacesSubmit
davila7 avatar

Ui Design System

davila7/claude-code-templates

If you're building a design system from scratch or need to maintain consistency across a product, this handles the tedious token generation work. Feed it a brand color and it spits out complete palettes, typography scales, spacing grids, and all the usual suspects in JSON, CSS, or SCSS. The real value is in the handoff tools, turning design decisions into formats developers can actually use without playing telephone. It's opinionated about things like 8pt grids and modular scales, which is either helpful structure or limiting depending on your needs. Best for teams where designers and developers need a shared vocabulary, less useful if you already have established tokens.

skills.sh installs
1.7K
GitHub stars
33.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill ui-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/davila7/claude-code-templates
Categories
Frontend Development, Documentation, Design & UI/UX
First seen
May 16, 2026

More from davila7/claude-code-templates

All 618

Recommended

More Frontend Development
1vtex avatarvtex-io-react-appsvtex/skillsApply when building React components under react/ or configuring store blocks in store/ for VTEX IO apps. Covers interfaces.json, contentSchemas.json for Site E1.7Kskills.sh installs
2customware-ai avatarfrontend-designcustomware-ai/skillsStrict frontend design guardrails for building modern, minimal-visual-noise, airy, non-generic app UIs. Use whenever creating or changing frontend UI, React com1.6Kskills.sh installs
3educlopez avatarui-crafteduclopez/ui-craftUse for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidan1.6Kskills.sh installs
4mblode avatarui-designmblode/agent-skillsDesigns and builds UI: visual direction, Tailwind implementation, browser-comparable variants, screenshot-to-markup scaffolds, dark-mode and responsive retrofit1.5Kskills.sh installs
5yonatangross avatarui-componentsyonatangross/orchestkitUI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix u1.5Kskills.sh installs
6yonatangross avatarzustand-patternsyonatangross/orchestkitReference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core p1.5Kskills.sh installs