🧠 SuperDesign(Open) — AI Design Agent for Your IDE

Note: This is a fork of the original SuperDesign project, maintained independently with additional features and improvements.

By: AI Jason & JackJack

SuperDesign is the first open-source design agent that lives right inside your IDE. Generate UI mockups, components, and wireframes directly from natural language prompts. Works seamlessly with Cursor, Windsurf, Claude Code, and plain VS Code.

🔀 About This Fork

This fork enhances the original SuperDesign with several key improvements:

🎯 Enhanced AI Model Support

• 60+ AI Models: Expanded support for DeepSeek R1, Kimi K2, Grok 3, and 20+ free models
• Multi-Provider Architecture: Seamless switching between OpenRouter, Anthropic, and OpenAI
• Advanced Model Features: Support for reasoning models and specialized capabilities
• 🆓 Free Models: Access to powerful models like Llama 3.1 405B, DeepSeek R1, and Qwen3 at no cost

⚙️ Improved Configuration

• Environment Variable Support: Secure API key management via .env files
• Flexible Provider Selection: Easy switching between AI providers mid-conversation
• Enhanced Security: Better API key handling and configuration management
• Helicone Integration: Optional monitoring and analytics with secure configuration

🛠️ Developer Experience

• Better Error Handling: More informative error messages and debugging
• Enhanced Logging: Comprehensive logging for troubleshooting
• Improved Stability: Bug fixes and performance optimizations

🎨 Extended Design Capabilities

• Advanced Prompting: Refined system prompts for better design generation
• Theme Support: Enhanced dark/light mode compatibility
• Workflow Improvements: Better integration with external AI tools

This fork maintains full compatibility with the original while adding these enhancements for a more robust and feature-rich design experience.

✨ "Why design one option when you can explore ten?" — SuperDesign

Join discord

Upvote on Hackernews

Install guide

---

🎬 Demo Video (Click to play)

---

🚀 Features

• 🖼️ Product Mockups: Generate full UI screens from natural language prompts
• 🧩 UI Components: Create reusable components you can drop into your code
• 📝 Wireframes: Explore low-fidelity layouts for rapid prototyping
• 🔁 Fork & Iterate: Duplicate and evolve designs with one click
• 📥 Prompt-to-IDE: Copy prompts into Cursor, Windsurf, Claude Code for implementation
• 🤖 50+ AI Models: Choose from Claude, GPT, Llama, DeepSeek, Kimi, Grok, and more
• ⚡ Model Switching: Switch between models mid-conversation for different tasks
• 🎨 Dark/Light Mode: Designs adapt to your preferred theme
• 💾 Local Storage: All designs saved locally in .superdesign/ folder
• 🔧 Extensible: Open source - customize prompts, add features, integrate tools

---

🛠️ Getting Started

🚀 Easy Installation (Recommended)

Step 1: Clone the Repository

git clone https://github.com/orangebread/superdesign-open.git
cd superdesign-open

Step 2: Setup API Key

1. Get a free API key from OpenRouter:

   • Go to https://openrouter.ai/
   • Sign up (it's free)
   • Go to https://openrouter.ai/keys
   • Create a new key and copy it

2. Create a .env file in the project folder:

   OPENROUTER_API_KEY=your-key-here
   

Step 3: Build the Extension

In your terminal:

npm install
npm run compile
npm run package

This will create a superdesign-open-0.0.11.vsix file in the project folder.

Step 4: Install the Extension

Method 1: Manual Installation

1. Open VSCode
2. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
3. Type: Extensions: Install from VSIX...
4. Select your superdesign-open-0.0.11.vsix file
5. Restart VSCode

NOTE: If you already have superdesign installed, you will need to uninstall it first before installing the new version.

📦 Manual VSIX Installation

If you prefer to install manually or the automatic installer doesn't work:

Step 1: Get the VSIX File

Option A: Download Pre-built (Recommended)

# Download the latest release
curl -L -o superdesign-open.vsix https://github.com/orangebread/superdesign-open/releases/latest/download/superdesign-open-0.0.11.vsix

Or visit Releases and download the .vsix file manually.

Option B: Build from Source

git clone https://github.com/orangebread/superdesign-open.git
cd superdesign-open
npm install  # or pnpm install
npm run compile
npm run package
# This creates superdesign-open-0.0.11.vsix

Step 2: Install the VSIX File

Method 1: VSCode Command Line (if CLI is available)

code --install-extension superdesign-open-0.0.11.vsix

Method 2: VSCode GUI (recommended)

1. Open VSCode
2. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
3. Type: Extensions: Install from VSIX...
4. Select your superdesign-open-0.0.11.vsix file
5. Restart VSCode

Method 3: Drag & Drop

1. Open VSCode
2. Go to Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
3. Drag the .vsix file into the Extensions panel
4. Restart VSCode

Step 3: Verify Installation

• Look for the brain icon (🧠) in the Activity Bar
• Click it to open SuperDesign sidebar
• If you don't see it, restart VSCode

🎯 Quick Start (3 minutes)

1. Install the Extension using the easy installer above or manual VSIX installation
2. Configure API Key (choose one):
   • Recommended: OpenRouter API key for access to 60+ models including 20+ free models
   • Anthropic API key for Claude models
   • OpenAI API key for GPT models
3. Open SuperDesign sidebar panel
4. Select a Model from the dropdown (try DeepSeek R1 or Kimi K2)
5. Type a prompt (e.g., "Design a modern login screen with dark mode")
6. View & iterate on generated mockups, components, and wireframes
7. Copy code and paste into your project

🔧 Troubleshooting Installation

Common Issues & Solutions:

❌ "Node.js not found"

• macOS: brew install node (requires Homebrew)
• Windows: Download from nodejs.org
• Linux: sudo apt install nodejs npm (Ubuntu/Debian) or sudo yum install nodejs npm (CentOS/RHEL)

❌ "VSCode CLI not found"

• Don't worry! The installer will provide manual installation instructions
• To enable CLI: Open VSCode → Cmd/Ctrl+Shift+P → "Shell Command: Install 'code' command in PATH"

❌ "Permission denied" (macOS/Linux)

chmod +x install.sh
# If npm permission issues:
sudo chown -R $(whoami) ~/.npm

❌ "Execution policy" error (Windows PowerShell)

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

❌ Extension not appearing after installation

1. Restart VSCode completely
2. Check Extensions panel (Ctrl+Shift+X) for "SuperDesign"
3. Look for brain icon (🧠) in Activity Bar
4. Try: Ctrl+Shift+P → "SuperDesign: Open Chat"

❌ Build fails

# Clean install
rm -rf node_modules package-lock.json
npm install
npm run compile

Need Help?

• 📖 Check INSTALL.md for detailed instructions
• 🐛 Open an issue
• 💬 Join Discord

🎨 Example Prompts to Try

🖼️ Product Mockups:
"Design a modern dashboard for a SaaS analytics platform"
"Create a mobile app onboarding flow with 3 screens"
"Design a landing page for an AI startup"

🧩 UI Components:
"Create a reusable button component with hover states"
"Design a card component for displaying user profiles"
"Build a navigation bar with dropdown menus"

📝 Wireframes:
"Wireframe a checkout flow for an e-commerce site"
"Create low-fi layouts for a blog homepage"
"Design wireframes for a mobile banking app"

🔄 Workflow Tips

• Fork & Iterate: Click fork to create variations of designs
• Model Switching: Try different models for different tasks
• Context Aware: SuperDesign understands your project structure
• Copy Prompts: Use generated prompts in Cursor/Claude Code for implementation

---

🚀 Quick Setup Guide

📦 Local Development (Recommended)

Prerequisites:

• Node.js 18+ and pnpm
• VS Code, Cursor, or Windsurf IDE

Simple Setup:

# Clone and setup
git clone https://github.com/orangebread/superdesign-open.git
cd superdesign-open
pnpm install

# Build and package extension
pnpm run package:vsix

# Install the generated .vsix file
code --install-extension superdesign-open-0.0.11.vsix

Verify Installation:

1. Restart your IDE
2. Look for the brain icon (🧠) in the Activity Bar
3. Click it to open SuperDesign sidebar

📦 Alternative: Use Pre-built VSIX

If you prefer not to build from source:

# Clone the repository
git clone https://github.com/orangebread/superdesign-open.git
cd superdesign-open

# Install the pre-built extension file
code --install-extension superdesign-open-0.0.11.vsix

📋 Manual VSIX Installation

Command Line (All IDEs):

# VS Code
code --install-extension superdesign-open-0.0.11.vsix

# Cursor
cursor --install-extension superdesign-open-0.0.11.vsix

# Windsurf (try both)
windsurf --install-extension superdesign-open-0.0.11.vsix
code --install-extension superdesign-open-0.0.11.vsix

UI Method (All IDEs):

1. Open Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
2. Click three dots (...) → "Install from VSIX..."
3. Select superdesign-open-0.0.11.vsix
4. Restart IDE

Verify Installation:

• Look for brain icon (🧠) in Activity Bar
• Click it to open SuperDesign sidebar

🔧 Troubleshooting

Common Issues:

• Extension not found: Use full path to .vsix file
• Permission denied: Try sudo on macOS/Linux
• Extension doesn't appear: Restart IDE and check Extensions panel
• Multiple IDEs: Use specific CLI commands (code-insiders, etc.)

🛠️ Development Workflow

Active Development:

# Watch mode (auto-rebuild on changes)
pnpm run watch

# Run tests
pnpm run test

Key Commands:

# Build and package (recommended)
pnpm run package:vsix

# Type checking and linting
pnpm run check-types
pnpm run lint

# Manual build steps
pnpm run compile
pnpm run package

Debugging:

1. Open project in VS Code
2. Press F5 to launch Extension Development Host
3. Test in the new window that opens

⚙️ Configuration

SuperDesign supports multiple AI providers with 60+ powerful models including 20+ free models.

🔑 API Key Setup (Choose Your Provider)

🆓 Want to try free models first? Get an OpenRouter API key - it's free and gives you access to 20+ models at no cost!

Step 1: Get Your API Key

🌟 OpenRouter (Recommended - 60+ models, 20+ free)

1. Visit openrouter.ai
2. Sign up for a free account
3. Go to API Keys
4. Create a new API key
5. Free models available: DeepSeek R1, Llama 3.1 405B, Qwen3 Coder, Kimi K2, and more!

🤖 Anthropic (Claude models)

1. Visit console.anthropic.com
2. Create account and add payment method
3. Generate API key

🧠 OpenAI (GPT models)

1. Visit platform.openai.com
2. Create account and add payment method
3. Generate API key

Step 2: Configure SuperDesign

Option 1: Environment Variables (Recommended)

1. The installer creates a .env file for you, or copy .env.example to .env
2. Add your API keys:

# Choose one or more providers
ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
OPENAI_API_KEY=sk-your-openai-key-here
OPENROUTER_API_KEY=sk-or-your-openrouter-key-here

# Optional: Set default provider and model
AI_MODEL_PROVIDER=openrouter
AI_MODEL=deepseek/deepseek-r1:free  # Free model!

Option 2: VSCode Settings (Fallback)

• Use Command Palette: SuperDesign: Configure API Key
• Or manually set in VSCode settings

Step 3: Start Using SuperDesign

1. Restart VSCode
2. Click the brain icon (🧠) in Activity Bar
3. Select a model from the dropdown
4. Start chatting!

🤖 Supported Providers & Models

🔥 Premium Models (Best Performance)

• DeepSeek R1 - deepseek/deepseek-r1 (Reasoning)
• Kimi K2 - moonshot/kimi-k2-0711-preview (Advanced reasoning)
• Claude 4 Opus - claude-4-opus-20250514 (Premium)
• Grok 3 - x-ai/grok-3 (Latest from xAI)
• Qwen3 235B - qwen/qwen3-235b-a22b-04-28 (Massive scale)

⚖️ Balanced Models (Great Performance)

• Claude 3.5 Sonnet - claude-3-5-sonnet-20241022
• Llama 3.3 70B - meta-llama/llama-3.3-70b-instruct
• Gemini 2.5 Pro - google/gemini-2.5-pro
• Mistral Large - mistralai/mistral-large-2411
• Qwen2.5 72B - qwen/qwen2.5-72b-instruct

⚡ Fast Models (Quick Response)

• Gemini 2.5 Flash - google/gemini-2.5-flash
• Yi Lightning - 01-ai/yi-lightning
• GPT-4.1 Mini - gpt-4.1-mini
• Nova Lite - amazon/nova-lite-v1

🆓 Free Models (No Cost)

• Qwen3 Coder - qwen/qwen3-coder:free (Coding specialist)
• Qwen3 235B A22B - qwen/qwen3-235b-a22b-2507:free (Large scale)
• Kimi K2 - moonshotai/kimi-k2:free (Advanced reasoning)
• DeepSeek R1T2 Chimera - tngtech/deepseek-r1t2-chimera:free (Reasoning)
• DeepSeek R1 - deepseek/deepseek-r1:free (Reasoning)
• DeepSeek V3 - deepseek/deepseek-chat-v3-0324:free (General purpose)
• Llama 3.1 405B - meta-llama/llama-3.1-405b-instruct:free (Massive scale)
• Llama 3.3 70B - meta-llama/llama-3.3-70b-instruct:free (Balanced)
• Llama 3.2 11B Vision - meta-llama/llama-3.2-11b-vision-instruct:free (Vision)
• Qwen 2.5 72B - qwen/qwen-2.5-72b-instruct:free (General purpose)
• Qwen 2.5 Coder 32B - qwen/qwen-2.5-coder-32b-instruct:free (Coding)
• Mistral 7B - mistralai/mistral-7b-instruct:free (Lightweight)
• Gemma 3 27B - google/gemma-3-27b-it:free (Google's open model)
• Reka Flash 3 - rekaai/reka-flash-3:free (Fast inference)

🔧 Specialized Models

• Coding: DeepSeek Coder V2, Qwen2.5 Coder, Codestral
• Vision: Llama 3.2 90B Vision, Grok 2 Vision Beta
• Reasoning: DeepSeek R1, Phi-4 Reasoning Plus
• Multilingual: Qwen series, Yi models

🌐 Provider Details

• 🏠 Anthropic (4 models) - Direct API access to Claude models
• 🤖 OpenAI (2 models) - Direct API access to GPT models
• 🌍 OpenRouter (60+ models) - Access to models from:
  • 🆓 Free Tier: 20+ free models with no cost (rate limited)
  • 💰 Paid Tier: Premium models with usage-based pricing
  • Meta (Llama), Google (Gemini), DeepSeek, Moonshot (Kimi)
  • Mistral, xAI (Grok), Qwen, Microsoft, NVIDIA, Cohere
  • Amazon, Perplexity, 01.AI, Reka, and more

🔧 Advanced Configuration

For OpenRouter users, additional options are available:

# OpenRouter specific settings
OPENROUTER_SITE_URL=https://your-site.com
OPENROUTER_SITE_NAME=Your App Name
OPENROUTER_USAGE_TRACKING=true
OPENROUTER_REASONING_ENABLED=false
OPENROUTER_REASONING_EFFORT=medium

🔒 Security Notes

• Environment variables are more secure than VSCode settings
• Your .env file is automatically ignored by git
• Never commit API keys to version control
• Environment variables take priority over VSCode settings

---

Can I use my own Claude Code or Cursor subscription?

Yes, after you initialise superdesign extension, some cursor/claude code rules will be added, so you can prompt the agent to do design and preview in superdesign canva (cmd + shift + p -> superdesign: open canva)

If using Cursor - I will highly suggest copy the prompt in 'design.mdc' and create a custom mode in cursor with that same system prompt; This should give you much better performance

Instructions here (Click to play):

📂 Where Are My Designs Stored?

Your generated designs are saved locally inside .superdesign/.

---

🔧 Troubleshooting

Common Issues

❌ API key not configured: Check .env file or use Command Palette: SuperDesign: Configure API Key

❌ Model not responding: Verify API key credits and try different model

❌ Extension not loading: Restart IDE and check Extensions panel

❌ Designs not saving: Ensure .superdesign/ folder exists with write permissions

Development Issues

❌ Build failures:

rm -rf node_modules pnpm-lock.yaml
pnpm install
pnpm run package:vsix

❌ Extension not loading: Ensure you built with pnpm run compile and restart IDE

❌ VSIX packaging fails: Install @vscode/vsce globally and use pnpm run package:vsix

Getting Help

• 💬 Discord community
• 🐛 GitHub Issues

---

❓ FAQ

Is it free and open source? Yes! SuperDesign is completely open source. Fork it, extend it, remix it.

Which AI provider should I choose?

• OpenRouter: Best option - access to 60+ models including DeepSeek R1, Kimi K2, Grok 3, plus 20+ free models
• Anthropic: Great for Claude models (3.5 Sonnet, 4 Opus)
• OpenAI: Good for GPT models (4.1, 4.1 Mini)

Can I use multiple providers? Yes! Configure multiple API keys and switch between models in the dropdown.

Can I customize the design agent? Absolutely — modify prompts, add custom commands, or extend functionality.

Can SuperDesign update existing UI? Yes — describe changes to existing components and the agent will iterate.

How much does it cost? SuperDesign is free. You only pay for API usage from your chosen provider:

• OpenRouter: ~$0.01-0.10 per design (varies by model)
• Anthropic: ~$0.05-0.15 per design
• OpenAI: ~$0.03-0.08 per design

How can I contribute? Pull requests welcome! See the Contributing section below for detailed guidelines.

---

🤝 Contributing

We welcome contributions! Here's how to get started with local development:

🚀 Quick Contribution Setup

1. Fork & Clone

   # Fork the repo on GitHub, then clone your fork
   git clone https://github.com/YOUR_USERNAME/superdesign-open.git
   cd superdesign-open

2. Setup Development Environment

   # Install dependencies
   pnpm install
   
   # Build and package extension
   pnpm run package:vsix
   
   # Install locally
   code --install-extension superdesign-open-0.0.11.vsix

3. Test Your Changes

   # Open in VS Code and press F5 to test
   code .
   
   # Or use watch mode for active development
   pnpm run watch

📝 Development Guidelines

Code Style:

• Use TypeScript for all new code
• Run pnpm run lint before committing
• Ensure pnpm run check-types passes

Testing:

# Run all tests
pnpm run test

# Run specific test suites
pnpm run test:tools    # File operations
pnpm run test:agent    # AI functionality
pnpm run test:core     # Core components

Commit Guidelines:

• Use clear, descriptive commit messages
• Reference issues when applicable: fix: resolve API key validation (#123)
• Keep commits focused and atomic

Pull Request Process:

1. Create a feature branch: git checkout -b feature/your-feature-name
2. Make your changes and test thoroughly
3. Update documentation if needed
4. Submit a pull request with a clear description

🎯 Areas for Contribution

• 🤖 AI Models: Add support for new AI providers or models
• 🎨 UI/UX: Improve the React frontend and user experience
• 🛠️ Tools: Enhance file operations and development tools
• 📚 Documentation: Improve guides, examples, and API docs
• 🐛 Bug Fixes: Fix issues and improve stability
• ⚡ Performance: Optimize build times and runtime performance

📋 Quick Reference

Installation Commands

# Easy installer (recommended)
git clone https://github.com/orangebread/superdesign-open.git
cd superdesign-open
./install.sh  # macOS/Linux
# or install.bat (Windows)

# Manual VSIX install
code --install-extension superdesign-open-0.0.11.vsix

Key Files

• .env - API key configuration (created by installer)
• superdesign-open-0.0.11.vsix - Extension package file
• INSTALL.md - Detailed installation guide

VSCode Commands

• SuperDesign: Open Chat - Open the main chat interface
• SuperDesign: Configure API Key - Set up API keys
• Extensions: Install from VSIX... - Manual extension installation

Free Models to Try

• deepseek/deepseek-r1:free - Advanced reasoning
• meta-llama/llama-3.1-405b-instruct:free - Massive scale
• qwen/qwen3-coder:free - Coding specialist
• moonshotai/kimi-k2:free - Advanced reasoning

🆘 Getting Help

• 💬 Join our Discord for development discussions
• 📖 Check existing Issues and Discussions
• 🐛 Report bugs with detailed reproduction steps
• 📋 See INSTALL.md for detailed installation help

---

🔗 Links & Resources

• 🌐 Website: https://superdesign.dev
• 📦 GitHub: https://github.com/orangebread/superdesign-open
• 💬 Discord: Join the Community
• 🐦 Twitter/X: @jasonzhou1993 & @jackjack_eth
• 📺 Demo Video: Watch on YouTube
• 🛒 VS Code Marketplace: Install Extension

🔑 Get API Keys

• OpenRouter (Recommended): https://openrouter.ai/keys
• Anthropic: https://console.anthropic.com/
• OpenAI: https://platform.openai.com/api-keys

---

🌟 Star History

If you find SuperDesign useful, please consider starring the repository!

---

Made with ❤️ by the SuperDesign team