Skip to content
Get packs

OpenClaw Carapace UI Design

Builds OpenClaw app interfaces using shared design tokens, themes and existing UI primitives.

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

What it does

When installed, the agent follows OpenClaw's design system when building or changing user interfaces. It reads reference guides on color, spacing, type and radius tokens, shared CSS components, and layout rules for shells, settings screens, terminal interfaces and embedded app frames. This keeps new screens consistent with existing ones and steers the agent to reuse shared components rather than invent one-off styling.

Great for

  • Developers contributing UI to the OpenClaw applications
  • Designers or front-end engineers who need consistent theme and token usage in OpenClaw screens
  • Teams adding a new consumer app that should match the shared OpenClaw look

Skip it if

  • Projects unrelated to OpenClaw, since the rules and file references target its own shared package and conventions
  • Quick one-off mockups where strict design-system conformance is not needed

Try asking

  • “Add a settings panel to the OpenClaw web app using the existing shared primitives and tokens”
  • “Audit this terminal interface against the OpenClaw terminal UI guidelines”
  • “Create a dark theme variant using the semantic color tokens”
  • “Restyle the operational dashboard so status colors and button hierarchy follow the rules”
Step-by-step guide: how to use OpenClaw Carapace UI DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    openclaw-carapace.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip openclaw-carapace.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

  • Point the agent at the specific screen or component you want changed so it reads the right reference files.
  • Ask it to validate changes with existing tests and browser screenshots, as the workflow recommends.
  • Confirm the agent does not change routes or behavior unless you explicitly ask for it.

What's inside

  • references/application-surfaces.md
  • references/consumer-adapters.md
  • references/embedded-surfaces.md
  • references/terminal-ui.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.