ClawKit Logo
ClawKitReliability Toolkit
Back to Registry
Official Verified developer tools Safety 4/5

superdesign

Superdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extract reusable component), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (update existing component), superdesign list-components --project-id <id> (list existing components). Supports line ranges: --context-file path:startLine:endLine

Why use this skill?

Superdesign is an AI agent for frontend UI/UX. Generate, iterate, and maintain design drafts and reusable components directly in your project.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/jayzeedesign/superdesigndev
Or

What This Skill Does

Superdesign is a powerful AI-driven frontend UI/UX design assistant integrated directly into your development workflow. It helps you design, iterate, and maintain high-quality interfaces by leveraging an infinite canvas approach. The skill bridges the gap between design concepts and implementation by providing tools to create design drafts, manage design systems, and extract reusable UI components from your existing codebase. It automatically performs repository analysis, keeping your design context in sync with your actual project structure.

Installation

To begin using the skill, ensure you have the OpenClaw agent environment set up. Run the following command in your terminal:

clawhub install openclaw/skills/skills/jayzeedesign/superdesigndev

Once installed, the skill will verify your environment by checking for the @superdesign/cli. If missing, it will automatically install the latest version via npm and prompt you for authentication using superdesign login to ensure secure access to your design drafts.

Use Cases

Superdesign is ideal for:

  • Rapid prototyping of new features where UI/UX consistency is critical.
  • Transforming static ideas into functional frontend components.
  • Maintaining a design system by extracting reusable UI atoms from complex pages.
  • Implementing design changes across existing flows without losing site-wide consistency.
  • Onboarding to a new repository by visualizing the existing UI architecture and component dependencies.

Example Prompts

  1. "Superdesign, I need to create a new landing page for our dashboard. Analyze the repo first and let's get started with a design draft."
  2. "Help me improve the design of the settings page. Make it look more modern and align it with our current dark theme tokens."
  3. "Extract the sidebar component from the current project layout so I can reuse it in our new reporting module."

Tips & Limitations

  • Always ensure you have a clean git state before executing major design changes.
  • For complex UI, always utilize the --context-file flag with specific line ranges to minimize noise and improve AI accuracy.
  • The tool is designed for frontend UI/UX. It does not replace backend logic or database schema design.
  • Remember that the skill requires local file system access to parse your codebase; ensure you are working within a trusted repository environment. The initial repo analysis creates a .superdesign/ directory; treat these files as read-only references for the AI to ensure design stability.
Read Full Documentation on GitHub

Metadata

Author@jayzeedesign
Stars1947
Views1
Updated2026-03-04
View Author Profile
AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill
Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-jayzeedesign-superdesigndev": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Tags(AI)

#ui-design#ux#frontend#web-development#design-system
Safety Score: 4/5

Flags: network-access, file-write, file-read, external-api, code-execution