Skip to content
Get packs

OpenClaw Design Router

Routes design work to the right OpenClaw brand, product UI, web page, or audit guidance

Source Download skill
Repository
openclaw/clawhub
Stars
9,546
Licence
MIT
Files
1 file

What it does

This is a routing guide for an AI agent working on OpenClaw's visual design. Instead of applying one generic style, the agent first picks the single most relevant sub-guide: brand identity, product app interface (Carapace), public marketing pages, or a design audit for drift and accessibility. It also sets shared rules, such as using semantic colour tokens instead of raw palette values, checking pages in a real browser at desktop and mobile sizes, and not redistributing fonts or logos without permission.

Great for

  • Developers and designers contributing to OpenClaw websites or product UI
  • Teams maintaining consistent brand and design tokens across several OpenClaw repositories
  • Agents asked to update a landing page or audit an interface for design drift

Skip it if

  • Anyone outside the OpenClaw project: the referenced sub-skills and token rules are specific to OpenClaw, and this file alone does not contain the actual guidance they point to
  • Tasks that need the referenced sub-skills but where they are not installed; the router alone gives limited detail

Try asking

  • “Update the pricing section of the OpenClaw public website on mobile and desktop”
  • “Audit our product settings screen for token misuse and accessibility problems”
  • “Decide whether a new logo variant fits the OpenClaw brand guidelines”
  • “Refresh the shared design CSS to the latest pinned release in this project”
Step-by-step guide: how to use OpenClaw Design RouterInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    openclaw-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

  • Name the surface up front (public web page, product app, brand artifact, or audit) so the agent loads only one branch.
  • Mention whether the project is upgrading from an older lock so the compatibility alias is handled correctly.
  • Ask the agent to check both light and dark themes and both viewport sizes before finishing.

What's inside

  • 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.