Design System Creation

Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.

Security Scan

An instruction-only meta-skill for creating design systems that is internally consistent with its description and does not request credentials, install code, or perform suspicious actions.

Purpose & Capability

The skill's name, description, and runtime instructions all focus on authoring design-system artifacts (tokens, typography, components, motion). It does not declare unrelated binaries, environment variables, or credentials, so the requested capabilities are proportional to the stated purpose.

Instruction Scope

Runtime instructions are prose and code examples for building design systems. They include several 'Read: ai/skills/...' references to other component skills (logical for a meta-skill). This may cause an agent to attempt to load local skill files for context — not inherently malicious but worth reviewing. No instructions ask the agent to read system secrets or send data to external endpoints.

Install Mechanism

There is no install spec in the skill bundle (instruction-only), which minimizes risk. The README shows example install commands (npx clawhub@latest install ... and an npx add GitHub URL) — those commands, if executed, would fetch/execute remote code. That is an installation-time risk (not intrinsic to the skill content) and should be handled by inspecting the referenced repository before running such commands.

Credentials

The skill declares no required environment variables, credentials, or config paths. There are no requests for tokens or secrets and no use of environment data in the instructions, so requested access is proportional.

Persistence & Privilege

Flags show default behavior (always: false, autonomous invocation allowed). The skill does not request persistent system presence or elevated privileges.

Assessment

This skill is an instruction-only design-system meta-skill and appears coherent with its description. Before installing or running any provided installation commands: (1) verify the skill source — the homepage is missing and the owner is unknown; (2) inspect the remote repository referenced in README (or avoid running npx commands you don't trust); (3) do not blindly execute copy/install commands that reference ~/.ai-skills, ~/.cursor, or other home directories; and (4) review any referenced component skills listed in the document to ensure they are trustworthy. If you want extra safety, clone the repo into an isolated project or sandbox and read the files locally rather than running remote installers.

Design System Creation (Meta-Skill)

Complete workflow for creating distinctive design systems with personality.

Installation

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

Aesthetic	Characteristics
Retro-futuristic	CRT textures, glow effects, monospace fonts
Warm cyberpunk	Tan/beige base, emerald accents, glass panels
Magazine financial	Bold 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

Skill	Purpose
distinctive-design-systems	Aesthetic foundation, tokens
design-system-components	Surface primitives, CVA
animated-financial-display	Number animations
loading-state-patterns	Skeletons, shimmer
financial-data-visualization	Chart 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)