{ "schemaVersion": "1.0", "item": { "slug": "distinctive-design-systems", "name": "Distinctive Design Systems", "source": "tencent", "type": "skill", "category": "AI 智能", "sourceUrl": "https://clawhub.ai/wpank/distinctive-design-systems", "canonicalUrl": "https://clawhub.ai/wpank/distinctive-design-systems", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/distinctive-design-systems", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=distinctive-design-systems", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "README.md", "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/distinctive-design-systems" }, "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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/distinctive-design-systems", "agentPageUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent", "manifestUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent.json", "briefUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Distinctive Design Systems", "body": "Create design systems with personality that users remember. Move beyond generic templates to build cohesive, emotionally resonant visual languages." }, { "title": "When to Use", "body": "Building a new product that needs distinctive visual identity\nCreating design tokens for Tailwind + CSS variables\nDocumenting aesthetic decisions for consistent implementation\nWant to go beyond default Bootstrap/Tailwind aesthetics" }, { "title": "Core Philosophy", "body": "A distinctive design system starts with aesthetic documentation, not color pickers.\n\n1. Define the vibe → What does this look and feel like?\n2. Gather references → Mood boards, inspiration, examples\n3. Document emotions → What should users feel?\n4. Extract tokens → Colors, typography, spacing, motion\n5. Build components → Implement the documented vision" }, { "title": "Pattern 1: Aesthetic Foundation", "body": "Document the vibe before writing CSS:" }, { "title": "Example: Retro-Futuristic", "body": "The Vibe: Crystalline, luminescent, slightly melancholic—hopeful hues tempered by muted gradients, sharp typography, and CRT textures. Everything references a primary \"Crystal\" cyan tone.\n\nInspirations:\n\nRetro console boot sequences — Futuristic orderly menus\nJRPG UI panels — Luminous data displays, overlay HUDs\nSci-fi terminal interfaces — Elegant decay, monospaced readouts\n\nEmotionHow It's AchievedPrecisionSharp typography, tabular numerics, grid patternsNostalgiaCRT scanlines, pixel grain, retro-era color paletteHopeFloating cyan orbs, gentle animations, luminous accentsMelancholyDark gradients, muted backgrounds, soft focus layers" }, { "title": "Example: Warm Neutral Cyberpunk", "body": "The Vibe: Warm neutral cyberpunk with a terminal feel. Unlike harsh green-on-black hacker aesthetics, uses warm tan/beige as the foundation, creating approachable yet technical atmosphere.\n\nKey Differentiation: Most dark UIs go cold with neon accents. This approach uses warmth as its secret weapon—the neutral tan base creates visual comfort while emerald accents maintain the futuristic aesthetic.\n\nEmotionHow It's AchievedTechnical credibilityTerminal typography, mono fonts, glow effectsApproachabilityWarm neutral base instead of cold blackPremium qualityGlass panels, backdrop blur, layered shadowsFuturistic trustCircuit patterns, hex grids, scanlines" }, { "title": "The Three-Layer System", "body": "CSS Variables (source of truth)\n ↓\nTailwind Config (utility classes)\n ↓\nTypeScript Tokens (runtime access)" }, { "title": "CSS Variables", "body": ":root {\n /* Base tones (use in rgba()) */\n --tone-void: 2, 7, 18;\n --tone-midnight: 6, 12, 32;\n --tone-cyan: 76, 204, 255;\n \n /* Semantic colors (HSL) */\n --primary: 216 90% 68%;\n --success: 154 80% 60%;\n --destructive: 346 80% 62%;\n \n /* Effect variables */\n --glow-primary: 216 90% 68%;\n --glass-bg: 33 18% 71% / 0.8;\n}" }, { "title": "Tailwind Config", "body": "// tailwind.config.ts\nexport default {\n theme: {\n extend: {\n colors: {\n background: 'hsl(var(--background))',\n foreground: 'hsl(var(--foreground))',\n primary: {\n DEFAULT: 'hsl(var(--primary))',\n foreground: 'hsl(var(--primary-foreground))',\n },\n // Tone palette for rgba usage\n tone: {\n void: 'rgb(var(--tone-void))',\n cyan: 'rgb(var(--tone-cyan))',\n },\n },\n },\n },\n};" }, { "title": "TypeScript Tokens", "body": "// styles/design-tokens.ts\nexport const colors = {\n primary: 'hsl(var(--primary))',\n success: 'hsl(var(--success))',\n // For rgba usage\n toneCyan: 'rgb(var(--tone-cyan))',\n};\n\nexport const withOpacity = (token: string, opacity: number) =>\n token.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`);" }, { "title": "Font Stack", "body": "fonts: {\n display: ['Orbitron', 'system-ui'], // Headings, labels\n mono: ['Share Tech Mono', 'monospace'], // Metrics, code\n sans: ['Inter', 'system-ui'], // Body fallback\n}" }, { "title": "Type Scale with Multiplier", "body": ":root {\n --typo-scale: 0.88; /* Responsive multiplier */\n \n --typo-page-title: calc(1.75rem * var(--typo-scale));\n --typo-section-title: calc(1rem * var(--typo-scale));\n --typo-metric-lg: calc(1.75rem * var(--typo-scale));\n --typo-metric-md: calc(0.96rem * var(--typo-scale));\n --typo-body: calc(0.9rem * var(--typo-scale));\n}\n\n@media (min-width: 640px) {\n :root { --typo-scale: 1; }\n}" }, { "title": "Typography Patterns", "body": "Magazine-Style Numbers:\n\n.metric {\n font-weight: 800;\n letter-spacing: -0.02em;\n font-variant-numeric: tabular-nums;\n}\n\nLabels:\n\n.label {\n text-transform: uppercase;\n letter-spacing: 0.1em;\n font-weight: 700;\n font-size: 0.72rem;\n}" }, { "title": "Layer Hierarchy", "body": "LayerNamePurpose0AmbientFull-viewport gradients, slow motion1Glow FieldFloating orbs, atmospheric effects2TextureCRT scanlines, grain, filters3PanelsElevated cards, section headers4ContentMetrics, charts, tables5DetailsNested sub-panels, rows" }, { "title": "Surface Component", "body": "interface SurfaceProps {\n layer?: 'panel' | 'tile' | 'chip' | 'deep' | 'metric';\n children: React.ReactNode;\n}\n\nexport function Surface({ layer = 'tile', children }: SurfaceProps) {\n return (\n
\n {children}\n
\n );\n}\n\nconst layerStyles = {\n panel: 'bg-tone-cadet/40 border border-tone-jordy/10',\n tile: 'bg-tone-midnight/60 border border-tone-jordy/5',\n chip: 'bg-tone-cyan/10 border border-tone-cyan/20',\n deep: 'bg-tone-void/80',\n metric: 'bg-tone-cadet/20',\n};" }, { "title": "Timing Scale", "body": ":root {\n --transition-fast: 0.15s;\n --transition-default: 0.2s;\n --transition-medium: 0.25s;\n --transition-slow: 0.3s;\n}" }, { "title": "Animation Patterns", "body": "// tailwind.config.ts\nkeyframes: {\n 'shimmer': {\n '0%': { backgroundPosition: '200% 0' },\n '100%': { backgroundPosition: '-200% 0' },\n },\n 'pulse-glow': {\n '0%, 100%': { opacity: '1', transform: 'scale(1)' },\n '50%': { opacity: '0.5', transform: 'scale(1.05)' },\n },\n 'slide-in': {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n 'value-flash': {\n '0%': { textShadow: '0 0 8px currentColor' },\n '100%': { textShadow: 'none' },\n },\n},\nanimation: {\n 'shimmer': 'shimmer 1.5s ease-in-out infinite',\n 'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite',\n 'slide-in': 'slide-in 0.2s ease-out',\n 'value-flash': 'value-flash 0.6s ease-out',\n}" }, { "title": "Glass Panel", "body": ".glass-panel {\n background: linear-gradient(180deg, \n hsl(var(--glass-bg) / 0.95) 0%, \n hsl(var(--glass-bg) / 0.85) 100%\n );\n backdrop-filter: blur(16px);\n border: 1px solid hsl(var(--glass-border));\n box-shadow: \n 0 4px 16px hsl(var(--glass-shadow)),\n 0 0 0 1px hsl(var(--glass-border) / 0.6) inset,\n 0 0 20px hsl(var(--glow-primary) / 0.1);\n}" }, { "title": "Neon Border", "body": ".neon-border {\n border: 1px solid hsl(var(--brand-600) / 0.4);\n box-shadow: \n 0 0 10px hsl(var(--glow-primary) / 0.3),\n 0 0 20px hsl(var(--glow-primary) / 0.2),\n inset 0 0 10px hsl(var(--glow-primary) / 0.1);\n}" }, { "title": "Proven Aesthetic Directions", "body": "AestheticInspirationsEmotionsRetro-futuristic glassmorphismRetro console UIs, JRPG HUDs, sci-fi terminalsPrecision, nostalgia, hopeWarm neutral cyberpunkTerminal UIs, sci-fi film interfacesCredibility, approachabilityMagazine-style financialTrading platforms, data dashboardsTrust, clarity, sophistication" }, { "title": "Related Skills", "body": "Meta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\ndesign-system-components — CVA component patterns and Surface primitives\nloading-state-patterns — Skeleton loaders matching your aesthetic" }, { "title": "NEVER Do", "body": "Use pure black (#000) as base — Always use tinted blacks\nUse pure white (#fff) for text — Use tinted whites\nUse Inter/Roboto for headings — Display fonts create distinctiveness\nUse default Tailwind colors — Define your own palette\nSkip backdrop-filter blur — Glass panels need blur\nApply decorative patterns to readable content — Background only\nUse high-saturation colors without opacity — Modulate with rgba()\nHardcode font sizes — Use tokens with scale multiplier\nSkip the aesthetic documentation — Vibes before code" }, { "title": "File Structure", "body": "styles/\n├── globals.css # CSS variables, base styles\n├── design-tokens.ts # TypeScript token exports\n├── theme.css # Component patterns\n└── patterns/\n ├── glass.css\n ├── neon.css\n └── backgrounds.css\n\ntailwind.config.ts # Token integration" }, { "title": "Quick Reference", "body": "/* 1. Define CSS variables */\n:root {\n --tone-primary: 76, 204, 255;\n --primary: 200 90% 65%;\n}\n\n/* 2. Configure Tailwind */\ncolors: {\n primary: 'hsl(var(--primary))',\n tone: { primary: 'rgb(var(--tone-primary))' },\n}\n\n/* 3. Use in components */\n
" } ], "body": "Distinctive Design Systems\n\nCreate design systems with personality that users remember. Move beyond generic templates to build cohesive, emotionally resonant visual languages.\n\nWhen to Use\nBuilding a new product that needs distinctive visual identity\nCreating design tokens for Tailwind + CSS variables\nDocumenting aesthetic decisions for consistent implementation\nWant to go beyond default Bootstrap/Tailwind aesthetics\nCore Philosophy\n\nA distinctive design system starts with aesthetic documentation, not color pickers.\n\n1. Define the vibe → What does this look and feel like?\n2. Gather references → Mood boards, inspiration, examples\n3. Document emotions → What should users feel?\n4. Extract tokens → Colors, typography, spacing, motion\n5. Build components → Implement the documented vision\n\nPattern 1: Aesthetic Foundation\n\nDocument the vibe before writing CSS:\n\nExample: Retro-Futuristic\n\nThe Vibe: Crystalline, luminescent, slightly melancholic—hopeful hues tempered by muted gradients, sharp typography, and CRT textures. Everything references a primary \"Crystal\" cyan tone.\n\nInspirations:\n\nRetro console boot sequences — Futuristic orderly menus\nJRPG UI panels — Luminous data displays, overlay HUDs\nSci-fi terminal interfaces — Elegant decay, monospaced readouts\nEmotion\tHow It's Achieved\nPrecision\tSharp typography, tabular numerics, grid patterns\nNostalgia\tCRT scanlines, pixel grain, retro-era color palette\nHope\tFloating cyan orbs, gentle animations, luminous accents\nMelancholy\tDark gradients, muted backgrounds, soft focus layers\nExample: Warm Neutral Cyberpunk\n\nThe Vibe: Warm neutral cyberpunk with a terminal feel. Unlike harsh green-on-black hacker aesthetics, uses warm tan/beige as the foundation, creating approachable yet technical atmosphere.\n\nKey Differentiation: Most dark UIs go cold with neon accents. This approach uses warmth as its secret weapon—the neutral tan base creates visual comfort while emerald accents maintain the futuristic aesthetic.\n\nEmotion\tHow It's Achieved\nTechnical credibility\tTerminal typography, mono fonts, glow effects\nApproachability\tWarm neutral base instead of cold black\nPremium quality\tGlass panels, backdrop blur, layered shadows\nFuturistic trust\tCircuit patterns, hex grids, scanlines\nPattern 2: Color Token Architecture\nThe Three-Layer System\nCSS Variables (source of truth)\n ↓\nTailwind Config (utility classes)\n ↓\nTypeScript Tokens (runtime access)\n\nCSS Variables\n:root {\n /* Base tones (use in rgba()) */\n --tone-void: 2, 7, 18;\n --tone-midnight: 6, 12, 32;\n --tone-cyan: 76, 204, 255;\n \n /* Semantic colors (HSL) */\n --primary: 216 90% 68%;\n --success: 154 80% 60%;\n --destructive: 346 80% 62%;\n \n /* Effect variables */\n --glow-primary: 216 90% 68%;\n --glass-bg: 33 18% 71% / 0.8;\n}\n\nTailwind Config\n// tailwind.config.ts\nexport default {\n theme: {\n extend: {\n colors: {\n background: 'hsl(var(--background))',\n foreground: 'hsl(var(--foreground))',\n primary: {\n DEFAULT: 'hsl(var(--primary))',\n foreground: 'hsl(var(--primary-foreground))',\n },\n // Tone palette for rgba usage\n tone: {\n void: 'rgb(var(--tone-void))',\n cyan: 'rgb(var(--tone-cyan))',\n },\n },\n },\n },\n};\n\nTypeScript Tokens\n// styles/design-tokens.ts\nexport const colors = {\n primary: 'hsl(var(--primary))',\n success: 'hsl(var(--success))',\n // For rgba usage\n toneCyan: 'rgb(var(--tone-cyan))',\n};\n\nexport const withOpacity = (token: string, opacity: number) =>\n token.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`);\n\nPattern 3: Typography System\nFont Stack\nfonts: {\n display: ['Orbitron', 'system-ui'], // Headings, labels\n mono: ['Share Tech Mono', 'monospace'], // Metrics, code\n sans: ['Inter', 'system-ui'], // Body fallback\n}\n\nType Scale with Multiplier\n:root {\n --typo-scale: 0.88; /* Responsive multiplier */\n \n --typo-page-title: calc(1.75rem * var(--typo-scale));\n --typo-section-title: calc(1rem * var(--typo-scale));\n --typo-metric-lg: calc(1.75rem * var(--typo-scale));\n --typo-metric-md: calc(0.96rem * var(--typo-scale));\n --typo-body: calc(0.9rem * var(--typo-scale));\n}\n\n@media (min-width: 640px) {\n :root { --typo-scale: 1; }\n}\n\nTypography Patterns\n\nMagazine-Style Numbers:\n\n.metric {\n font-weight: 800;\n letter-spacing: -0.02em;\n font-variant-numeric: tabular-nums;\n}\n\n\nLabels:\n\n.label {\n text-transform: uppercase;\n letter-spacing: 0.1em;\n font-weight: 700;\n font-size: 0.72rem;\n}\n\nPattern 4: Layered Surface System\nLayer Hierarchy\nLayer\tName\tPurpose\n0\tAmbient\tFull-viewport gradients, slow motion\n1\tGlow Field\tFloating orbs, atmospheric effects\n2\tTexture\tCRT scanlines, grain, filters\n3\tPanels\tElevated cards, section headers\n4\tContent\tMetrics, charts, tables\n5\tDetails\tNested sub-panels, rows\nSurface Component\ninterface SurfaceProps {\n layer?: 'panel' | 'tile' | 'chip' | 'deep' | 'metric';\n children: React.ReactNode;\n}\n\nexport function Surface({ layer = 'tile', children }: SurfaceProps) {\n return (\n
\n {children}\n
\n );\n}\n\nconst layerStyles = {\n panel: 'bg-tone-cadet/40 border border-tone-jordy/10',\n tile: 'bg-tone-midnight/60 border border-tone-jordy/5',\n chip: 'bg-tone-cyan/10 border border-tone-cyan/20',\n deep: 'bg-tone-void/80',\n metric: 'bg-tone-cadet/20',\n};\n\nPattern 5: Motion Tokens\nTiming Scale\n:root {\n --transition-fast: 0.15s;\n --transition-default: 0.2s;\n --transition-medium: 0.25s;\n --transition-slow: 0.3s;\n}\n\nAnimation Patterns\n// tailwind.config.ts\nkeyframes: {\n 'shimmer': {\n '0%': { backgroundPosition: '200% 0' },\n '100%': { backgroundPosition: '-200% 0' },\n },\n 'pulse-glow': {\n '0%, 100%': { opacity: '1', transform: 'scale(1)' },\n '50%': { opacity: '0.5', transform: 'scale(1.05)' },\n },\n 'slide-in': {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n 'value-flash': {\n '0%': { textShadow: '0 0 8px currentColor' },\n '100%': { textShadow: 'none' },\n },\n},\nanimation: {\n 'shimmer': 'shimmer 1.5s ease-in-out infinite',\n 'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite',\n 'slide-in': 'slide-in 0.2s ease-out',\n 'value-flash': 'value-flash 0.6s ease-out',\n}\n\nPattern 6: Glass & Glow Effects\nGlass Panel\n.glass-panel {\n background: linear-gradient(180deg, \n hsl(var(--glass-bg) / 0.95) 0%, \n hsl(var(--glass-bg) / 0.85) 100%\n );\n backdrop-filter: blur(16px);\n border: 1px solid hsl(var(--glass-border));\n box-shadow: \n 0 4px 16px hsl(var(--glass-shadow)),\n 0 0 0 1px hsl(var(--glass-border) / 0.6) inset,\n 0 0 20px hsl(var(--glow-primary) / 0.1);\n}\n\nNeon Border\n.neon-border {\n border: 1px solid hsl(var(--brand-600) / 0.4);\n box-shadow: \n 0 0 10px hsl(var(--glow-primary) / 0.3),\n 0 0 20px hsl(var(--glow-primary) / 0.2),\n inset 0 0 10px hsl(var(--glow-primary) / 0.1);\n}\n\nProven Aesthetic Directions\nAesthetic\tInspirations\tEmotions\nRetro-futuristic glassmorphism\tRetro console UIs, JRPG HUDs, sci-fi terminals\tPrecision, nostalgia, hope\nWarm neutral cyberpunk\tTerminal UIs, sci-fi film interfaces\tCredibility, approachability\nMagazine-style financial\tTrading platforms, data dashboards\tTrust, clarity, sophistication\nRelated Skills\nMeta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\ndesign-system-components — CVA component patterns and Surface primitives\nloading-state-patterns — Skeleton loaders matching your aesthetic\nNEVER Do\nUse pure black (#000) as base — Always use tinted blacks\nUse pure white (#fff) for text — Use tinted whites\nUse Inter/Roboto for headings — Display fonts create distinctiveness\nUse default Tailwind colors — Define your own palette\nSkip backdrop-filter blur — Glass panels need blur\nApply decorative patterns to readable content — Background only\nUse high-saturation colors without opacity — Modulate with rgba()\nHardcode font sizes — Use tokens with scale multiplier\nSkip the aesthetic documentation — Vibes before code\nFile Structure\nstyles/\n├── globals.css # CSS variables, base styles\n├── design-tokens.ts # TypeScript token exports\n├── theme.css # Component patterns\n└── patterns/\n ├── glass.css\n ├── neon.css\n └── backgrounds.css\n\ntailwind.config.ts # Token integration\n\nQuick Reference\n/* 1. Define CSS variables */\n:root {\n --tone-primary: 76, 204, 255;\n --primary: 200 90% 65%;\n}\n\n/* 2. Configure Tailwind */\ncolors: {\n primary: 'hsl(var(--primary))',\n tone: { primary: 'rgb(var(--tone-primary))' },\n}\n\n/* 3. Use in components */\n
" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/wpank/distinctive-design-systems", "publisherUrl": "https://clawhub.ai/wpank/distinctive-design-systems", "owner": "wpank", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/distinctive-design-systems", "downloadUrl": "https://openagent3.xyz/downloads/distinctive-design-systems", "agentUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent", "manifestUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent.json", "briefUrl": "https://openagent3.xyz/skills/distinctive-design-systems/agent.md" } }