ui-design-system

579 stars 112 forks

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.

CommandsAgentsMarketplace

#claude-ai#Designer including#design calculations#design#claudecode-subagents#claude-ai-skills#Senior#system

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →

Claude Code (CLI) Fast

skilz install alirezarezvani/claude-skills/ui-design-system

OpenCode (CLI) Fast

skilz install alirezarezvani/claude-skills/ui-design-system --agent opencode

OpenAI Codex (CLI) Native

skilz install alirezarezvani/claude-skills/ui-design-system --agent codex

Gemini CLI (Project) Project

skilz install alirezarezvani/claude-skills/ui-design-system --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents

For Claude Desktop Easy

Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

Manual Installation

1. Clone the repository:

git clone https://github.com/alirezarezvani/claude-skills

2. Copy the agent skill directory:

cp -r claude-skills/product-team/ui-design-system ~/.claude/skills/

Agentic Skill Grades →

Agent Skill Grade

Score: 65/100 Click to see breakdown

Score Breakdown

Spec Compliance

12/15

PDA Architecture

18/30

Ease of Use

15/25

Writing Style

7/10

Utility

13/20

Areas to Improve

Missing layered structure
No TOC in 530-line script
Vague trigger terms

Recommendations

Address 2 high-severity issues first
Add trigger phrases to description for discoverability
Add table of contents for files over 100 lines

Graded: 2026-01-24

Developer Feedback

I've been exploring design systems lately and noticed your skill takes a pretty opinionated stance on component organization—curious what drove those specific choices versus the more traditional atomic design approach.

Links:

The TL;DR

You're at 65/100, landing in D territory. This is graded against Anthropic's best practices for skill architecture. Your spec compliance is solid (12/15), but you're losing points where it matters most: the Progressive Disclosure Architecture (18/30) and how discoverable this actually is for users (15/25).

What's Working Well

Spec compliance is clean - Your frontmatter is valid YAML, naming follows conventions, and the core structure is sound
Consistent terminology - Design tokens, components, breakpoints—you stick with your terms throughout, which helps readability
Real utility address - You're solving an actual problem: design token generation and system consistency, not solving for a problem that doesn't exist

The Big One: Missing Layered Documentation Structure

Here's what's holding you back: everything is compressed into a 33-line SKILL.md, but you've got a 530-line Python script that desperately needs navigation. This is a Progressive Disclosure problem.

Why it matters: When Claude encounters this skill, users have no clear entry points. Is this for brand color generation? Component libraries? Both? The current structure makes Claude guess.

The fix: Create a references/ directory with focused guides:

references/token-generation.md - Color palette algorithms, WCAG contrast checking
references/component-architecture.md - System design patterns you're enforcing
references/responsive-calculations.md - How breakpoint mat...

AI-Detected Topics

Extracted using NLP analysis

claude-ai Designer including design calculations design claudecode-subagents claude-ai-skills Senior system including design claude-skills

Report Security Issue

Found a security vulnerability in this agent skill?