Ui Design System
Design system toolkit: generate design tokens (colors, typography, spacing), document components, calculate responsive layouts, and produce developer handoff assets. Use when creating a design system, generating tokens from brand colors, ensuring visual consistency, or preparing dev handoff. Triggers: 'generate design tokens', 'create color palette', 'design system setup', 'typography scale'. Do…
Install
$ agentstack add skill-cor-incorporated-claude-code-skills-ui-design-system ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
UI Design System
Generate and maintain scalable design system artifacts.
Core Capabilities
- Design token generation (colors, typography, spacing, shadows, animation).
- Component system architecture and documentation.
- Responsive design calculations (breakpoints, fluid scales).
- Accessibility compliance checks (contrast ratios, focus states).
- Developer handoff in multiple formats.
Token Generator
Run: python scripts/design_token_generator.py [brand_color] [style] [format]
| Argument | Values | Default | |----------|--------|---------| | brand_color | Any hex color (e.g., #3B82F6) | Required | | style | modern, classic, playful | modern | | format | json, css, scss | json |
Generated Tokens
- Color palette: Primary, secondary, neutral, semantic (success/warning/error/info) with 50-950 shades.
- Typography scale: Modular scale (1.25 ratio for modern, 1.333 for classic, 1.2 for playful).
- Spacing: 8pt grid system (4, 8, 12, 16, 24, 32, 48, 64, 96).
- Shadows: 5-level elevation scale.
- Breakpoints: sm (640), md (768), lg (1024), xl (1280), 2xl (1536).
Error Handling
- If
brand_coloris not a valid hex, reject with an example of correct format. - If contrast ratio between generated text/background pairs falls below WCAG AA (4.5:1), auto-adjust and warn.
- If the requested format is unsupported, list supported formats and ask the user to choose.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: Cor-Incorporated
- Source: Cor-Incorporated/claude-code-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.