Skip to content
Get packs

Guide · Agent skill

How to use the OpenClaw Design Router agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The openclaw-design skill is a routing guide for an AI agent doing visual design work on OpenClaw. Instead of applying one generic style, it sends the agent to the one sub-guide that fits the task: brand identity, product app interface (Carapace), public marketing pages, or a design audit. This guide explains what agent skills are, how to install this one, how to trigger it, and what it needs to run. By the end you will know which requests activate it and what prerequisites you must meet.

OpenClaw Design Routeropenclaw/clawhub · MIT

Quick start

  1. 1Download the ZIP. Get the openclaw-design ZIP from this directory page.
  2. 2Unzip the folder. Extract the archive so you have an openclaw-design folder containing SKILL.md.
  3. 3Place it in the skills folder. Move the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ in your project.
  4. 4Or upload in the Claude apps. Alternatively, upload the skill under Settings → Capabilities → Skills.
  5. 5Get the sub-skills. Make sure you have access to the OpenClaw repository and its openclaw-brand, openclaw-carapace, openclaw-marketing-pages and openclaw-design-audit sub-skills.
  6. 6Make a request. Ask the agent for a specific OpenClaw design task, such as updating a landing page or auditing an interface.
  7. 7Validate in a browser. Check the result in a real browser at desktop and mobile sizes, in light and dark themes where supported.

What is an agent skill and what does this one do?

An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a task matches the skill's description. This skill is named openclaw-design and its file is SKILL.md.

Its job is routing. Before the agent changes an interface, it chooses one focused branch. The table in the skill maps each branch to its use: openclaw-brand for identity, typography, logos, imagery and voice; openclaw-carapace for application UI, semantic tokens, themes and component reuse; openclaw-marketing-pages for public-page composition, navigation, SEO and responsive layout; and openclaw-design-audit for design drift, token misuse, accessibility and recurring audits.

  • Public website change: start with openclaw-marketing-pages, and add openclaw-brand only if identity, logo, imagery, typography or voice changes.
  • Product application: start with openclaw-carapace when it is installed.
  • Older projects on an existing skill lock may use openclaw-design-system as a compatibility alias for v0.1.x.

Install the openclaw-design skill from the ZIP

Download the ZIP for the skill from this directory page. Unzip it and place the openclaw-design folder in one of two locations. For a personal setup available across projects, use ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.

Alternatively, if you use the Claude apps, you can upload the skill under Settings → Capabilities → Skills instead of copying files manually.

  • Personal: ~/.claude/skills/openclaw-design/
  • Project only: .claude/skills/openclaw-design/ inside your project

Trigger the skill with natural requests

You do not need a special command. The agent decides to use the skill when your request touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages or Carapace compliance. Name the surface you are working on so the router can pick the right branch.

Requests that should trigger it include updating a landing page, auditing an interface for design drift, or changing a shared colour token. Mention OpenClaw explicitly, because the skill's rules are specific to that project.

  • Update the OpenClaw homepage hero and keep the navigation consistent.
  • Audit the settings screen of our OpenClaw app for token misuse and accessibility problems.
  • Change the logo placement on the docs site, following OpenClaw brand rules.
  • Check whether this component follows Carapace component reuse guidance.

Set up the sub-skills and update command

The router points to four sub-skills: openclaw-brand, openclaw-carapace, openclaw-marketing-pages and openclaw-design-audit. This file alone does not contain their guidance, so they must be available from the OpenClaw repository. The skill says to install agent guidance from the repository's default branch and refresh it with the command below, which requires npx and the skills CLI pinned to version 1.5.16.

Keep runtime CSS pinned to a semantic release tag, and add shared implementation only after at least two consumers demonstrate the same interface.

npx skills@1.5.16 update --project --yes

Follow the shared rules

Every branch follows a short shared contract. Prefer semantic tokens over raw palette values. Keep product-specific components and layouts in their consumer repository. Preserve consumer behaviour while you change the visual foundation.

Validate your work in a real browser at desktop and mobile sizes, and check light and dark themes where the consumer supports them. Do not redistribute fonts, logos or artwork without recorded permission.

  • Use semantic tokens, not raw palette values.
  • Test in a real browser at desktop and mobile sizes.
  • Check light and dark themes where supported.
  • Do not share fonts, logos or artwork without permission.

Safety notes: scripts and network

The skill itself runs no scripts. It does use the network: the update step fetches guidance from the OpenClaw repository through npx. Review what the command pulls in before running it in a sensitive environment, and make sure you are comfortable with the repository source.

Using the skill also assumes you have access to the OpenClaw repository and its sub-skills. Without them, the router gives limited detail.

  • Runs scripts: no
  • Uses network: yes (the npx update command)

What people use it for

  • Updating a public OpenClaw landing page while keeping navigation and responsive layout consistent.
  • Auditing a product interface for token misuse, component substitution and accessibility issues.
  • Changing a logo or typography on a non-product brand artifact under OpenClaw brand rules.
  • Refreshing agent guidance across several OpenClaw repositories with the pinned update command.

Frequently asked questions

Is the openclaw-design skill free?

The skill is published under the MIT licence. The source does not mention pricing, so check the repository for any other terms before relying on it.

What do I need to use the openclaw-design skill?

You need access to the OpenClaw repository and its sub-skills, npx with the skills CLI pinned to version 1.5.16 for the update command, and a real browser for visual checks. The skill is not useful on its own without the sub-skills.

Where do I install an agent skill like this one?

Unzip the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.

Does the skill run scripts or access the internet?

The skill runs no scripts. It does use the network, because the update command fetches guidance from the OpenClaw repository through npx.

Can I use this skill outside the OpenClaw project?

The skill is designed for OpenClaw. Its sub-skills and token rules are specific to that project, so it will not give useful guidance for other products.

What should I use instead if I just want general design advice?

If your project is not OpenClaw, this skill is the wrong tool. Use a general design or front-end skill instead, since the OpenClaw routing and token rules do not apply to your codebase.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you contribute to OpenClaw websites, product UI or shared design tokens, and you have access to the OpenClaw repository and its sub-skills. Pick something else if you work outside OpenClaw or need detailed guidance on your own, because this router on its own gives limited detail.

Download the skill