SkillsAdd

smithery/davila7

ui-design-system

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.

Installation

$ npx skills add smithery/davila7 --skill ui-design-system
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

azure-rbac Shared topics
microsoft/azure-skills 489K installs
frontend-design Similar name
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
web-design-guidelines Similar name
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
canvas-design Similar name
anthropics/skills

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use …

105.8K installs
design-md Similar name
google-labs-code/stitch-skills 61.1K installs
frontend-design Similar name
anthropics/claude-code 58.1K installs

Also in this package

Other skills from smithery/davila7 · top by installs.

npx skills add smithery/davila7
zarr-python 0 zapier-workflows 0 zapier-make-patterns 0 xlsx 0 writing-clearly-and-concisely 0 workflow-automation 0 WordPress Penetration Testing 0 Wireshark Network Traffic Analysis 0 Windows Privilege Escalation 0 weights-and-biases 0

Browse all from smithery/davila7

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,060 B
  • docs SUMMARY.md 300 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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

designtokengenerator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/designtokengenerator.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