skills.rest
openclaw
openclawOFFICIAL
Explore all skills by this author →
Website𝕏@openclawGitHub

openclaw-design

Routes OpenClaw design tasks to brand, product UI, marketing, or audit guidance.

9.4k|1.5k|Updated Jan 3, 2026
Search Tags:#brand identity#semantic tokens#Design system#ui routing#Openclaw#carapace#Design audit
One-click install
npx skills add https://github.com/openclaw/clawhub --skill openclaw-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openclaw-design
Source: https://github.com/openclaw/clawhub/tree/main/.agents/skills/openclaw-design
Command: npx skills add https://github.com/openclaw/clawhub --skill openclaw-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

OpenClaw design work spans brand identity, product interfaces, marketing pages, and design audits, and choosing the wrong guidance leads to inconsistent tokens, drifted components, and off-brand pages. This Skill routes each design task to the correct canonical guidance branch before any interface changes are made.

Core Features & Use Cases

  • Task Routing: Directs work to one of five focused branches: openclaw-brand, openclaw-carapace, openclaw-design-system, openclaw-marketing-pages, or openclaw-design-audit.
  • Shared Design Contract: Enforces rules such as preferring semantic tokens over raw palette values, pinning runtime CSS to semantic release tags, and validating pages in real browsers at desktop and mobile sizes.
  • Use Case: When asked to redesign a public landing page, start with the openclaw-marketing-pages branch and only add openclaw-brand if the task also changes identity, logo, imagery, typography, or voice.

Quick Start

Ask the agent to route your OpenClaw design task, for example: route this landing page redesign to the correct OpenClaw design guidance before making changes.

Frequently Asked Questions about openclaw-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right OpenClaw design guidance for a task?▼

Match the task to one branch: openclaw-brand for identity and voice, openclaw-carapace for application UI and semantic tokens, openclaw-marketing-pages for public pages, and openclaw-design-audit for drift and accessibility reviews. Load multiple branches only when the task genuinely crosses them.

What is the difference between openclaw-carapace and openclaw-marketing-pages?▼

openclaw-carapace covers product application UI, semantic tokens, themes, and component reuse, while openclaw-marketing-pages covers public-page composition, landing pages, navigation, SEO, and responsive layout. Product apps start with Carapace; public websites start with marketing-pages.

When should I use the openclaw-design-system alias?▼

Use openclaw-design-system only as a v0.1.x compatibility alias when a project is upgrading an existing skill lock. New work should route directly to the focused branches such as openclaw-brand or openclaw-carapace.

How do I keep OpenClaw agent guidance up to date?▼

Install agent guidance from the repository's default branch and refresh it with npx [email protected] update --project --yes. Runtime CSS should stay pinned to a semantic release tag rather than a moving target.

What validation is required before shipping OpenClaw interface changes?▼

Validate rendered pages in a real browser at both desktop and mobile sizes, and check light and dark themes where the consumer supports them. Preserve consumer behavior while changing the visual foundation.

Related Skills

Explore More Design & Creative Skills→
polyuiislabpolyuiislab
1.2k

brand-guidelines

Apply Anthropic brand colors, typography, and asset rules to artifacts.

Community
Basic
weberwangweberwang
1

pencil-design-restoration

Map Pencil design tokens and layout semantics into Flutter theme and shared components.

Community
Advanced
Bloodrey41Bloodrey41

normalize

Audit UI implementations and realign typography, color, spacing, and tokens to the design system.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced