# Send Design System Creation 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. 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.
```
### 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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "design-system-creation",
    "name": "Design System Creation",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/wpank/design-system-creation",
    "canonicalUrl": "https://clawhub.ai/wpank/design-system-creation",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/design-system-creation",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=design-system-creation",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.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/design-system-creation"
    },
    "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-creation",
    "downloadUrl": "https://openagent3.xyz/downloads/design-system-creation",
    "agentUrl": "https://openagent3.xyz/skills/design-system-creation/agent",
    "manifestUrl": "https://openagent3.xyz/skills/design-system-creation/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/design-system-creation/agent.md"
  }
}
```
## Documentation

### Design System Creation (Meta-Skill)

Complete workflow for creating distinctive design systems with personality.

### OpenClaw / Moltbot / Clawbot

npx clawhub@latest install design-system-creation

### When to Use

Starting a new product that needs visual identity
Refactoring an existing design with scattered styles
Building a component library with design tokens
Want to go beyond generic Tailwind/Bootstrap aesthetics

### Workflow Overview

1. Aesthetic Foundation   → Document the vibe before code
2. Color Token System     → CSS variables + Tailwind + TypeScript
3. Typography System      → Font stack + scale + patterns
4. Surface Components     → Layered primitives with CVA
5. Motion Tokens          → Consistent animation timing
6. Loading States         → Skeleton + shimmer patterns

### Step 1: Aesthetic Foundation

Read: ai/skills/design-systems/distinctive-design-systems

Before writing CSS, document the aesthetic:

## The Vibe
[1-2 sentences describing the visual feel]

## Inspirations
- [Reference 1 - what to take from it]
- [Reference 2 - what to take from it]

## Emotions to Evoke
| Emotion | How It's Achieved |
|---------|-------------------|
| [X] | [specific technique] |
| [Y] | [specific technique] |

### Proven Directions to Consider

AestheticCharacteristicsRetro-futuristicCRT textures, glow effects, monospace fontsWarm cyberpunkTan/beige base, emerald accents, glass panelsMagazine financialBold typography, dark theme, gradient text

### Step 2: Color Token Architecture

Read: ai/skills/design-systems/distinctive-design-systems

Create the three-layer token system:

/* 1. CSS Variables (source of truth) */
:root {
  --tone-primary: 76, 204, 255;
  --primary: 200 90% 65%;
  --success: 154 80% 60%;
  --destructive: 346 80% 62%;
}

// 2. Tailwind Config
colors: {
  primary: 'hsl(var(--primary))',
  tone: { primary: 'rgb(var(--tone-primary))' },
}

// 3. TypeScript Tokens (optional)
export const colors = {
  primary: 'hsl(var(--primary))',
};

### Step 3: Typography System

Read: ai/skills/design-systems/distinctive-design-systems

Define fonts and scale:

:root {
  --font-display: 'Orbitron', system-ui;
  --font-mono: 'Share Tech Mono', monospace;
  --font-sans: 'Inter', system-ui;
  
  --typo-scale: 0.88;  /* Mobile */
}

@media (min-width: 640px) {
  :root { --typo-scale: 1; }
}

### Typography Patterns

/* Magazine-style numbers */
.metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Labels */
.label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

### Step 4: Surface Components

Read: ai/skills/design-systems/design-system-components

Build layered surface primitives with CVA:

const surfaceVariants = cva(
  'rounded-lg backdrop-blur-sm transition-colors',
  {
    variants: {
      layer: {
        panel: 'bg-tone-cadet/40 border border-tone-jordy/10',
        tile: 'bg-tone-midnight/60 border border-tone-jordy/5',
        chip: 'bg-tone-cyan/10 border border-tone-cyan/20 rounded-full',
      },
    },
  }
);

export function Surface({ layer, children }: SurfaceProps) {
  return <div className={surfaceVariants({ layer })}>{children}</div>;
}

### Step 5: Motion Tokens

Read: ai/skills/design-systems/distinctive-design-systems

Define consistent animation timing:

// tailwind.config.ts
keyframes: {
  'shimmer': { '0%': { backgroundPosition: '200% 0' }, '100%': { backgroundPosition: '-200% 0' } },
  'pulse-glow': { '0%, 100%': { opacity: '1' }, '50%': { opacity: '0.5' } },
  'slide-in': { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
},
animation: {
  'shimmer': 'shimmer 1.5s ease-in-out infinite',
  'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite',
  'slide-in': 'slide-in 0.2s ease-out',
}

### Step 6: Loading States

Read: ai/skills/design-systems/loading-state-patterns

Create skeleton components that match your aesthetic:

export function Skeleton({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        'rounded-md bg-muted animate-shimmer',
        'bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%]',
        className
      )}
    />
  );
}

### Component Skills Reference

SkillPurposedistinctive-design-systemsAesthetic foundation, tokensdesign-system-componentsSurface primitives, CVAanimated-financial-displayNumber animationsloading-state-patternsSkeletons, shimmerfinancial-data-visualizationChart theming

### File Structure

styles/
├── globals.css          # CSS variables, base styles
├── design-tokens.ts     # TypeScript exports
└── theme.css            # Component patterns

tailwind.config.ts       # Token integration

components/
├── ui/
│   ├── surface.tsx      # Surface primitive
│   ├── skeleton.tsx     # Loading states
│   └── button.tsx       # Variant components

### NEVER Do

Never start with code before documenting aesthetic — Vibes before CSS
Never use pure black (#000) as base — Always use tinted blacks for depth
Never use pure white (#fff) for text — Use tinted whites that match the palette
Never skip design tokens in favor of hardcoded values — Tokens prevent drift
Never create components without variant system — Use CVA or similar for consistency
Never use Inter/Roboto for headings — Display fonts create distinctiveness
Never use default Tailwind colors — Define your own palette
Never skip backdrop-filter blur on glass — Glass panels need blur to work
Never apply decorative patterns to readable content — Background decoration only
Never use high-saturation colors without opacity — Modulate with rgba()

### Checklist

Document aesthetic foundation (vibe, inspirations, emotions)
 Create color token system (CSS + Tailwind + TS)
 Define typography stack and scale
 Build Surface primitive component
 Add motion tokens and animations
 Create loading state components
 Document anti-patterns (what NOT to do)
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: wpank
- Version: 1.0.0
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-23T16:43:11.935Z
- Expires at: 2026-04-30T16:43:11.935Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/design-system-creation)
- [Send to Agent page](https://openagent3.xyz/skills/design-system-creation/agent)
- [JSON manifest](https://openagent3.xyz/skills/design-system-creation/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/design-system-creation/agent.md)
- [Download page](https://openagent3.xyz/downloads/design-system-creation)