我替你们试了8个AI设计工具,最后留下了一个开源的

「AI生成UI最大的问题不是『不像』，而是『太像了但没法改』。」「以前做设计先打开Figma，现在做设计先打开终端。」「你对AI越『苛刻』，它产出的东西越能用。」

昨儿晚上调Open Design的Docker和Node连通性调到凌晨一点，咖啡凉了，软件倒是跑起来了。盯着屏幕上那个自动生成的仪表盘发了会儿呆。这玩意儿五年前得一个团队干两周。我突然想把这过程写下来。

⭐点击『极客精益』→『···』→ 设为星标，觉得不错就点赞👍分享🔄推荐❤️

01. 这事儿得从一次「设计故事」说起

我其实挺怕做设计的。

不是审美不行，是真·手残。Figma打开，拖一个矩形到画布上，对齐，对齐半天还是歪的。更别提配色了，我调出来的颜色总有种「刚学会用滤镜的中学生」既视感。

过去几年，每次产品说「老大你帮忙出个原型图」，我内心OS都是：行吧，打开Excalidraw画个框凑合下。

所以当Claude Design出来那会儿，我第一时间就冲了。

那体验确实震撼。说一句「给我一个SaaS仪表盘」，它真给你吐出来一个完整页面。按钮有悬停效果，数字用等宽字体，布局还特么挺讲究。

但我很快就发现一个问题。

这玩意儿是锁死的。

你只能用Claude的模型，只能在它的网页里玩，代码导出来跟沙盒里的效果总差那么一口气。想改个配色方案？你得重新prompt一遍。

这就很尴尬了。

02. 那几天我把市面上能试的都扫了一遍

既然Claude Design是闭源的，那开源社区总该有替代品吧？

抱着这个念头，我花了一周时间，把市面上主流的AI UX设计工具撸了一遍。

v0.dev，Vercel家的明星产品。React加Tailwind，生成的代码质量确实高。但问题是它深度绑定Vercel生态，更别提那个额度……生成几次就让你充值。我在Next.js项目上用着挺爽，换个技术栈就抓瞎。

Google Stitch，被Google收购后的Galileo AI升级版。无限画布、多屏流程生成、语音输入，听着很酷。实际用了下，速度是快，但生成的细节总觉得「糙」了点。像是设计师赶工时出的初稿，有那意思但不够味儿。更何况它只认Gemini模型。

OpenUI，一个开源实验项目，主打「像v0一样但开源」。最大的优点是模型自由度极高，OpenAI、Groq、Gemini、Claude、甚至本地Ollama全都能接。但缺点也很明显，打磨程度不够，适合拿来玩而不是上生产。

Open Pencil，新秀，「开源版Figma」定位。它那个.pen格式确实有意思，AI可以直接读写画布。但问题在于太新了，社区还没起来，文档也还处于「懂的都懂」的状态。

Penpot，老牌开源设计工具，4.5万星，150万用户，企业级自建托管首选。不过它的AI能力更多是锦上添花，自动布局、设计规范生成这些，离「一句话生成一个页面」还有距离。

还有Framer AI、Uizard……各有各的定位，不一一展开。

一圈试下来，我得出一个结论。

商业工具体验好但锁得死，开源工具自由度够但总差那么点意思。

直到我碰到了Open Design。

03. 为什么偏偏是它？

Open Design，GitHub上3.6万星（截至2026年5月10日）。

它的定位很直接，其实就是「Claude Design的开源替代品」。但让我上头的不是这个标签，是它的设计哲学。

第一，它不绑模型。

Open Design没有自己的AI内核。它默认你机器上已经装了最好的coding agent，OpenCode、Claude Code、Cursor Agent、Gemini CLI、Kimi、DeepSeek TUI，随便哪个都行。启动时它会扫你的PATH变量，自动识别出所有已安装的CLI工具，然后说：「大哥，你来当引擎。」

这就是BYOK，Bring Your Own Key，自带密钥。你爱用DeepSeek用DeepSeek，爱用Kimi用Kimi，甚至想接本地Ollama也行。Open Design只管编排，不管推理。没有厂商锁定，换个模型就是换行命令的事儿。

第二，它内置了71套品牌级设计系统。

你没看错，71套。Vercel风格、Stripe风格、Claude风格、Neutral Modern、Editorial Monocle、Tech Utility、Brutalist……每套都是标准的DESIGN.md文件写的。你选一套，AI生成的每一行CSS都被约束在这套系统的token体系里，颜色、间距、圆角、字体，全部可控。

它甚至有个叫「五维自我批判」的机制。AI生成完代码，会自己审自己。对比度够不够？层级对不对？间距规范不一致？无障碍合规吗？品牌一致性有没有跑偏？通不过重来。你想想看，这就像你请了个设计师，这设计师还自带质检员。

还有一点我特别想说的，它走的是artifact-first管线。

这不是一个「生成一张图给你看」的工具。完整的流程是这样的：你选一个Skill（比如仪表盘技能），填一个简短的业务表单，写一句自然语言需求，选一个coding agent执行。Open Design把需求组装成结构化指令，agent在后台生成真实的项目文件夹（.od/projects/<id>/index.html），你直接在本地git commit。

目前Open Design内置了19种Skills，覆盖了SaaS后台、移动端流、数据看板、路演PPT、营销海报，甚至能用HyperFrames技能把HTML直接渲染成MP4视频。

它不是在做图，它是在写项目。

04. 安装这段，我踩了一个坑

好，实操环节。

按照README，安装分几步：

git clone https://github.com/nexu-io/open-design.gitcd open-designcorepack enablepnpm installpnpm tools-dev run web

服务启动后访问 http://localhost:7456 就能看到Web界面了。

但我卡在了一个想不到的地方。

Open Design有两种启动方式，Node直接启动，或者Docker部署。我一开始图省事，用了Docker。

cd deploydocker compose up -d

服务起来了，界面也有了。但OpenCode连不上。

我在Web界面里点「Select Agent」，OpenCode那一栏是灰的，点不了。

折腾了半天才发现原因。Docker容器里跑的Open Design，扫描的是容器内部的PATH，不是宿主机的PATH。我的OpenCode是用npm全局安装在宿主机上的，容器里根本找不到这个命令。

当时心态有点崩。咖啡凉了，窗外夜深了，屏幕上的Docker日志还在刷刷地滚。

解决办法其实很简单：用Node方式启动，别用Docker。

或者如果你非得用Docker，那就得通过API方式手动配置OpenCode的连接。但说实话，Node方式启动丝滑很多，推荐。

另一个让我「哦」了一声的发现：Open Design生成的代码真的在磁盘上。

不是云端的黑盒，而是在 .od/projects/<id>/ 目录下，index.html、preview.html、README.md，清清楚楚。你可以直接git commit，直接改，直接部署。

这种「拥有感」，用商业工具的时候是体会不到的。

05. Open Design + OpenCode = 真正的王炸

单用Open Design已经很爽了，但和OpenCode深度整合才是真正的王炸。

先说说MCP集成模式。

Open Design随项目打包了一个MCP（模型上下文协议）服务器，通过 od mcp 命令启动。你可以在终端里直接调用Open Design的能力，完全不需要打开那个Web页面。

想象一下这个场景。

你在终端里写业务代码，突然需要生成一个登录组件。不用切到浏览器，不用打开设计工具。直接在OpenCode提示符里输入：

用Open Design的warm-editorial设计系统，帮我生成一个响应式登录流，写入src/components/Auth.tsx

背后发生的事情是：OpenCode调用OD的MCP接口，OD在后台加载设计规范和五维约束，AI Agent计算输出结构化代码，OpenCode接收结果，直接写进你的项目文件。

整个过程你没离开过终端。

怎么说呢，我觉得这算是一种范式转变。设计不再是「出图」，而是「生成工程代码」。

再说说模型搭配。

OpenCode本身支持多模型切换，这就给了你一个灵活的算力调度策略：

• 打样阶段：用本地Ollama或DeepSeek V4，便宜量大，跑几百个组件迭代不心疼。DeepSeek V4支持1M上下文窗口，适合批量生成标准化组件。
• 多模态识别阶段：切换到Kimi K2.5/K2.6，让它读草图、读截图、读PDF里的品牌指南。Kimi的超长上下文窗口能确保几十页的品牌指南一个token不丢。
• 终态抛光阶段：换成Claude 4.7 Sonnet或GPT-5.4，处理复杂的CSS网格嵌套、精密的间距和微妙的动效交互。社区经验表明，Sonnet在前端代码生成的性价比比Opus高5倍。

但这里有一个坑。Open Design通过OpenCode连接时，目前版本（v0.5.0）不支持在它对话界面里快速切换模型，它用的是当前设置中连接OpenCode的配置模型（虽然也可以先停止对话，然后更新配置中选择模型后继续对话）。

我的做法是：直接在OpenCode里分阶段切换。需要多模态识别时切到Kimi，识别完了切回DeepSeek继续搞。虽然多了一步手动操作，但「一个模型不干到底」的策略，算下来成本省了不少，效果反而更好。

06. 提示词才是真正的布局引擎

最后聊点进阶的。

在Open Design加OpenCode的工作流里，提示词不再仅仅是「描述你想要什么」，而是控制生成引擎的参数面板。

说几个我自己试出来的心得。

控制色彩，别让AI自由发挥。

不要说「给我一个蓝色调的仪表盘」。要这样：

提取10个色阶的Primitive Tokens（50-950），映射为Semantic Tokens：--color-primary-500 作为主色--color-primary-600 用于悬停状态

控制间距，用网格系统约束。

所有padding、margin、gap必须是8px的倍数。写进prompt里，出来的页面就不会出现「看着还行但总觉得哪里不对」的尴尬。

控制交互状态，明确伪类要求。

不光要「做一个按钮」，还要说清楚 :hover 时颜色怎么变，:focus 时有没有光晕，transition 用哪个缓动函数。

坦率的讲，你对AI越「苛刻」，它产出的东西越能用。

这里分享一个实战模板。比如你要生成一个SaaS仪表盘：

目标技能：dashboard视觉流派：Tech Utility（高信息密度、等宽数字字体、深色侧边栏）间距约束：8px网格系统，外边距24px布局要求：左侧侧边栏固定260px宽，顶部栏含全局搜索和通知铃铛，         主内容区CSS Grid布局（gap: 24px），首行4个数据汇总卡片交互要求：卡片悬停提升1px边框亮度和轻微阴影，         搜索框支持/快捷键聚焦

单这一个模板，我在这周的实战里至少用了十次，出来的东西每次都八九不离十。

07. 范式在悄悄转变

写完这篇文章的时候，我又看了一眼Open Design的GitHub。已经超过3.6万星了。

但让我感慨的不是数字。

AI设计输出，正在从「生图」转向「写代码」。

以前大家玩AI设计，主要靠Midjourney、Stable Diffusion。一句话生成一张精美的效果图。但效果图终归是效果图，你不能让它动起来，不能改里面的文案，更不能把它直接变成产品的一部分。

HTML作为设计输出，解决了这个问题。

它可以交互、可以响应式、可以直接部署。结合HyperFrames这类工具，甚至能把HTML直接渲染成MP4视频。不需要视频剪辑软件，不需要专业设计师，写个页面就自动变成视频。这条技术路线一旦跑通，整个设计到开发的交付链路都会被重塑。

目前市面上已经分化出几种流派：React/Vue等动态渲染流派适合构建真实前端应用，直接HTML输出流派则越来越被广泛用于AI设计的即时产出。Open Design走的是后者，但它不是孤例，而是一个信号。

Open Design不是第一个做这件事的，但它可能是目前把「体系性」和「完整度」做得最好的一个。

站在优秀开源软件的肩头上，在AI的协同下，咱们可以更快地创造出更优秀的软件。

我觉得这可能才是AI时代最让人兴奋的事情。不是AI取代了谁，而是工具的门槛降低了，但创作的上限被抬高了。

至少，我这个手残党，终于敢说自己也能做设计了。

写到这我突然想，也许再过两年，「设计」这个词本身都会变味。到那时候，大家聊设计可能不是聊配色和排版，而是聊工程架构和提示词工程。怎么说呢，有点期待，也有点说不清道不明的紧张感。

读者互动：说到底，工具只是工具。真正让人上头的，是那种「原来我也能搞出来」的惊喜感。如果你也在折腾AI设计工具，欢迎留言聊聊你的踩坑经历。独踩坑不如众踩坑，对吧？

局限性说明：本文的竞品对比基于个人使用体验和社区反馈，并非系统的基准测试。Open Design与OpenCode的Headless整合方式基于当前版本（v0.5.0）的功能，后续版本可能更新API。模型搭配策略中的「切换模型」操作需要手动进行，文中已明确说明了这个限制。部分关于「范式转变」的结论属于个人观点，反映了笔者在AI工程化实践中的倾向性判断。提示词模板示例中的具体参数（如「8px网格」、「24px外边距」）是推荐值，实际使用应根据具体设计系统调整。

延伸阅读：

1. Open Design GitHub仓库^[1]
2. OpenCode 官方文档^[2]
3. Claude Design vs Open Design 社区讨论^[3]
4. AI Design System Prompts That Actually Scale^[4]
5. Pencil.dev: Bridging the Design-to-Code Gap^[5]
6. Open Design 中英文README^[6]

引用链接

[1] Open Design GitHub仓库: https://github.com/nexu-io/open-design[2] OpenCode 官方文档: https://opencode.ai/docs/[3] Claude Design vs Open Design 社区讨论: https://www.reddit.com/r/PromptEngineering/comments/1t6ssn5/claude_design_is_cool_but_the_opensource/[4] AI Design System Prompts That Actually Scale: https://0xminds.com/blog/guides/ai-design-system-prompts-tokens-guide[5] Pencil.dev: Bridging the Design-to-Code Gap: https://medium.com/@tentenco/pencil-dev-bridging-the-design-to-code-gap-in-modern-development-fede236fa551[6] Open Design 中英文README: https://github.com/nexu-io/open-design/blob/main/README.zh-CN.md