UI Design System
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,…
--- name: ui-design-system description: 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. --- # 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
Overview
Professional toolkit for creating and maintaining scalable design systems.
Manual install (npx, ZIP)
Claude Code
npx skills add davila7/claude-code-templates --skill ui-design-system -g -a claude-codeClaude Code (degit)
npx degit davila7/claude-code-templates/cli-tool/components/skills/creative-design/ui-design-system#main ~/.claude/skills/ui-design-system-davila7Claude.ai / desktop
Codex, Cursor, other agents
Connects with Agent Alley MCP · agentalley.io/mcp
Files included
SKILL.md1.0 KB
Read SKILL.md here
SKILL.md
Show the full text33 lines
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
| 1 | |
| 2 | name ui-design-system |
| 3 | description 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. |
| 4 | |
| 5 | |
| 6 | # UI Design System |
| 7 | |
| 8 | Professional toolkit for creating and maintaining scalable design systems. |
| 9 | |
| 10 | ## Core Capabilities |
| 11 | Design token generation (colors, typography, spacing) |
| 12 | Component system architecture |
| 13 | Responsive design calculations |
| 14 | Accessibility compliance |
| 15 | Developer handoff documentation |
| 16 | |
| 17 | ## Key Scripts |
| 18 | |
| 19 | ### design_token_generator.py |
| 20 | Generates complete design system tokens from brand colors. |
| 21 | |
| 22 | **Usage**: `python scripts/design_token_generator.py [brand_color] [style] [format]` |
| 23 | Styles: modern, classic, playful |
| 24 | Formats: json, css, scss |
| 25 | |
| 26 | **Features**: |
| 27 | Complete color palette generation |
| 28 | Modular typography scale |
| 29 | 8pt spacing grid system |
| 30 | Shadow and animation tokens |
| 31 | Responsive breakpoints |
| 32 | Multiple export formats |
| 33 |
Details
- License
- MIT
- Stars on the repo
- ★ 32,299
- Checked
- Source
- davila7/claude-code-templates ↗
- Creator
- davila7 · 212 listings
Similar skills
See all →
SkillInterface Designer
pbakaus/impeccable · by pbakausUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.★ 70.4k GitHub stars
SkillApple Design Patterns
emilkowalski/skills · by emilkowalskiApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.★ 40.8k GitHub stars
SkillWeb Animation Choreographeremilkowalski/skills · by emilkowalskiBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.★ 40.8k GitHub stars
SkillComponent State Renderer
jakubkrehel/skills · by jakubkrehelRenders a component you choose in every state and scenario on a temporary page and stress tests it.★ 7.1k GitHub stars
SkillDesign Quality Auditorjakubkrehel/skills · by jakubkrehelReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.★ 7.1k GitHub stars
SkillDashboard Interface Design
Dammyjay93/interface-design · by Dammyjay93Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.★ 5.8k GitHub starsMore from davila7
Skill2D Game Development
davila7/claude-code-templates · by davila72D game development principles. Sprites, tilemaps, physics, camera.★ 32.3k GitHub stars
Skill3D Game Development Principlesdavila7/claude-code-templates · by davila73D game development principles. Rendering, shaders, physics, cameras.★ 32.3k GitHub stars
Skill3D Web Experience Builderdavila7/claude-code-templates · by davila7Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.★ 32.3k GitHub stars
SkillSplit Test Setupdavila7/claude-code-templates · by davila7When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.★ 32.3k GitHub stars
AgentResearch Literature Synthesizerdavila7/claude-code-templates · by davila7Academic research synthesis specialist. Use PROACTIVELY for comprehensive research on academic topics, literature reviews, technical investigations, and well-cited analysis combining multiple sources. <example>Context: A podcast episode needs a segment grounded in peer-reviewed evidence with formal citations. user: "Research the current state of transformer efficiency techniques for the episode, with proper academic citations." assistant: "I'll use the academic-research-synthesizer agent to search arXiv and Semantic Scholar, extract full-text findings via WebFetch, and produce a cited literature synthesis with confidence levels." <commentary>Use academic-research-synthesizer (not comprehensive-researcher) when the episode segment needs peer-reviewed sourcing, formal citation format, and explicit confidence tagging rather than general-purpose multi-source coverage.</commentary></example> <example>Context: The episode-orchestrator has routed a "literature review" request for a technical deep-dive segment. user: "Summarize the research landscape on federated learning privacy guarantees." assistant: "I'll invoke academic-research-synthesizer to systematically search academic sources, note peer-review status per source, and synthesize consensus vs. open debates."</example>★ 32.3k GitHub stars
AgentAcademic Research Specialistdavila7/claude-code-templates · by davila7Academic research specialist for scholarly sources, peer-reviewed papers, and academic literature. Use PROACTIVELY for research paper analysis, literature reviews, citation tracking, and academic methodology evaluation. <example>Context: The research-orchestrator has kicked off Phase 4 parallel research on 'efficacy of intermittent fasting' and needs peer-reviewed evidence. user: "Find the academic evidence on intermittent fasting outcomes." assistant: "I'll use the academic-researcher agent to search Semantic Scholar, PubMed, and OpenAlex for peer-reviewed studies and write structured findings to academic-research.md." <commentary>The request is specifically for scholarly/peer-reviewed evidence rather than general web coverage or code, so academic-researcher (not web-researcher or technical-researcher) is the right specialist.</commentary></example> <example>Context: The user wants a literature review comparing methodologies across studies on a topic. user: "Can you review the literature on transformer model interpretability and identify research gaps?" assistant: "Let me invoke the academic-researcher agent to pull foundational and recent papers, extract methodologies, and surface open research gaps." <commentary>Literature review, methodology extraction, and research-gap identification are core academic-researcher capabilities, distinct from technical-researcher's focus on code repositories and implementations.</commentary></example>★ 32.3k GitHub stars