OpenClaw Design
Choose one focused branch before changing an interface. Load multiple branches
only when the task genuinely crosses them.
| Skill |
Use for |
openclaw-brand |
Identity decisions, typography, logos, imagery, voice, and non-product brand artifacts |
openclaw-carapace |
Application UI, semantic tokens, themes, component reuse, and framework adapters |
openclaw-design-system |
Compatibility alias for projects upgrading an existing skill lock |
openclaw-marketing-pages |
Public-page composition, landing/content pages, navigation, SEO, and responsive layout |
openclaw-design-audit |
Design drift, token misuse, component substitution, accessibility, and recurring audits |
For a public website change, start with openclaw-marketing-pages and add
openclaw-brand only when the task changes identity, logo, imagery, typography,
or voice. For a product application, start with openclaw-carapace when it is
installed. Projects upgrading an existing lock may use
openclaw-design-system as the v0.1.x compatibility alias.
Shared Contract
- Install agent guidance from this repository's default branch and refresh it with
npx skills@1.5.16 update --project --yes.
- Keep runtime CSS pinned to a semantic release tag.
- Prefer semantic tokens over raw palette values.
- Keep product-specific components and layouts in their consumer repository.
- Add shared implementation only after at least two consumers demonstrate the same interface.
- Preserve consumer behavior while changing the visual foundation.
- Validate rendered pages in a real browser at desktop and mobile sizes.
- Check both light and dark themes where the consumer supports them.
- Do not redistribute fonts, logos, or artwork without recorded permission.
1---2name: openclaw-design3description: Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or Carapace compliance.4---5
6# OpenClaw Design
7
8Choose one focused branch before changing an interface. Load multiple branches
9only when the task genuinely crosses them.
10
11| Skill | Use for |
12| --- | --- |
13| `openclaw-brand` | Identity decisions, typography, logos, imagery, voice, and non-product brand artifacts |
14| `openclaw-carapace` | Application UI, semantic tokens, themes, component reuse, and framework adapters |
15| `openclaw-design-system` | Compatibility alias for projects upgrading an existing skill lock |
16| `openclaw-marketing-pages` | Public-page composition, landing/content pages, navigation, SEO, and responsive layout |
17| `openclaw-design-audit` | Design drift, token misuse, component substitution, accessibility, and recurring audits |
18
19For a public website change, start with `openclaw-marketing-pages` and add
20`openclaw-brand` only when the task changes identity, logo, imagery, typography,
21or voice. For a product application, start with `openclaw-carapace` when it is
22installed. Projects upgrading an existing lock may use
23`openclaw-design-system` as the `v0.1.x` compatibility alias.
24
25## Shared Contract
26
27- Install agent guidance from this repository's default branch and refresh it with
28 `npx skills@1.5.16 update --project --yes`.
29- Keep runtime CSS pinned to a semantic release tag.
30- Prefer semantic tokens over raw palette values.
31- Keep product-specific components and layouts in their consumer repository.
32- Add shared implementation only after at least two consumers demonstrate the same interface.
33- Preserve consumer behavior while changing the visual foundation.
34- Validate rendered pages in a real browser at desktop and mobile sizes.
35- Check both light and dark themes where the consumer supports them.
36- Do not redistribute fonts, logos, or artwork without recorded permission.
OpenClaw