superdesigndev

superdesigndev/superdesign

AI Product Design Agent - Open Source

View on GitHub Website / Demo Back to listing

7.6kstars 779forks 5contributors TypeScript

README.md

# 🧠 SuperDesign — AI Design Agent for Your IDE

> [!IMPORTANT]
> **This repo is the original open-source Superdesign IDE extension (2025).**
> It's kept here for history and is **no longer actively maintained**.
>
> **The Superdesign product is now a web app → [www.superdesign.dev](https://www.superdesign.dev)** —
> an AI product design agent that generates UI mockups, components, and full
> designs from a prompt on an infinite canvas.
>
> Prefer to stay in your editor? You can also drive Superdesign as a **design skill
> from coding agents like Claude Code and Cursor** →
> (https://github.com/superdesigndev/superdesign-skill)

https://youtu.be/AZYJWyWZ6pQ?si=IuKEZzFQ7FTwYshU

**🆕 New:** [SuperDesign Chrome Extension](https://chromewebstore.google.com/detail/obpjaonipoaomjnokbimppohbpjibflm) - Clone any website & UI

---

![SuperDesign Cover](cover.png)

### **By:** [AI Jason](https://x.com/jasonzhou1993)

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.

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

[Join discord](https://discord.gg/FYr49d6cQ9)

[Upvote on Hackernews](https://news.ycombinator.com/item?id=44376003)

[Install guide](https://www.superdesign.dev/ide-extension)

---

## 🎬 Demo Video (Click to play)

[![SuperDesign Demo](https://img.youtube.com/vi/INv6oZDhhUM/maxresdefault.jpg)](https://youtu.be/INv6oZDhhUM)

---

## 🚀 Features

- 🖼️ **Product Mock**: Instantly generate full UI screens from a single prompt
- 🧩 **UI Components**: Create reusable components you can drop into your code
- 📝 **Wireframes**: Explore low-fidelity layouts for fast iteration
- 🔁 **Fork & Iterate**: Duplicate and evolve designs easily
- 📥 **Prompt-to-IDE**: Copy prompts into your favorite AI IDE (Cursor, Windsurf, Claude Code)

---

## 🧠 Works Great With Cursor, Windsurf, Claude Code, VS Code

👉 [Install here](https://www.superdesign.dev/ide-extension)

---

## 🛠️ Getting Started

1. **Install the Extension** from the Cursor/VS Code Marketplace
2. Open the `SuperDesign` sidebar panel
3. Type a prompt (e.g., _"Design a modern login screen"_)
4. View generated mockups, components, and wireframes
5. Fork, tweak, and paste into your project

---

## 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): 
[![Instruction video](v0.0.11.png)](https://youtu.be/KChmJMCDOB0?si=pvU0kNRO4GRWjsec&t=122)

## How to run local OpenAI compatible servers?
1. Select open ai on Ai Model Provider
2. Put anything in Openai Api Key input
3. Add your OpenAi Url on the Openai Url input (example: http://127.0.0.1:1234/v1 for LM Studio)

## 📂 Where Are My Designs Stored?

Your generated designs are saved locally inside `.superdesign/`.

---

## ❓ FAQ

**Is it free and open source?**  
Yes! We are open source — fork it, extend it, remix it.

**Can I customize the design agent?**  
Yes — use your own prompt templates, modify behaviors, or add commands.

**Can SuperDesign update existing UI?**  
Absolutely — select a component, describe the change, and let the agent do the rest.

**How can I contribute?**  
Pull requests are welcome. Star the repo and join us on [Discord](https://discord.gg/FYr49d6cQ9)!

---

## 🔗 Links

- 🌐 Website: [https://superdesign.dev/ide-extension](https://superdesign.dev/ide-extension)
- 📦 GitHub: [https://github.com/superdesigndev/superdesign](https://github.com/superdesigndev/superdesign)
- 💬 Discord: [Join the Community](https://discord.gg/FYr49d6cQ9)
- 🐦 Twitter / X: [@SuperDesignDev](https://x.com/SuperDesignDev)

Repository info

Default branch: main
Latest version: —
Created: 20/06/2025
Last activity: 29/06/2026
License: Other
Open issues: 75
Watchers: 50

Contributors

JayZeeDesign

108 contributions

angelbanderasudg

3 contributions

Csaba8472

2 contributions

blackiceua

2 contributions

Ronican

1 contributions