# SuperDesign: The IDE Extension That Generated UI Mockups from Prompts > SuperDesign was an open-source VS Code extension that let developers generate UI mockups, wireframes, and components through natural language prompts inside their editor, displaying results on an embedded canvas. The README states the extension is no longer actively maintained; the product has moved to a web application at superdesign.dev. **superdesigndev/superdesign** — AI Product Design Agent - Open Source - Repository: https://github.com/superdesigndev/superdesign - Website: http://superdesign.dev/ide-extension - Stars: 7,014 · Forks: 747 - Language: TypeScript - License: NOASSERTION - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/superdesigndev-superdesign ## What the SuperDesign Extension Did SuperDesign was a VS Code extension that embedded a design canvas directly in the editor sidebar. A developer typed a natural language prompt (for example, design a modern login screen), and the extension produced UI mockups, components, or wireframes displayed on that canvas. The output was HTML and CSS generated by an AI model, visible in the SuperDesign canvas panel. The extension was designed to work with Cursor, Windsurf, Claude Code, and plain VS Code. The README describes it as the first open-source design agent that lives right inside your IDE. The package.json version at the time of the last push was 0.0.14, published under the SuperdesignDev publisher ID. The README notes plainly that this repository is kept for history and is no longer actively maintained. The last push to the repository was on 2026-06-29. ## How the Extension Generated Designs The extension exposed a sidebar panel called superdesign.chatView, where users entered prompts. A system prompt file (system-prompt.txt in the repository root) defined the design agent's behavior. The README notes that this file is available and that users could copy its contents into a custom Cursor mode for better performance when using Cursor. Generated designs were saved locally in a .superdesign/ directory in the workspace. The package.json shows that the extension registered commands for configuring API keys for Anthropic, OpenAI, and OpenRouter: - superdesign.configureApiKey (Anthropic) - superdesign.configureOpenAIApiKey (OpenAI) - superdesign.configureOpenRouterApiKey (OpenRouter) - superdesign.configureOpenAIUrl (custom OpenAI-compatible endpoint) The extension also supported local OpenAI-compatible servers such as LM Studio. The README instructs users to select the OpenAI provider, set any value in the API key field, and enter the local server URL (for example, http://127.0.0.1:1234/v1 for LM Studio). ## Installing and Configuring the Extension The extension was distributed through the VS Code and Cursor Marketplace under the name Superdesign Dev. The installation method described in the README was to install from the marketplace and then open the SuperDesign sidebar panel. After installation, the extension added Cursor or Claude Code rules to the workspace to enable the design agent to interact with the canvas. The README describes the workflow as: install, open the SuperDesign sidebar, enter a prompt, view the mockup on the canvas, and either fork or iterate on it. The canvas command was accessible via the VS Code command palette: ``` cmd + shift + p -> superdesign: open canva ``` For Claude Code users, the README describes using a design skill (superdesign-skill at github.com/superdesigndev/superdesign-skill) as an alternative way to drive the design agent from a coding agent rather than the IDE extension itself. ## The Fork and Iterate Workflow One of the extension's stated design goals was making it easy to explore multiple design directions quickly. The README asks why design one option when you can explore ten, which describes a workflow where a developer generates several mockup variants and then iterates from the most promising one. The fork feature duplicated an existing design on the canvas so the user could modify it without losing the original. The README also states that the extension could update existing UI: select a component, describe the change, and the agent would revise it. The copy-to-IDE feature extracted a prompt from the canvas and placed it in the active AI IDE (Cursor, Windsurf, or Claude Code), allowing the developer to move from visual mockup to code implementation without leaving the editor context. ## Current Status: The Extension Is No Longer Maintained The README includes a prominent note at the top: this repo is the original open-source SuperDesign IDE extension (2025), kept here for history and no longer actively maintained. The active product is now a web application at www.superdesign.dev, described as an AI product design agent on an infinite canvas. A Chrome extension for cloning existing websites and UI is also mentioned in the README. The superdesign-skill repository provides a way to drive the Superdesign product as a design skill from coding agents, which is the current maintained interface for users who prefer staying in their editor. The repository has no GitHub releases. The last push was on 2026-06-29. ## Limitations of the IDE-Based Approach The IDE extension approach placed the canvas inside a VS Code webview panel. Webview panels have limited screen real estate compared to a dedicated application or browser tab, which constrained how many design variants could be displayed simultaneously. The extension generated HTML and CSS output. This is useful for web UI mockups but does not directly support mobile-native (Swift, Kotlin) or desktop-native component output. Teams working on non-web platforms found the output required translation before it could be applied. The extension relied on the configured AI model's ability to produce well-structured HTML and CSS from a text prompt. Output quality varied by model and prompt specificity. The README suggests that copying the system-prompt.txt content into a custom Cursor mode improved output quality, which implies the default configuration was not optimal for all use cases. Stored designs in .superdesign/ are local to the workspace. There is no built-in sharing or version history mechanism beyond what the IDE's source control provides. ## SuperDesign vs. V0 by Vercel V0 is Vercel's AI-powered UI generation tool. It runs as a web application and generates React or HTML components from natural language prompts, producing output targeted at the Next.js and Tailwind ecosystem. It is a hosted service with a usage tier model. The SuperDesign IDE extension targeted a different context: on-device generation inside the editor, with support for multiple LLM providers including local models, and output that was not tied to a specific framework. The extension was free and open-source, whereas V0 is a proprietary hosted service. The key practical difference at the time the extension was active was that SuperDesign allowed using a locally running model (through an OpenAI-compatible server) with no external API cost or data transmission, while V0 required using Vercel's hosted infrastructure. Another distinction is the output destination. V0 produces components intended for immediate use in a Next.js codebase. SuperDesign placed output on an in-editor canvas as mockups, treating the design step as prior to code generation. The fork-and-iterate model was geared toward exploring multiple design directions before choosing one to implement, whereas V0's interaction model is closer to: describe what you need, get the code. Neither approach is strictly better; they reflect different points in a design-to-code workflow. ## Conclusion The SuperDesign IDE extension (this repository) is no longer actively maintained, as the README states directly. The last push was on 2026-06-29. Engineers who want the original IDE-integrated experience for historical reference or to fork it can use this code base. Anyone looking for the current product should go to superdesign.dev, which the README describes as the active web application. The open-source extension code remains forkable under the terms of its license, and the design.mdc system prompt file is available for anyone who wants to adapt the design agent behavior for their own coding agent setup. ## FAQ ### Is SuperDesign free? The IDE extension in this repository is open source and was free to use. API costs depended on which LLM provider you configured; local models via an OpenAI-compatible server could be used at no API cost. The current web product at superdesign.dev has its own pricing. ### What is SuperDesign? SuperDesign was an open-source VS Code extension that generated UI mockups, wireframes, and components from natural language prompts inside an embedded canvas panel. The README states it is no longer actively maintained and the product has moved to a web app at superdesign.dev. ### Can I use SuperDesign with Claude Code? The IDE extension added Claude Code rules to the workspace to enable design generation through the Claude Code agent. A maintained alternative is the superdesign-skill repository, which the README describes as a way to drive the Superdesign product as a design skill from Claude Code and Cursor. ### How do you use SuperDesign? Install the extension from the VS Code or Cursor Marketplace, open the SuperDesign sidebar, type a prompt, and view the generated mockup on the canvas. Designs are saved locally in a .superdesign/ directory. The extension is no longer actively maintained. ### What are some alternatives to SuperDesign for AI UI generation? V0 by Vercel is a hosted AI UI generation tool that produces React components for the Next.js ecosystem. The current SuperDesign web application at superdesign.dev is the maintained version of the product from the same team. ## Sources - [Issues](https://github.com/superdesigndev/superdesign/issues) - [Project website](http://superdesign.dev/ide-extension) - [README](https://github.com/superdesigndev/superdesign/blob/main/README.md) - [superdesigndev/superdesign on GitHub](https://github.com/superdesigndev/superdesign) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/superdesigndev-superdesign