A specialized design agent that automates frontend UI/UX workflows, from initial repo analysis to component extraction.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install superdesigndev
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 superdesigndev 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 Superdesign?
Superdesign is a powerful design agent specifically engineered to bridge the gap between design thinking and frontend implementation. It functions as a dedicated UI/UX assistant that lives within your development environment, allowing you to generate design inspirations, create high-fidelity drafts, and iterate on styles directly through a specialized CLI. As one of the most effective Openclaw Skills for web developers, it ensures that every UI implementation is backed by robust design principles and consistent system architecture.
By analyzing your existing codebase, Superdesign builds a comprehensive map of your UI primitives, layouts, and theme tokens. This deep integration allows the agent to suggest changes and create new components that are perfectly aligned with your current design system. Whether you are starting a new project or refining an existing feature, this skill streamlines the creative process using an infinite canvas approach to design drafting.
Superdesign Use Cases
- Designing new features, pages, or entire user flows from scratch.
- Analyzing an existing repository to establish a documented design system.
- Improving the visual quality and user experience of current UI components.
- Extracting reusable frontend components from design drafts into production code.
- Iterating on design variations like dark themes or minimal aesthetics using branch modes.
How Superdesign Works
- Initialize the environment by running repo analysis to build local UI context files in the .superdesign/init/ directory.
- Verify CLI installation and authentication status to ensure seamless communication with the design engine.
- Create a design project and generate initial drafts or faithful reproductions of existing components.
- Iterate on designs using specific prompts and context files to refine styles and layouts.
- Execute flow pages to extend single designs into comprehensive multi-page user journeys.
- Extract reusable components into the codebase with full support for props and HTML structures.
Superdesign Setup
To begin using Superdesign within your project, follow these steps to set up the CLI and initialize your workspace. This is a vital part of the Openclaw Skills ecosystem for frontend developers.
First, check if the CLI is installed:
superdesign --version
If not found, install the package globally:
npm install -g @superdesign/cli@latest
Next, authenticate your session:
superdesign login
Finally, initialize your repository analysis:
superdesign init
Superdesign Data Schema & Taxonomy
Superdesign organizes its intelligence within a .superdesign/init/ directory. This metadata is crucial for the agent to understand your project structure. These files are part of the core data schema used by Openclaw Skills integrations:
| File Name | Description |
|---|---|
| components.md | Contains shared UI primitives and their source code. |
| layouts.md | Details shared layout structures like navbars and sidebars. |
| routes.md | Provides a map of pages to their respective routes. |
| theme.md | Stores design tokens, CSS variables, and Tailwind configurations. |
| pages.md | Maps page component dependency trees. |
| extractable-components.md | Identifies candidates for reusable component extraction. |
Superdesign Advanced Features
- Automated repository analysis for building deep UI context.
- Support for line-specific context passing using the --context-file path:startLine:endLine syntax.
- Design variation branching to explore multiple aesthetic directions simultaneously.
- Dynamic component extraction that transforms design drafts into functional code.
- Automatic fetching of the latest design guidelines and prompts from remote repositories to ensure cutting-edge output.
SKILL.md
Loading
Related Openclaw Skills
My Generate QR Code
An AI-powered utility for generating highly customizable QR codes and barcodes for various data types including URLs and WiFi configurations.
Folder Inspector
A high-performance AI agent skill for scanning local directories and auditing file metadata using absolute paths.
BVG Route Planner
A comprehensive tool for real-time Berlin public transport routing and departure information using the BVG API.
OpenClaw Sacred Rules
A critical collection of safety protocols and automation scripts designed to protect configuration integrity and prevent authentication failures.
Memory Core
An intelligent, modular memory system for AI agents that integrates semantic search, multi-provider embeddings, and Flomo notes.
Smart Memory System
A Retrieval-Augmented Generation (RAG) based intelligence system providing semantic search and memory optimization for Openclaw Skills.
Featured*
