Penpot：开源免费的 Figma 替代方案，设计与代码协作的全栈平台

发表于

你是否因为 Figma 的付费计划而犹豫不决？或者你的团队需要一个可以自托管、不受厂商锁定的设计平台？又或者你需要一个对开发者友好的设计工具，让设计稿直接转化为可用的代码？

这就是 Penpot 要解决的问题。它不是另一个”免费试用，高级付费”的工具——它是一个完全开源、完全免费的设计平台，基于 SVG 等开放标准构建，支持自托管，让团队完全掌控自己的设计基础设施。

Penpot 是什么？ Penpot 是由西班牙公司 Kaleidos 开发的开源设计与原型平台，采用 MPL-2.0 许可证，基于 SVG、CSS、HTML 和 JSON 等开放标准，支持实时协作、自托管部署、Design Tokens、MCP Server 和 CSS Grid/Flex 布局，是 Figma 的开源替代方案。

关键数据：

  • 🌟 GitHub Stars: 53,200+（仓库链接）
  • 🍴 Forks: 3,400+
  • ⚖️ 许可证：MPL-2.0
  • 🧠 核心特性：开放标准——基于 SVG、CSS、HTML、JSON，不依赖私有格式
  • 📦 核心特性：自托管——可部署在自己的服务器上，完全掌控数据
  • 🔧 核心特性：Design Tokens——设计与开发的单一事实来源
  • 🤖 核心特性：MCP Server——设计与代码的多向工作流
  • 📐 核心特性：CSS Grid/Flex 布局——设计即代码，所见即所得
  • 🆓 核心特性：完全免费——无付费计划，所有功能免费使用

前提条件

在开始使用 Penpot 之前，你需要准备：

  • 一个现代浏览器（Chrome、Firefox、Safari、Edge）
  • 注册 Penpot 云账号，或准备 Docker 环境用于自托管

💡 提示：Penpot 提供免费云服务（https://design.penpot.app），无需安装即可开始使用。自托管需要 Docker 或 Kubernetes 环境。

概述

本文将带你全面了解 Penpot，包括：

  1. Penpot 的核心功能和优势
  2. 快速上手：云端使用和自托管部署
  3. 核心功能详解：Design Tokens、MCP Server、CSS Grid/Flex
  4. 与同类工具的对比
  5. 适用场景和进阶技巧

详细步骤

第一步：快速上手——云端使用

最简单的方式是直接使用 Penpot 的免费云服务：

  1. 访问 https://design.penpot.app
  2. 注册账号（支持邮箱、Google、GitHub 登录）
  3. 创建新项目，开始设计

💡 提示：云端版本完全免费，不限项目数量和协作人数。

第二步：自托管部署

如果你需要完全掌控数据或满足合规要求，可以自托管：

1
2
3
4
# 使用 Docker Compose 部署
git clone https://github.com/penpot/penpot.git
cd penpot/docker
docker compose -p penpot -f docker-compose.yaml up -d

部署完成后访问 http://localhost:9001 即可使用。

自托管的优势：

  • 数据完全在自己服务器上
  • 满足企业合规和安全要求
  • 无网络延迟，局域网内访问更快
  • 可自定义配置和扩展

第三步：了解核心功能

Design Tokens

Penpot 的 Design Tokens 功能提供了设计与开发之间的单一事实来源：

  • 颜色 Token — 定义品牌色、语义色，全局统一管理
  • 字体 Token — 字体族、字号、行高等排版规范
  • 间距 Token — 间距、圆角、阴影等空间规范
  • 组件变体 — 支持属性驱动的组件变体系统

修改一个 Token，所有使用该 Token 的组件自动更新。

MCP Server

Penpot 的 MCP Server 实现了设计与代码的多向工作流：

  • 设计师修改设计 → 开发端自动同步
  • 开发者修改代码 → 设计端实时更新
  • AI Agent 可通过 MCP 协议与 Penpot 交互
  • 支持自动化工作流和集成

CSS Grid 和 Flex 布局

Penpot 内置了真正的 CSS Grid 和 Flex 布局系统：

  • 设计师在画布上直接使用 Grid/Flex 布局
  • 布局行为与真实代码一致
  • 开发者可以直接复制 CSS 代码
  • 支持响应式设计原型

插件系统

Penpot 支持插件扩展：

  • 访问 Penpothub 获取官方插件
  • 支持自定义插件开发
  • 可与其他工具集成

Inspect 模式

开发者可以直接从设计稿获取代码：

  • 一键查看 SVG 代码
  • 自动生成 CSS 样式
  • 导出 HTML 结构
  • 无需额外标注工具

第四步：与团队协作

Penpot 支持实时多人协作：

  • 多人同时编辑同一文件
  • 实时看到队友的光标和操作
  • 评论和标注功能
  • 版本历史记录

与同类工具的对比

特性 Penpot Figma Canva Excalidraw Onlook
开源 ✅ MPL-2.0 ❌ ❌ ✅ MIT ✅ Apache-2.0
免费 ✅ 完全免费 ⚠️ 有免费版 ⚠️ 有免费版 ✅ 完全免费 ✅ 完全免费
自托管 ✅ Docker/K8s ❌ ❌ ✅ ✅
设计系统 ✅ Design Tokens ✅ 高级 ❌ ❌ ❌
CSS Grid/Flex ✅ 原生支持 ✅ Auto Layout ❌ ❌ ❌
MCP Server ✅ ❌ ❌ ❌ ❌
实时协作 ✅ ✅ 优秀 ✅ ✅ ✅
插件生态 ⚠️ 发展中 ✅ 丰富 ✅ 丰富 ⚠️ 有限 ⚠️ 发展中
SVG 原生 ✅ 核心格式 ⚠️ 导出支持 ❌ ✅ ⚠️
GitHub Stars 53,200+ N/A N/A 126,000+ 26,000+
定位 全栈设计平台 专业 UI 设计 轻量设计 白板/图表 AI 设计工具

关键区别：

  1. Penpot vs Figma：Penpot 完全开源免费，支持自托管；Figma 功能更成熟、插件生态更丰富，但高级功能需要付费，且无法自托管。

  2. Penpot vs Canva：Penpot 面向专业 UI/UX 设计，支持 Design Tokens 和代码级布局；Canva 面向非设计师的轻量内容创作。

  3. Penpot vs Excalidraw：Penpot 是完整的 UI 设计工具，支持组件系统和设计规范；Excalidraw 专注于手绘风格的白板和图表。

  4. Penpot vs Onlook：Penpot 是传统设计工具的开源替代；Onlook 是 AI 原生设计工具，直接在 React 代码上进行可视化编辑。

常见问题（FAQ）

Q: Penpot 真的完全免费吗？
A: 是的。Penpot 采用 MPL-2.0 开源许可证，所有功能免费使用，无付费计划。云服务和自托管都免费。

Q: Penpot 和 Figma 有什么区别？
A: Penpot 是开源的，支持自托管，基于 SVG 开放标准；Figma 是商业产品，功能更成熟但高级功能收费，无法自托管。Penpot 的 Design Tokens 和 MCP Server 是独特优势。

Q: 可以从 Figma 迁移到 Penpot 吗？
A: 可以。Penpot 支持导入 Figma 文件（.fig），但复杂文件可能需要手动调整。建议逐步迁移，先从新项目开始。

Q: 自托管需要什么技术要求？
A: 需要 Docker 或 Kubernetes 环境。最低配置：2 核 CPU、4GB 内存、10GB 磁盘。详细部署文档见 Penpot 技术指南。

Q: Penpot 支持哪些文件格式？
A: Penpot 使用基于 SVG 的开放格式，支持导入 SVG、PNG、JPEG、PDF 等，导出支持 SVG、PNG、JPEG、PDF、HTML+CSS。

Q: Penpot 的插件生态如何？
A: Penpot 有插件系统和 Penpothub 插件市场，但生态相比 Figma 还在发展中。核心功能（Design Tokens、CSS Grid/Flex、MCP Server）是内置的，不依赖插件。

Q: Penpot 适合什么规模的团队？
A: 适合各种规模。个人用户可免费使用云服务；中小团队可使用云服务或自托管；大型企业可自托管满足合规要求。Penpot 已被 Digital Public Goods 认证。

Q: Penpot 的 MCP Server 是什么？
A: MCP Server 让设计工具与代码编辑器、AI Agent 之间实现多向通信。设计师修改设计后，开发端可自动同步；开发者修改代码后，设计端也能实时更新。

进阶技巧

设计系统最佳实践

  1. 先定义 Token — 在开始设计前，先定义颜色、字体、间距等 Design Tokens
  2. 组件化设计 — 将常用元素封装为组件，支持变体和属性
  3. 共享库 — 创建团队共享的设计库，确保一致性
  4. 版本管理 — 利用 Penpot 的版本历史功能管理设计迭代

开发者工作流

  1. Inspect 模式 — 直接从设计稿获取 CSS 和 SVG 代码
  2. MCP 集成 — 通过 MCP Server 与代码编辑器同步
  3. Design Tokens 同步 — 将 Penpot 的 Design Tokens 导出为 CSS 变量或 JSON
  4. 响应式原型 — 使用 CSS Grid/Flex 创建可交互的响应式原型

与 AI 工具集成

Penpot 的 MCP Server 支持与 AI Agent 集成：

  • AI 可以读取设计稿并生成代码
  • AI 可以根据文本描述创建设计
  • 支持自动化设计审查和优化

总结

Penpot 是一款革命性的开源设计平台，通过开放标准和自托管能力，让团队完全掌控自己的设计基础设施。无论你是个人设计师、创业团队还是大型企业，Penpot 都能提供专业级的设计工具，同时避免厂商锁定和订阅费用。

关键特性回顾：

  • 完全开源免费（MPL-2.0）
  • 基于 SVG、CSS、HTML 开放标准
  • 支持自托管部署
  • Design Tokens 设计系统
  • MCP Server 设计-代码协作
  • CSS Grid/Flex 布局
  • 实时多人协作
  • 53,200+ GitHub Stars

现在就访问 Penpot 官网 注册免费账号，开始使用这款开源设计平台吧！

参考资料

如何引用本文：本文基于 Penpot GitHub 仓库（2026-06-24 验证）编写。所有命令和配置均与最新版本对照验证。同类项目数据来自 GitHub API（2026-06-24 查询）。