Openclaw Skills for Design System Hub helps you initialize, expand, and export a local React/Vite design-system library with tokenized docs, live mocks, and JSON APIs.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-hub
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-hub using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design System Hub?
Design System Hub is a local-first React/Vite skill for creating and operating a browsable design-system service. With Openclaw Skills, you can initialize a new hub, add new design systems from screenshots, URLs, or text descriptions, and keep every entry aligned to a strict documentation and export contract.
It is built for teams that need a repeatable way to capture visual language, generate tokens and components, publish DESIGN.md and HTML exports, and expose API endpoints for downstream tooling. Openclaw Skills makes the workflow developer-friendly while preserving isolation between systems, so each new entry stays self-contained and verifiable.
Design System Hub Use Cases
- Initialize a new local design-system hub from the bundled template.
- Add a new design system from screenshots, a URL, or written brand/style guidance.
- Extract colors, typography, spacing, icons, interactions, and component patterns into structured tokens.
- Generate browsable documentation with DESIGN.md, API docs, standalone HTML, and live mock previews.
- Manage multiple design systems in one local collection without overwriting existing entries.
- Validate built-in and custom systems through local API endpoints and build checks.
- Create production-fidelity system demos that reflect the source UI without copying sensitive content.
How Design System Hub Works
- Resolve the target directory and determine whether the workflow is Initialize or Add based on the existing
package.jsonand project name. - If initializing, copy the template files, install dependencies, confirm Node.js compatibility, and run a production build.
- Start the local dev server, verify the built-in design systems, and confirm the expected API and export endpoints are available.
- If adding a system, inspect the input source carefully, derive a coherent design language, and model all 12 documentation modules in the required order.
- Create a dedicated slug, data file, mock renderer, and stylesheet, then register the new system in
src/data/registry.tswithout changing other files. - Rebuild the project, validate only the new slug and its export endpoints, inspect the detail page and mock preview, and report completion with the actual local and LAN URLs.
Design System Hub Setup
- Confirm the environment meets the Node.js requirement:
node --version
For a new hub, copy the template from the skill assets into the target directory, including dotfiles.
Install dependencies and build the project:
npm install
npm run build
- Start the local service on the default port, or choose another port if 4321 is already in use:
npm run dev -- --host 0.0.0.0 --port 4321
- Verify the API endpoint returns the built-in systems and that the service is healthy:
curl http://127.0.0.1:4321/api/design-systems
For an Add workflow, create
src/data/<slug>.ts,src/mocks/<slug>.tsx, andsrc/mocks/<slug>.css, then append the new import and registry entry insrc/data/registry.ts.Rebuild and validate the new slug’s API, DESIGN.md, HTML, and Agent API document endpoints before reporting success.
Design System Hub Data Schema & Taxonomy
The Hub uses a local, slug-based design-system registry with one data file, one dedicated mock renderer, and one stylesheet per entry.
| Artifact | Purpose | Notes |
|---|---|---|
src/data/types.ts |
Core schema definitions | Establishes the data contract for every system entry. |
src/data/<slug>.ts |
System record | Stores metadata, tokens, documentation modules, exports, and mock configuration. |
src/mocks/<slug>.tsx |
Live Mock renderer | Auto-discovered dedicated preview component for the system. |
src/mocks/<slug>.css |
Mock styles | Fully slug-scoped styles for the Live Mock only. |
src/data/registry.ts |
Collection registry | Appends the new system to the hub’s catalog. |
tokenExport |
Copy Tokens payload | Must remain valid, pretty-printed JSON for token export actions. |
Key metadata expectations in Openclaw Skills workflows:
slug: unique lowercase, hyphenated identifier.primaryColor: the single identity surface for cards, headers, and standalone HTML.onPrimaryColor: contrast-safe foreground paired withprimaryColor.mock.layout: set tosystem-specificfor input-driven live mocks.- Documentation modules: exactly 12, in fixed order, covering DNA, colors, typography, foundations, iconography, live mock, components, layouts, interactions, and guidelines.
- Exports:
DESIGN.md, standalone HTML, API doc, and detail JSON for each slug.
The architecture is intentionally isolated: adding one design system should only introduce the new slug files plus a registry append, while preserving all existing Openclaw Skills entries unchanged.
Design System Hub Advanced Features
- Local-first React/Vite service with a browser-friendly UI and JSON APIs.
- Template-based initialization for fast, repeatable hub setup.
- Screenshot, URL, and text-driven extraction workflows for design-system creation.
- Dedicated per-slug Live Mock renderers with auto-discovery by filename.
- Multi-system library management with strict isolation between entries.
- Built-in export surfaces for DESIGN.md, standalone HTML, API docs, and copyable tokens.
- Verification workflow that checks both build health and export completeness.
- Support for source-specific, production-fidelity mock scenes without reusing prior system DOM or styles.
- Openclaw Skills guidance for token naming, color derivation, and documentation ordering consistency.
SKILL.md
Loading
Related Openclaw Skills
Privacymask — Data De-identification and Privacy Protection Assistant
Privacymask is a local-first data masking skill that detects and redacts sensitive information across common file formats without uploading data.
yt-agent
yt-agent turns YouTube videos and subscriptions into grounded summaries, highlights, Q&A, presentations, and digests through the yt-mem-ai CLI.
WorkBuddy Session Callback
WorkBuddy Session Callback lets one session, cron job, or external process wake another WorkBuddy session and inject a message with full context.
Agentic Ledger
Agentic Ledger is a local-first proxy and analytics layer for OpenClaw that tracks usage, enforces budgets, and replays runs.
Vox
Vox is an Openclaw Skills-powered CLI transcription workflow for securely converting one explicitly provided URL or local audio/video file into transcripts and subtitle formats.
PriceWin Hotel Deal Finder
PriceWin Hotel Deal Finder uses Openclaw Skills to compare live hotel prices across major OTAs and return the cheapest, best-value, and quality picks in one command.
Featured*
