Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · Developer Tools
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.
skill openclawclawhub Free
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.
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, references/component-architecture.md, references/developer-handoff.md, references/responsive-calculations.md, references/token-generation.md, scripts/design_token_generator.py
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 2.1.1
Provenance
- Publisher
- alirezarezvani
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
UI Design System
Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.
Table of Contents
Trigger Terms Workflows Workflow 1: Generate Design Tokens Workflow 2: Create Component System Workflow 3: Responsive Design Workflow 4: Developer Handoff Tool Reference Quick Reference Tables Knowledge Base
Trigger Terms
Use this skill when you need to: "generate design tokens" "create color palette" "build typography scale" "calculate spacing system" "create design system" "generate CSS variables" "export SCSS tokens" "set up component architecture" "document component library" "calculate responsive breakpoints" "prepare developer handoff" "convert brand color to palette" "check WCAG contrast" "build 8pt grid system"
Workflow 1: Generate Design Tokens
Situation: You have a brand color and need a complete design token system. Steps: Identify brand color and style Brand primary color (hex format) Style preference: modern | classic | playful Generate tokens using script python scripts/design_token_generator.py "#0066CC" modern json Review generated categories Colors: primary, secondary, neutral, semantic, surface Typography: fontFamily, fontSize, fontWeight, lineHeight Spacing: 8pt grid-based scale (0-64) Borders: radius, width Shadows: none through 2xl Animation: duration, easing Breakpoints: xs through 2xl Export in target format # CSS custom properties python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css # SCSS variables python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss # JSON for Figma/tooling python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json Validate accessibility Check color contrast meets WCAG AA (4.5:1 normal, 3:1 large text) Verify semantic colors have contrast colors defined
Workflow 2: Create Component System
Situation: You need to structure a component library using design tokens. Steps: Define component hierarchy Atoms: Button, Input, Icon, Label, Badge Molecules: FormField, SearchBar, Card, ListItem Organisms: Header, Footer, DataTable, Modal Templates: DashboardLayout, AuthLayout Map tokens to components ComponentTokens UsedButtoncolors, sizing, borders, shadows, typographyInputcolors, sizing, borders, spacingCardcolors, borders, shadows, spacingModalcolors, shadows, spacing, z-index, animation Define variant patterns Size variants: sm: height 32px, paddingX 12px, fontSize 14px md: height 40px, paddingX 16px, fontSize 16px lg: height 48px, paddingX 20px, fontSize 18px Color variants: primary: background primary-500, text white secondary: background neutral-100, text neutral-900 ghost: background transparent, text neutral-700 Document component API Props interface with types Variant options State handling (hover, active, focus, disabled) Accessibility requirements Reference: See references/component-architecture.md
Workflow 3: Responsive Design
Situation: You need breakpoints, fluid typography, or responsive spacing. Steps: Define breakpoints NameWidthTargetxs0Small phonessm480pxLarge phonesmd640pxTabletslg768pxSmall laptopsxl1024pxDesktops2xl1280pxLarge screens Calculate fluid typography Formula: clamp(min, preferred, max) /* 16px to 24px between 320px and 1200px viewport */ font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); Pre-calculated scales: --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem); --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem); --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); Set up responsive spacing TokenMobileTabletDesktop--space-md12px16px16px--space-lg16px24px32px--space-xl24px32px48px--space-section48px80px120px Reference: See references/responsive-calculations.md
Workflow 4: Developer Handoff
Situation: You need to hand off design tokens to development team. Steps: Export tokens in required formats # For CSS projects python scripts/design_token_generator.py "#0066CC" modern css # For SCSS projects python scripts/design_token_generator.py "#0066CC" modern scss # For JavaScript/TypeScript python scripts/design_token_generator.py "#0066CC" modern json Prepare framework integration React + CSS Variables: import './design-tokens.css'; <button className="btn btn-primary">Click</button> Tailwind Config: const tokens = require('./design-tokens.json'); module.exports = { theme: { colors: tokens.colors, fontFamily: tokens.typography.fontFamily } }; styled-components: import tokens from './design-tokens.json'; const Button = styled.button` background: ${tokens.colors.primary['500']}; padding: ${tokens.spacing['2']} ${tokens.spacing['4']}; `; Sync with Figma Install Tokens Studio plugin Import design-tokens.json Tokens sync automatically with Figma styles Handoff checklist Token files added to project Build pipeline configured Theme/CSS variables imported Component library aligned Documentation generated Reference: See references/developer-handoff.md
design_token_generator.py
Generates complete design token system from brand color. ArgumentValuesDefaultDescriptionbrand_colorHex color#0066CCPrimary brand colorstylemodern, classic, playfulmodernDesign style presetformatjson, css, scss, summaryjsonOutput format Examples: # Generate JSON tokens (default) python scripts/design_token_generator.py "#0066CC" # Classic style with CSS output python scripts/design_token_generator.py "#8B4513" classic css # Playful style summary view python scripts/design_token_generator.py "#FF6B6B" playful summary Output Categories: CategoryDescriptionKey ValuescolorsColor palettesprimary, secondary, neutral, semantic, surfacetypographyFont systemfontFamily, fontSize, fontWeight, lineHeightspacing8pt grid0-64 scale, semantic (xs-3xl)sizingComponent sizescontainer, button, input, iconbordersBorder valuesradius (per style), widthshadowsShadow stylesnone through 2xl, inneranimationMotion tokensduration, easing, keyframesbreakpointsResponsivexs, sm, md, lg, xl, 2xlz-indexLayer systembase through notification
Color Scale Generation
StepBrightnessSaturationUse Case5095% fixed30%Subtle backgrounds10095% fixed38%Light backgrounds20095% fixed46%Hover states30095% fixed54%Borders40095% fixed62%Disabled states500Original70%Base/default color600Original × 0.878%Hover (dark)700Original × 0.686%Active states800Original × 0.494%Text900Original × 0.2100%Headings
Typography Scale (1.25x Ratio)
SizeValueCalculationxs10px16 ÷ 1.25²sm13px16 ÷ 1.25¹base16pxBaselg20px16 × 1.25¹xl25px16 × 1.25²2xl31px16 × 1.25³3xl39px16 × 1.25⁴4xl49px16 × 1.25⁵5xl61px16 × 1.25⁶
WCAG Contrast Requirements
LevelNormal TextLarge TextAA4.5:13:1AAA7:14.5:1 Large text: ≥18pt regular or ≥14pt bold
Style Presets
AspectModernClassicPlayfulFont SansInterHelveticaPoppinsFont MonoFira CodeCourierSource Code ProRadius Default8px4px16pxShadowsLayered, subtleSingle layerSoft, pronounced
Knowledge Base
Detailed reference guides in references/: FileContenttoken-generation.mdColor algorithms, HSV space, WCAG contrast, type scalescomponent-architecture.mdAtomic design, naming conventions, props patternsresponsive-calculations.mdBreakpoints, fluid typography, grid systemsdeveloper-handoff.mdExport formats, framework setup, Figma sync
Token Generation
Brand color provided in hex format Style matches project requirements All token categories generated Semantic colors include contrast values
Component System
All sizes implemented (sm, md, lg) All variants implemented (primary, secondary, ghost) All states working (hover, active, focus, disabled) Uses only design tokens (no hardcoded values)
Accessibility
Color contrast meets WCAG AA Focus indicators visible Touch targets ≥ 44×44px Semantic HTML elements used
Developer Handoff
Tokens exported in required format Framework integration documented Design tool synced Component documentation complete
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
5 Docs1 Scripts
- SKILL.md
- references/component-architecture.md
- references/developer-handoff.md
- references/responsive-calculations.md
- references/token-generation.md
- scripts/design_token_generator.py