Skip to content
Get packs

OpenClaw Design System (Compatibility Alias)

Applies OpenClaw's Carapace design tokens, themes and UI primitives to front-end work

Source Download skill
Repository
openclaw/clawhub
Stars
9,546
Licence
MIT
Files
3 files

What it does

This is a compatibility alias: an older name that still works for existing OpenClaw projects while they move to the newer openclaw-carapace skill. When installed, the agent follows OpenClaw's visual rules when building or changing interfaces: it reads the design token reference before picking colors, spacing, type, radii or shadows, reuses shared CSS classes and local UI components instead of inventing one-off styles, and checks the framework-specific adapter guide. It also checks which design package a project imports and keeps app behavior, routes and layout unchanged unless asked.

Great for

  • Developers maintaining an existing OpenClaw web interface that already uses this skill name in skills-lock.json
  • Front-end engineers who want new screens to match OpenClaw's established tokens and components
  • Teams migrating from @openclaw/design-system to @openclaw/carapace

Skip it if

  • New projects that are not part of OpenClaw: the rules and token names are specific to that design system, and the skill itself says new installs should use openclaw-carapace instead
  • Anyone expecting a general-purpose design generator: it constrains work to existing shared primitives rather than producing fresh visual designs

Try asking

  • “Add a settings page to our OpenClaw dashboard using the existing shared primitives and semantic tokens”
  • “Replace the raw buttons in this route with the local button component and check the states”
  • “Migrate our imports from @openclaw/design-system to @openclaw/carapace if the package is installed”
Step-by-step guide: how to use OpenClaw Design System (Compatibility Alias)Install, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    openclaw-design-system.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip openclaw-design-system.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip openclaw-design-system.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Install openclaw-carapace for new work; use this alias only to keep existing skills-lock.json entries working
  • Point the agent at the specific route or component you want changed so it can inspect existing primitives first
  • Ask for screenshots or test runs so the agent's UI changes can be checked visually

What's inside

  • references/consumer-adapters.md
  • references/tokens.md
  • SKILL.md

Redistributed unmodified from openclaw/clawhub under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.