Guide · Agent skill
How to use the openclaw-design-system agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The openclaw-design-system skill is a compatibility alias for existing OpenClaw projects. When an agent has it installed, it follows OpenClaw's visual rules when building or changing an interface, so new screens reuse the design system's tokens, shared CSS classes and local components instead of one-off styles. This guide explains what the skill does, how to install it, what it needs, and how to ask for work that uses it.
OpenClaw Design System (Compatibility Alias)openclaw/clawhub · MIT Download the skill Quick start
- 1Confirm the project is an OpenClaw project. Check that the consumer manifest installs @openclaw/carapace or the legacy @openclaw/design-system. If the project is new and outside OpenClaw, use openclaw-carapace instead.
- 2Download and unzip the skill. Download the ZIP from this directory page and unzip it into ~/.claude/skills/ for personal use or the project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. If you use the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Make a request in plain language. Name the screen or component, mention the OpenClaw design system, and state what must not change, such as routes or behavior.
- 5Let the agent read the references. The agent reads the token reference and the adapter guide for your framework before it chooses colors, spacing or components.
- 6Validate in the browser. Run the project's existing tests and check the affected routes with real browser screenshots before accepting the change.
What the openclaw-design-system skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a task matches it. This skill covers interface work in projects that use the OpenClaw design system. Its instructions tell the agent to read the design token reference before choosing colors, spacing, type, radii or shadows.
The skill also tells the agent to reuse shared CSS classes and local UI components before creating anything new, to check the framework-specific adapter guide, and to keep application behavior, routes and layout unchanged unless the task asks for a change. Before it changes any imports, the agent checks which design package the project actually installs.
- Reads references/tokens.md before choosing visual values
- Reads references/consumer-adapters.md for the project's current framework
- Composes shared classes from components.css before adding a one-off style
- Uses local shared primitives before raw controls
- Validates affected routes with existing tests and real browser screenshots
Install the skill from the ZIP or the Claude apps
Download the ZIP from this directory page and unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills
Check that this is the right skill for your project
This skill is meant for existing OpenClaw projects. The skill itself says it remains available for existing skills-lock.json entries and that new installations should use openclaw-carapace. If your project is new, install openclaw-carapace instead.
Look at the consumer manifest. If @openclaw/carapace is installed, use that package name. If only the legacy @openclaw/design-system is installed, keep that specifier until the dependency is migrated.
- Existing OpenClaw web interface that lists this skill name in skills-lock.json: a good fit
- New project outside OpenClaw: pick openclaw-carapace
- Migrating from @openclaw/design-system to @openclaw/carapace: a good fit
Import the design system the right way
The consumer adapter guide shows how to load the design system. For plain CSS and Astro, the complete contract can be imported in one line when you want the global reset. For a controlled migration, import the token, theme and typography files first, then components.css, and keep your own layout CSS.
For Tailwind 4, the imports must follow a specific order. Theme switching stays in the application. The canonical public-site selector is html[data-theme="light"] or html[data-theme="dark"].
- Import the complete contract or its focused entry points, not a mix you invent
- Keep consumer-specific layout CSS in your project
- Theme switching is owned by the application
@import "@openclaw/design-system";Ask for UI work in plain language
You do not need special syntax. Name the screen or component you want to change, mention OpenClaw or the design system, and state what must stay the same. The agent will look for the relevant tokens and shared components in your project before it edits anything.
Good requests say what to change and what to protect. Because the skill keeps behavior and routes unchanged by default, say so explicitly if you want a route or data flow changed.
- "In this OpenClaw project, restyle the settings page using the existing design tokens and shared components. Do not change routes or behavior."
- "Add a status badge for failed builds using the status colors. Reuse existing primitives."
- "Migrate the imports in this consumer from @openclaw/design-system to @openclaw/carapace, keeping the app's behavior the same."
- "Fix the text overflow in the sidebar card at narrow widths and check it in a browser screenshot."
Know what the skill needs and what it does not do
The skill needs a consumer project with an OpenClaw design system dependency, either @openclaw/carapace or the legacy @openclaw/design-system. For the validation step you need the project's existing tests and a browser that can take real screenshots.
The skill does not run scripts and does not use the network, according to its listing. It constrains work to existing shared primitives rather than generating new visual designs, so it is not a general design generator.
- Requires: an OpenClaw design system dependency, existing tests, a browser for screenshots
- Runs scripts: no
- Uses network: no
What people use it for
- Restyling an existing OpenClaw settings or dashboard page with the existing tokens and components
- Adding a status badge or warning message that uses the design system's status colors
- Migrating a consumer's imports from @openclaw/design-system to @openclaw/carapace without changing app behavior
- Fixing text overflow or inconsistent focus and hover states in an existing OpenClaw interface
Frequently asked questions
Is the openclaw-design-system skill free and MIT licensed?
The skill is listed under the MIT licence. The source material for this guide does not state a price, so check the directory listing for any cost details.
What do I need before installing this skill?
You need a consumer project that depends on @openclaw/carapace or the legacy @openclaw/design-system. For validation, you also need the project's existing tests and a browser that can take screenshots.
Should I use openclaw-design-system or openclaw-carapace?
Use openclaw-design-system if your project already lists it in skills-lock.json. The skill says new installations should use openclaw-carapace instead, so new projects should start there.
Does this skill run scripts or access the internet?
According to its listing, the skill does not run scripts and does not use the network. It only gives the agent instructions and reference files to follow.
Can the skill generate a brand new visual design?
No. It constrains work to the existing shared primitives and tokens of the OpenClaw design system, so it is not a general-purpose design generator.
How is it different from a general design tool?
It is tied to OpenClaw's token names, classes and components. It reuses those, rather than inventing new styles, which suits existing OpenClaw projects but not unrelated codebases.
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 maintain an existing OpenClaw web interface, want new screens to match its tokens and components, or are moving from @openclaw/design-system to @openclaw/carapace. Pick openclaw-carapace for new projects, and choose a general design tool if you need fresh visual concepts rather than strict reuse of an existing system.
Download the skill