#界面生成

11小时前

Github 4.7k star，一款让你可以不用 Figma 也能写 Prompt 画界面的开源神器！分享一个很有意思的开源项目：SuperDesign。一句话，它让你不用跳去 Figma，在 IDE 里写一行 prompt 就能把界面画出来，还能直接导出可用的组件/代码。GitHub 已经有 4.7k+ Star 了。它解决了什么痛点？我们平时写前端，写代码一套、改界面一套。按钮、表单、布局来回折腾，甚至还要和设计对齐。做个原型，沟通成本超高。 SuperDesign 的思路很简单：在 IDE 里直接“说人话”→ 自动出线框/组件/代码。省去来回切换。它到底是什么？一个嵌在 IDE 里的 AI 设计智能体（AI Design Agent）；你描述：“来个现代风的登录页，有 logo、两个输入框、一个登录按钮”，它几秒钟在侧边就给你界面结构、线框、配色建议，还能生成组件文件，项目里直接复用。适配环境 VS Code、Cursor、Claude Code、Windsurf 都能用。已经用 Cursor 或 Claude Code 的同学，几乎是无缝衔接。 5 个亮点，快速记住 1.一行 prompt 出整页：登录、注册、设置页都能一把梭。 2.不止能看，还能用：自动生成结构化组件，丢进项目继续调样式。 3.多 IDE 兼容：你用啥它认啥。 4.模型可选：本地模型（LM Studio）、OpenAI、OpenRouter 都能接。 5.开源 + 本地落地：没有订阅门槛，产物都在项目的 .superdesign/ 里，版本管理很友好。怎么上手？在 VS Code / Cursor 插件市场搜 SuperDesign，安装。打开左侧 SuperDesign 面板（Cursor 里 Cmd+Shift+P → superdesign: open canvas）。输入提示词，就能看到界面、线框、组件；一键导出代码用在项目里。小技巧：在项目根目录建一个，把你常用的提示词模板放进去，风格会更稳定。我个人的感受 SuperDesign 不是要替代设计师，它是把“能落地的界面结构”更快摆到你面前。从 Cursor、Claude Code，到现在的 SuperDesign，AI 已经不只是“写代码的”，它开始把设计、实现、联动串成一条龙。未来很可能是：你说一句需求，IDE 就把页面和组件都搭起来了。

#AI设计 #IDE #SuperDesign #界面生成 #开源