原型设计工具：Penpot、OpenPencil、Open CoDesign、Editable Design

继原型设计工具：Figma、Stitch、Claude Design、Open Design、OpenPencil、AutoFigure-Edit，本文介绍几个AI增加的原型设计工具。

Penpot

官网，开源（GitHub，54.8K Star，3.6K Fork）的设计与原型工具，Figma、Pencil替代品。

Figma底层格式是私有的，设计师画的每一层、每一个组件，开发者要用Inspect面板才能看到数值。Penpot不一样，底层基于SVG、CSS、HTML等开放标准；在设计稿里画一个按钮，圆角、padding、颜色值直接就是CSS属性，直接可用。

核心功能：

• Design Tokens原生支持：颜色、间距、字体、阴影，都可以定义成Token，设计稿和代码共用同一套变量。改一个Token，所有引用的地方自动更新。Themes直接支持主题切换，一套设计稿，亮色/暗色/多品牌直接切。Token还支持数学运算，用calc()函数写表达式（如base-spacing*2）。
• Inspect面板直出CSS/SVG/HTML：选中任意元素，右侧Inspect标签直接生成可复制粘贴进项目的代码。CSS差异比Figma小很多。
• CSS Grid/Flex Layout原生支持：响应式布局在设计稿里就能做，行为和真实代码一致。组件的flex方向、gap、wrapping设计时定义好，Inspect面板里直接复制可用。
• MCP Server：AI可通过它直接读懂、操作Penpot设计文件：
  • 设计稿一键生成语义化HTML+模块化CSS
  • 把涂鸦草图转换成符合现有设计系统的组件
  • 设计系统文档从文件自动生成，始终和设计稿保持同步
  • 用自然语言搜索设计元素，如"找所有蓝色的主按钮"

实战

官方提供在线SaaS，可供用户快速体验。

进入画布

基于Docker Compose部署：

gitclone https://github.com/penpot/penpotcdpenpot/docker/imagesdockercompose-ppenpot-fdocker-compose.yaml up-d

浏览器打开http://localhost:3449。

启动MCP Server

gitclone https://github.com/penpot/penpot-mcpcdpenpot-mcpdockercompose up-d

注意事项：

• 大型项目里的滚动和缩放性能，不如Figma流畅，渲染多图层时也会卡
• 从 Figma 迁移过来的 .figma 文件不能直接导入，得用社区维护的转换工具，转换质量参差不齐
• 插件生态：Figma有几千个插件，Penpot Hub目前规模小得多

OpenPencil

官网，Rust+Python实现、开源（GitHub，6.1K Star，527 Fork）、开源AI原生矢量设计工具，支持并发Agent团队（Concurrent Agent Teams）、设计即代码（Design-as-Code）、内置MCP Server，可把自然语言提示词直接写入实时无限画布。

注意：和https://github.com/open-pencil/open-pencil不是同一个项目。

把画布、文件格式、MCP、CLI、并发Agent团队和代码导出放进同一个工作区。设计资产不再只是图片，而是Agent可以读取、修改、接力和导出的工程对象。用户用自然语言描述页面，Orchestrator按空间结构拆任务，多个Agent并行处理Hero、Feature、Footer等区域，生成过程流式写入无限画布，最后再进入多端代码导出。

能力：

• Prompt to Canvas：用户描述一个页面后，系统会把设计实时生成到无限画布上，并通过流式动画展示过程。它还支持 Vision input，也就是把截图或 mockup 作为参考，让 AI 按已有视觉方向生成或修改。
• 并发Agent Team：不是让一个模型从头写到尾，而是由 Orchestrator 按空间结构拆分任务，再让多个 Agent 同时处理不同区域。这对复杂落地页、后台界面和多模块页面尤其关键。
• 模型能力适配：会根据模型层级自动调整提示词、thinking mode 和 timeout：强模型拿完整提示和 thinking，标准模型关闭 thinking，小模型则使用更简化的嵌套 JSON提示词来提高稳定性。

原理

Rust重写：曾经有TypeScript+Electron编辑器？当前仓库已经是Rust产品。

桌面端不再捆绑浏览器引擎和Node runtime，10,000-node live canvas 在嵌套 auto-layout 场景中可以写入、读取和快照布局，空闲CPU接近0%；一次热路径修复还把 wheel-zoom CPU 从约 69%降到接近0%。编辑器状态、渲染、MCP、CLI、AI提供商、代码生成、Figma导入和Git集成都在同一个Rust工作空间中。对 AI-原生 设计工具来说，这种一套核心跑多端的结构，比单纯把 Electron换成Rust更关键。

ZSeven-W产品生态：

• dsh-ios：DSH插件，iOS模拟器；
• craft-skills：
• dsh-openpencil：DSH插件，
• dsh-android：DSH插件，基于adb的Android模拟器；
• zode：终端下AI原生编码助手；
• agent-rs：纯Rust实现异步智能体运行时；
• jian：Rust原生、跨平台UI框架，一个.op文件就是一个App
• noema：本地优先、非向量编码智能体记忆系统。

架构

• 画布层：无限画布、缩放、智能对齐、吸附、图形、文字、Frame、布尔运算、图标和多页文档
• 设计系统层：设计变量、多个主题轴、组件系统、CSS sync、可复用UIKits和.pen文件导入导出
• 工程层：PNG、JPEG、WEBP、PDF导出，以及React、HTML、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native等代码目标
• 协作层：clone wizard、分支、pull/push、merge、冲突面板、内联JSON编辑和三方diff

源码：

• 核心在crates/：包括编辑器核心、UI、native host、web host、CLI、MCP、AI、orchestrator、codegen、Figma解析和Git集成
• 渲染：native端使用skia-safe，浏览器端使用CanvasKit WASM/WebGL2，UI框架是纯Rust GPU-Skia UI framework jian。

内置 MCP Server，可以一键安装到 Claude Code、Codex、OpenCode、Kiro、Copilot CLIs。通过 MCP，外部 Agent 可以读取、创建和修改.op文件。

CLI 工具op则承担终端侧自动化入口。它既可以接收文件，也可以接收 stdin，还支持 batch design DSL。这让需求文档、Agent 编排、设计画布和代码导出之间不再完全靠人工复制粘贴。

对比

实战

官方支持多种安装方式：

brew tap zseven-w/openpencil brewinstall--caskopenpencil brewinstallzseven-w/openpencil/opbashscripts/start-web-rust.shcargorun-pop-host-desktop

命令行使用示例：

opstartopstart--headless--filedesign.opopdesign @landing.txtopimport:figma design.figcatdesign.dsl|opdesign -

Open CoDesign

项目主页，开源（GitHub，6.7K Star，710 Fork）桌面端AI设计工具，输入提示词就能生成原型、幻灯片、营销页面，可交互的HTML/React组件原型，在内置的沙盒浏览器里实时预览，支持Claude等20+模型。定位是Claude Design、v0、Lovable、Bolt.new、Figma AI的开源替代。

内置15个演示模板：落地页、仪表盘、幻灯片、定价页、移动端应用、聊天UI、活动日历、博客文章、发票、作品集、设置面板等。

内置12个设计技能模块：幻灯片、仪表盘、落地页、SVG图表、玻璃拟态、编辑排版、Hero区、定价页、Footer、聊天UI、数据表格、日历。

每次生成前，模型会先选择合适的技能模块，再考虑布局意图、设计系统一致性和对比度。不同模型生成的结果质量会更稳定。

注释模式：点击预览中的任何元素，留下一个标记和注释，AI只重写区域代码。不用把整个设计重新描述一遍。

AI滑块：模型会生成可以微调的参数，颜色、间距、字体大小，通过滑块直接调整，不需要再写一次提示词。

五种导出格式：HTML（内联 CSS）、PDF（本地 Chrome 渲染）、PPTX、ZIP、Markdown。可以直接拿到开发用的文件。

技术栈

• Electron、React 19、Vite 6、Tailwind v4
• @mariozechner/pi-ai：模型/Provider和Agent循环基础组件
• better-sqlite3：本地版本历史
• electron-builder：打包

实战

官方支持多种平台多种安装方式：

brewinstall--caskopencoworkai/tap/open-codesign wingetinstallOpenCoworkAI.OpenCoDesign

Editable Design

开源（GitHub，1.1K Star，79 Fork）、Python+JavaScript+HTML+CSS实现、CC技能。

理解Brief与视觉方向，再按需准备独立素材，最后用原生HTML/CSS把文字、布局与素材重新组织成可编辑设计。

让Agent在生成阶段就保留结构：真实文字由HTML承担，图片可作为独立资源，语义组件标记为独立层，交付时自然就有修改入口。

输出：固定画布的index.html、可鼠标调整的editor.html、独立图层展开页layers.html，以及replay/index.html。

适用场景

实战