# Send Ui Design System to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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 ```text 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. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "ui-design-system", "name": "Ui Design System", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/alirezarezvani/ui-design-system", "canonicalUrl": "https://clawhub.ai/alirezarezvani/ui-design-system", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/ui-design-system", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design-system", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "references/component-architecture.md", "references/developer-handoff.md", "references/responsive-calculations.md", "references/token-generation.md", "scripts/design_token_generator.py" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "ui-design-system", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-10T09:20:22.329Z", "expiresAt": "2026-05-17T09:20:22.329Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design-system", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-design-system", "contentDisposition": "attachment; filename=\"ui-design-system-2.1.1.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "ui-design-system" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/ui-design-system" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/ui-design-system", "downloadUrl": "https://openagent3.xyz/downloads/ui-design-system", "agentUrl": "https://openagent3.xyz/skills/ui-design-system/agent", "manifestUrl": "https://openagent3.xyz/skills/ui-design-system/agent.json", "briefUrl": "https://openagent3.xyz/skills/ui-design-system/agent.md" } } ``` ## 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'; 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 ## Trust - Source: tencent - Verification: Indexed source record - Publisher: alirezarezvani - Version: 2.1.1 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-10T09:20:22.329Z - Expires at: 2026-05-17T09:20:22.329Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/ui-design-system) - [Send to Agent page](https://openagent3.xyz/skills/ui-design-system/agent) - [JSON manifest](https://openagent3.xyz/skills/ui-design-system/agent.json) - [Markdown brief](https://openagent3.xyz/skills/ui-design-system/agent.md) - [Download page](https://openagent3.xyz/downloads/ui-design-system)