Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance.
Install Openclaw Design
$ npx skills add openclaw/clawhub --skill openclaw-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openclaw/clawhub openclaw-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/openclaw-design .claude/skills/openclaw-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .claude/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add openclaw/clawhub --skill openclaw-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openclaw/clawhub openclaw-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/openclaw-design .agents/skills/openclaw-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .agents/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openclaw/clawhub --skill openclaw-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openclaw/clawhub openclaw-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/openclaw-design .cursor/skills/openclaw-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .cursor/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/openclaw/clawhub.git --path .agents/skills/openclaw-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add openclaw/clawhub --skill openclaw-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openclaw/clawhub openclaw-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/openclaw-design .gemini/skills/openclaw-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .gemini/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install openclaw/clawhub openclaw-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add openclaw/clawhub --skill openclaw-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/openclaw-design .github/skills/openclaw-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .github/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openclaw/clawhub --skill openclaw-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install openclaw/clawhub openclaw-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openclaw/clawhub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/openclaw-design .opencode/skills/openclaw-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "openclaw-design" agent skill from https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design into .opencode/skills/openclaw-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openclaw-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
openclaw-design- GitHub stars
- 9.5k
- Token cost
- ~519 tokens
- SKILL.md length
- 220 words
- Files
- 1
- Skills in repo
- 56
- Repo updated
- First seen
- Licence
- MIT
At a glance
Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance.
- A task touches OpenClaw visual identity
- Calls npx
- Shared CSS tokens
- Public web pages
What it does
Openclaw Design is an agent skill from openclaw/clawhub. 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.
Its SKILL.md is about 520 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Logo and visual identity and Design review and critique. The repository describes itself as: Skill + Plugin Registry for OpenClaw. The licence is MIT.
When your agent uses it
- A task touches OpenClaw visual identity
- Shared CSS tokens
- Public web pages
- Carapace compliance
Example prompts
- “/openclaw-design”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit c23e34a. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Openclaw Design loads about 519 tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 220 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from openclaw/clawhub at commit c23e34a, republished under its MIT licence (© openclaw). 220 words, ~519 tokens.
Download SKILL.mdSave it as
.claude/skills/openclaw-design/SKILL.md (or your agent's skills folder).- name
- openclaw-design
- description
- 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.
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.
© openclaw, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/openclaw-design of openclaw/clawhub.
Open the folder on GitHubat commit c23e34a
Compare with similar skills
Openclaw Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Openclaw Design this skillopenclaw/clawhub | 9.5k | — | ~519 | Automated safety check: Pass | MIT | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Image Prompt ReverseLunarXuan/image-prompt-reverse | 465 | — | ~678 | Automated safety check: Pass | GPL-3.0 | |
| Reimagine It AuditKayforkind/reimagine-it | 203 | 1 repos | ~756 | Automated safety check: Pass | MIT | |
| Design CritiqueWrongStack/WrongStack | 370 | — | ~3k | Automated safety check: Pass | MIT | |
| Brand Style Guiderampstackco/claude-skills | 940 | — | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Image Prompt Reverse
LunarXuan/image-prompt-reverse
Analyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts.
Reimagine It Audit
Kayforkind/reimagine-it
Design Health — runs 19 deterministic quality checks on HTML output.
Design Critique
WrongStack/WrongStack
A skill your agent uses to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states…
Brand Style Guide
rampstackco/claude-skills
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.
Design Review
tsubotax/melta-ui
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
More from openclaw/clawhub
All 56 skills in this repoAxiom Alerting Management
openclaw/clawhub
Creates and manages Axiom monitors and notifiers end to end through the v2 API, with scripts for each CRUD operation and a recommended create-validate-tune workflow.
Axiom Dashboard Builder
openclaw/clawhub
Designs and deploys Axiom dashboards through the API, choosing chart types and writing APL or metrics queries, with templates and migration notes for Splunk and Grafana.
Axiom Cost Control
openclaw/clawhub
Finds unused data in Axiom by analyzing query patterns, then deploys a cost dashboard and ingest monitors to keep spend under the contract limit.
Axiom Metrics Query
openclaw/clawhub
Explores and queries OpenTelemetry metrics in Axiom MetricsDB, listing datasets, metrics and tags first and picking the right aggregation for each metric's type.
Axiom SRE Investigator
openclaw/clawhub
Investigates incidents and production problems with hypothesis-driven debugging, queries Axiom observability data when available, and keeps secrets out of commands and output.
Axiom Eval Writer
openclaw/clawhub
Scaffolds evaluation suites for the Axiom AI SDK: eval files, scorers, flag schemas and axiom.config.ts, generated from plain descriptions of an AI capability.
Related
Categories
Questions about Openclaw Design
What does Openclaw Design do?
Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Openclaw Design is an agent skill from openclaw/clawhub. Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance.
When should I use Openclaw Design?
Openclaw Design fits situations like: A task touches OpenClaw visual identity; shared CSS tokens; public web pages; carapace compliance.
How do I install Openclaw Design in Claude Code?
Run `npx skills add openclaw/clawhub --skill openclaw-design -a claude-code`. Or copy the skill folder (.agents/skills/openclaw-design in openclaw/clawhub) into .claude/skills/openclaw-design in your project. Claude Code loads it when a task matches its description.
How do I install Openclaw Design in Codex?
Run `npx skills add openclaw/clawhub --skill openclaw-design -a codex`. Or copy the skill folder (.agents/skills/openclaw-design in openclaw/clawhub) into .agents/skills/openclaw-design in your project. Codex loads it when a task matches its description.
Can I use Openclaw Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add openclaw/clawhub --skill openclaw-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openclaw-design, .gemini/skills/openclaw-design, .github/skills/openclaw-design and .opencode/skills/openclaw-design in your project.
What does Openclaw Design need to run?
Going by SKILL.md and its folder, Openclaw Design needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Openclaw Design access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Openclaw Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Openclaw Design use?
Openclaw Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Openclaw Design use?
About 519 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Openclaw Design?
Skills that share tags, products or a category with Openclaw Design: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Image Prompt Reverse (LunarXuan/image-prompt-reverse, 465 stars), Reimagine It Audit (Kayforkind/reimagine-it, 203 stars) and Design Critique (WrongStack/WrongStack, 370 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Openclaw Design?
openclaw (a GitHub organization) maintains it in openclaw/clawhub, which has 9,495 GitHub stars. The repository holds 56 skills in this directory. The repository was last updated on October 7, 2026.
Source: openclaw/clawhub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.