bbgnsurftech/claude-skills-collection/ui-design-system

Claude Code and agent skill by bbgnsurftech/claude-skills-collection

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

Install

npx vskill@latest install bbgnsurftech/claude-skills-collection/ui-design-system

SKILL.md

The same SKILL.md was published earlier as majiayu000/claude-skill-registry/ui-design-system.

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

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
25
Repository forks
7
7-day trend score
21

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/bbgnsurftech/claude-skills-collection/ui-design-system/badge)](https://verified-skill.com/skills/bbgnsurftech/claude-skills-collection/ui-design-system)

Something wrong with this skill or its page? Tell us.