# Send 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": "design-system", "name": "Design System", "source": "tencent", "type": "skill", "category": "AI 智能", "sourceUrl": "https://clawhub.ai/ivangdavila/design-system", "canonicalUrl": "https://clawhub.ai/ivangdavila/design-system", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/design-system", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "memory-template.md", "setup.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "design-system", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-01T02:42:24.558Z", "expiresAt": "2026-05-08T02:42:24.558Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system", "contentDisposition": "attachment; filename=\"design-system-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "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/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/design-system", "downloadUrl": "https://openagent3.xyz/downloads/design-system", "agentUrl": "https://openagent3.xyz/skills/design-system/agent", "manifestUrl": "https://openagent3.xyz/skills/design-system/agent.json", "briefUrl": "https://openagent3.xyz/skills/design-system/agent.md" } } ``` ## Documentation ### Setup On first use, read setup.md for integration guidelines. All preferences are stored in ~/design-system/memory.md. ### When to Use User needs to create, maintain, or extend a design system. Agent handles token architecture, component patterns, documentation structure, and cross-platform consistency. ### Architecture Memory lives in ~/design-system/. See memory-template.md for structure. ~/design-system/ ├── memory.md # Status + context + decisions └── tokens/ # Token definitions if exported ### Quick Reference TopicFileSetup processsetup.mdMemory templatememory-template.md ### 1. Tokens First, Components Second Design tokens are the foundation. Before building any component: Define color tokens (semantic, not raw hex) Define spacing scale (consistent multiplier) Define typography scale (modular) Components consume tokens. Never hardcode values. ### 2. Semantic Over Literal Naming BadGoodblue-500primary14pxtext-sm8pxspace-2 Semantic names survive rebrand. Literal names break everything. ### 3. Three-Tier Token Architecture Primitive → Semantic → Component ↓ ↓ ↓ gray-900 text-primary button-text Primitive: Raw values (colors, sizes) Semantic: Meaning-based (primary, danger, muted) Component: Specific use (button-bg, card-border) ### 4. Document Decisions, Not Just Specs Every token and component needs: What: The value or pattern When: Usage context Why: The decision behind it When NOT: Anti-patterns to avoid ### 5. Platform-Agnostic Source of Truth Design tokens should export to: CSS custom properties Tailwind config iOS/Android native Figma variables One source, many outputs. Use Style Dictionary or similar. ### 6. Component API Consistency All components follow the same patterns: Same prop naming (variant, size, disabled) Same size scale (sm, md, lg) Same variant names (primary, secondary, ghost) Predictability beats cleverness. ### 7. Versioning and Migration Breaking changes need: Version bump (semver) Migration guide Deprecation warnings before removal Codemods when possible ### Common Traps Premature abstraction → Build 3 instances before extracting a pattern Token explosion → 50 grays is not a system, it is chaos Skipping documentation → Undocumented patterns get reimplemented wrong Designing for edge cases first → Cover 80% well before 100% poorly No dark mode strategy → Retrofit is 10x harder than planning upfront Inconsistent spacing → Use a scale (4px base), not arbitrary values Component prop sprawl → More than 10 props means split the component ### Security & Privacy Data that stays local: Design decisions in ~/design-system/ Token definitions and component specs This skill does NOT: Access files outside ~/design-system/ Make network requests Store sensitive data ### Related Skills Install with clawhub install if user confirms: css — Styling fundamentals tailwindcss — Utility-first CSS frontend — Frontend development ui — User interface patterns design — Design principles ### Feedback If useful: clawhub star design-system Stay updated: clawhub sync ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ivangdavila - Version: 1.0.0 ## 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-01T02:42:24.558Z - Expires at: 2026-05-08T02:42:24.558Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/design-system) - [Send to Agent page](https://openagent3.xyz/skills/design-system/agent) - [JSON manifest](https://openagent3.xyz/skills/design-system/agent.json) - [Markdown brief](https://openagent3.xyz/skills/design-system/agent.md) - [Download page](https://openagent3.xyz/downloads/design-system)