93 lines
3.2 KiB
Markdown
93 lines
3.2 KiB
Markdown
# 🧠 SuperDesign — AI Design Agent for Your IDE
|
|
|
|
|
|
|
|
### **By:** [AI Jason](https://x.com/jasonzhou1993) & [JackJack](https://x.com/jackjack_eth)
|
|
|
|
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/)
|
|
|
|
---
|
|
|
|
## 🎬 Demo Video (Click to play)
|
|
|
|
[](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/)
|
|
|
|
---
|
|
|
|
## 🛠️ 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):
|
|
[](https://youtu.be/KChmJMCDOB0?si=pvU0kNRO4GRWjsec&t=122)
|
|
|
|
## 📂 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.
|
|
|
|
<img width="886" height="586" alt="image" src="https://github.com/user-attachments/assets/71b7cfcc-6123-40ea-aae5-05ea6cdcea96" />
|
|
|
|
|
|
**How can I contribute?**
|
|
Pull requests are welcome. Star the repo and join us on [Discord](https://discord.gg/XYZ)!
|
|
|
|
---
|
|
|
|
## 🔗 Links
|
|
|
|
- 🌐 Website: [https://superdesign.dev](https://superdesign.dev)
|
|
- 📦 GitHub: [https://github.com/superdesigndev/superdesign](https://github.com/superdesigndev/superdesign)
|
|
- 💬 Discord: [Join the Community](https://discord.gg/XYZ)
|
|
- 🐦 Twitter / X: [@SuperDesignDev](https://x.com/SuperDesignDev)
|
|
|