最近我在整理笔记的时候，发现自己收藏的设计工具列表悄悄变了。以前清一色的 Figma、Sketch，现在冒出了一堆我完全没听过的名字——而且都是开源的。

说实话，作为一个技术博主，我对这些"AI 设计工具"一开始是持怀疑态度的。毕竟这些年看了太多"AI 颠覆一切"的营销稿，审美疲劳了。但当我真的花时间用了一下这几个项目，我的态度变了——不是颠覆，是效率重构。

今天就来聊聊我实际用过的 4 款开源 AI 设计工具，没有广告，全是真实体验。

1. Open Design：把设计稿直接变成代|码|

GitHub: https://github.com/nexu-io/open-design | ⭐ 24.6k

如果你之前用过 Claude Design，可能会对这类"AI 生成界面"的工具有一定了解。但 Claude Design 是付费的，Open Design 则是它的开源替代方案，而且完全免费部署。

[配图：Open Design 界面截图，展示一个 AI 生成的设计稿预览]

它能做什么？

最核心的功能就是一个：用自然语言描述你的想法，AI 生成完整的设计稿，并且可以直接导出代|码|。

支持 15 种 AI 编|码|代理，包括 Claude Code、Cursor、Codex、Gemini、Qwen 等主流工具——换句话说，不管你用哪个 AI，都能接入。同时内置了 72 套设计系统，从 Linear、Stripe 到 Vercel、Airbnb，直接套用品牌规范，不用从零画起。

能解决什么问题？

以前设计师出稿之后，开发者得"翻译"成代|码|，这个过程损耗巨大——设计师的意思被误解，边距对不上，颜色有偏差。Open Design 的思路是：设计稿本身就是代|码|，两端从一开始就用同一套语言。

实际使用场景

我试着让它生成一个仪表盘页面。输入"一个数据分析仪表盘，要有用户增长折线图、月活跃用户柱状图、顶部导航栏"，大概等了 2 分钟，它生成了一个完整的 HTML 页面，包含响应式布局和基础交互效果。不是那种 Demo 级的水货，是真的可以运行、可以改的代|码|。

当然，它生成的代|码|质量取决于你的描述能力和 AI 模型的能力。但作为一个起点——节省设计师和开发者的沟通成本——它已经很有价值了。

2. Huashu Design：中文友好的 AI 原型生成器

GitHub: https://github.com/alchaincyf/huashu-design | ⭐ 11.9k

这个项目是专门为中文用户优化的，最近刚更新了 v2.0（2026年4月21日），维护得很活跃。

它能做什么？

简单说：给它一段描述或者一个需求文档，它能生成完整的 HTML 原型、幻灯片、甚至带动画和 MP4 导出的高保真作品。3 到 30 分钟交付，取决于页面的复杂度。

它的核心理念很有意思——内置了一套"20 设计哲学"和"5 维评审机制"，生成后会有一个自评环节，告诉你这个设计在视觉一致性、品牌规范等方面有没有问题。听起来有点"AI 质检员"的意思。

能解决什么问题？

快速原型。PRD 写完了，产品经理需要向领导或者客户展示产品雏形，总不能拿 Axure 画一堆线框图。Huashu Design 能让这个过程从几天缩短到几十分钟——而且出来的不是低保真线框，是看起来像那么回事的页面。

实际使用场景

我测试了一个场景：输入"一个知识付费平|台的首页，包含课程卡片、讲师介绍、用户评价、定价套餐"——它生成了一个完整的多页面 HTML 站点框架，包含导航、轮播图、卡片列表等组件。虽然细节不够精细，但作为快速原型已经相当可用。

值得注意的是，它兼容 Claude Code、Cursor 等主流 Agent 工具，设计师和产品经理不需要懂代|码|，通过对话就能驱动设计生成。

3. ian-handdrawn-ppt：手绘风格技术解释图

GitHub: https://github.com/helloianneo/ian-handdrawn-ppt | ⭐ 350

这个工具的定位非常垂直——不是生成 PPT，是生成手绘风格的技术解释图。

它能做什么？

你给它一段技术文章、课程笔记或者大纲，它会帮你规划叙事结构，选择适合的版式，然后用统一的手绘视觉风格生成一系列 PNG 图片。21:9 封面 + 16:9 正文配图，一套下来就是一套完整的技术知识卡片。

能解决什么问题？

写技术博客或者做技术分享的时候，最大的痛点不是内容，是配图。很多概念用文字写三段话，不如一张好图说明白。但找人画太贵，用工具画太丑，自己画又太慢。

ian-handdrawn-ppt 解决的就是这个问题——用 AI 生成风格统一、看起来有人味的手绘技术图。你只需要准备文字内容，图的事交给它。

实际使用场景

我试着让它处理一段关于"HTTP/3 协议原理"的文字。它生成了 5 张 16:9 的手绘风格图，展示了从 QUIC 握手到数据传输的完整流程。视觉风格有点像 Notion 里的手绘插图，清晰、有温度、不生硬。

需要注意的是，它输出的不是可编辑的 PPTX 文件，是 PNG 图片。所以如果你需要演示时翻页动画，这个工具就不太合适；但如果你的场景是文章配图、知识卡片、课件插图，它相当对口。

4. Penpot：开源版 Figma，设计师终于可以自己部署了

GitHub: https://github.com/penpot/penpot | ⭐ 47.2k

终于轮到"大前辈"了。Penpot 是今天推荐的这几款里 star 数最高的——47.2k，比前三个加起来都多。它不是 AI 原生工具，但它有 AI 集成（MCP 服务器），而且作为开源设计工具，它本身就是一个里程碑。

它能做什么？

Penpot 是一个完整的在线设计工具，功能对标 Figma：矢量设计、原型制作、设计系统管理、设计令牌（Design Tokens）、团队协作……全部支持。而且它支持 SVG/CSS/HTML 代|码|检查，设计师可以直接看到元素的代|码|属性。

能解决什么问题？

私有化部署和数据主权。Figma 虽然强，但数据在别人服务器上，对于很多企业来说这是个合规隐患。Penpot 可以部署在自己的服务器上，数据完全自主可控。同时它是真正的跨平|台——基于 Web，不依赖 Electron。

实际使用场景

Penpot 本身的体验已经相当成熟，我用它做过完整的 App 界面设计，从组件库搭建到交互原型一条龙。最近它还加入了 MCP 服务器支持，可以通过 AI 加速一些重复性设计操作，比如批量生成变体、自动命名图层等。

说实话，Penpot 本身不算"AI 设计工具"，但它的开放架构让它成为了一个 AI 设计的基础设施——你可以把前面几个工具生成的设计稿导入 Penpot 继续精修，形成一个完整的工作流。

写在最后

聊完这四款工具，我想说一句真心话：设计师不会失业，但会用 AI 工具的设计师会淘汰不会用的。

这几个项目各有各的擅长——Open Design 擅长设计转代|码|，Huashu Design 擅长快速原型，ian-handdrawn-ppt 擅长技术配图，Penpot 擅长团队协作设计。它们不是来替代设计师的，而是把设计师从重复性工作中解放出来，让创意和判断力这类真正值钱的东西得以释放。

我的建议是：挑一个最对你的场景的，先用起来。哪怕只是用它做快速原型、把省下来的时间花在更有价值的地方，也值了。

你用过哪些 AI 设计工具？踩过什么坑，或者发现了什么宝藏？ 评论区见，我每条都会看。也欢迎把这篇文章转发给身边做设计或者写代|码|的朋友，说不定正好帮到他们。

善忘是一种境界 | 学习 | 分享 | 创造美好生活