New Skill: SuperDesign - AI-Powered Design Generation

We’ve added a new creative skill to the directory: SuperDesign from the superdesigndev team. This skill brings AI-powered design capabilities directly into your coding workflow with an infinite canvas interface.

Three Core Workflows

SuperDesign handles three main design scenarios:

Design Generation

Create UI designs for new features, pages, or complete user flows. Describe what you need and get visual designs you can iterate on.

Design System Setup

Extract design guidelines from existing codebases or establish new ones. The skill can analyze URLs to gather brand context including colors, typography, and visual patterns.

Design Iteration

Refine existing designs through multiple approaches:

• Branching mode - Generate variations to compare different directions
• Replace mode - Iteratively refine a single version toward your goal

Key Features

Infinite Canvas

Work on an unlimited canvas where you can explore multiple design directions, compare variations, and organize your design thinking spatially.

Prompt Library

Search through design references across styles, components, and page types. Find inspiration that matches your vision and use it to guide generation.

Brand Guide Extraction

Point the skill at a URL and it extracts visual context: colors, fonts, spacing patterns, and design language. Use this to ensure new designs stay consistent with existing brand identity.

Context Preservation

SuperDesign uses “replica HTML templates”—pixel-perfect copies of your existing UI—as a baseline for new designs. This means generated designs build coherently on your current implementation rather than starting from scratch.

HTML Export

When you’re happy with a design, export it as HTML ready for implementation. No manual translation from mockup to code required.

Multi-Page Flows

Design complete user journeys, not just individual screens. SuperDesign can generate connected sequences of pages that form cohesive flows like onboarding, checkout, or settings experiences.

Use Cases

This skill is useful for:

• Feature design - Mock up new features before writing code
• UI exploration - Compare multiple visual directions quickly
• Brand consistency - Ensure new pages match existing design language
• Rapid prototyping - Go from idea to HTML prototype in one session
• Design documentation - Generate visual references for team alignment

Get Started

Browse the SuperDesign skill in the directory. Activate it with prompts like “/superdesign help me design X” within Claude Code. For detailed documentation, visit the GitHub repository.