An intelligent design system selector that automatically identifies and applies the best visual styles for your project based on context and intent.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install auto-design-clawhub
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 auto-design-clawhub 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 Auto Design?
Auto Design is a powerful skill designed to bridge the gap between functional code and professional aesthetics. By leveraging Openclaw Skills, this agent analyzes your project type—whether it is a developer tool, a marketing site, or a data dashboard—and automatically maps it to a high-quality design system like Vercel, Linear, or Stripe. It eliminates the decision fatigue of choosing styles by intelligently detecting your technology stack and user intent to provide a cohesive visual framework.
This skill ensures that your UI remains consistent and polished without requiring manual styling research. By integrating Openclaw Skills into your workflow, you can focus on building features while the agent handles the typography, color palettes, and spacing logic derived from industry-leading design systems.
Auto Design Use Cases
- Creating new frontend components or pages that require instant, high-quality styling.
- Refactoring existing user interfaces to match professional design standards automatically.
- Generating documentation pages optimized for readability using systems like Mintlify or Notion.
- Rapidly prototyping marketing landing pages with premium gradients and layouts.
- Standardizing design tokens across a team by utilizing Openclaw Skills to maintain visual consistency.
How Auto Design Works
- The skill automatically analyzes project context, including file paths, package dependencies, and existing CLAUDE.md descriptions.
- It matches the project type (e.g., SAAS, tool, docs) against a sophisticated decision matrix to select a primary brand library.
- The agent executes a curl command to download the selected design specification from the awesome-design-md repository.
- It creates a local DESIGN.md reference and stores full design specs within the project's documentation directory.
- The AI agent applies the selected brand's tokens, color palettes, and hierarchy to all subsequent code generation tasks.
Auto Design Setup
To get started with this skill, ensure you have node and curl installed. You can configure the skill by setting environment variables in your shell:
# Set a specific brand preference
export AUTO_DESIGN_PREFERENCE=linear
# Optional: Disable auto-selection if you want manual control
export AUTO_DESIGN_AUTO=false
You can also define project-specific settings by adding a design block to your CLAUDE.md or .clauderc file to whitelist or blacklist specific brands within the Openclaw Skills ecosystem.
Auto Design Data Schema & Taxonomy
The Auto Design skill organizes project data and design tokens according to the following structure:
| File Path | Description |
|---|---|
DESIGN.md |
A root-level quick reference containing core design tokens like colors and fonts. |
Docs/Design/{brand}-DESIGN.md |
The full design system specification downloaded for the selected brand. |
Docs/DevLog/YYYY-MM-DD_design.md |
A decision log documenting why a specific design system was chosen. |
metadata |
Internal taxonomy including confidence scores and project type mappings. |
Auto Design Advanced Features
- Cross-platform compatibility with Claude Code via built-in conversion scripts.
- Seamless integration with Design Extractor to analyze and improve existing project styles.
- Smart confidence scoring algorithm to determine the accuracy of automated design selections.
- Support for over 58 professional brand libraries across multiple categories (Dev Tools, AI/ML, Marketing).
- Automatic detection of developer intent through keyword parsing and file path analysis using Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Cold Email Sequence
A specialized AI skill for generating high-converting, multi-stage cold email sequences with built-in deliverability optimization and A/B testing.
Design Extractor
A powerful utility that scans your source code to automatically generate comprehensive design system documentation and DESIGN.md files.
Chipotle Info Station
A specialized data retrieval skill designed for AI agents to provide structured business intelligence and historical insights regarding Chipotle.
Culver's Business Intelligence Skill
A professional knowledge skill providing comprehensive brand data and market intelligence on Culver's for AI agents.
Content Engine
A high-performance content automation skill that transforms single briefs into 30+ platform-optimized assets with consistent brand voice.
Apollo Evolution
Apollo Evolution is a framework for self-optimizing AI skills using biological principles of reproduction, mutation, and natural selection.
Featured*
