# Penpot – 开源的设计与代码协作平台，多人实时协作

- Link: https://paooo.com/aigc-news/24173/
- Published: 2026-07-07T13:49:36+08:00
- Author: 站外新闻

## Penpot是什么

Penpot 是开源的设计与代码协作平台，基于 SVG、CSS、HTML 等开放标准构建，可在浏览器
中完成 UI 设计与交互原型制作。平台支持多人实时协作、W3C Design Tokens 管理和 MCP
Server 集成，让 AI 直接读取设计文件的真实组件、Tokens 与图层结构而非仅截图。通过
Inspect 模式可一键复制原生代码，实现设计即代码。

阅读目录

 * [Penpot是什么](https://paooo.com/aigc-news/24173/#penpot%e6%98%af%e4%bb%80%e4%b9%88)
 * [Penpot的主要功能](https://paooo.com/aigc-news/24173/#penpot%e7%9a%84%e4%b8%bb%e8%a6%81%e5%8a%9f%e8%83%bd)
 * [如何使用Penpot](https://paooo.com/aigc-news/24173/#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8penpot)
 * [Penpot的核心优势](https://paooo.com/aigc-news/24173/#penpot%e7%9a%84%e6%a0%b8%e5%bf%83%e4%bc%98%e5%8a%bf)
 * [Penpot的项目地址](https://paooo.com/aigc-news/24173/#penpot%e7%9a%84%e9%a1%b9%e7%9b%ae%e5%9c%b0%e5%9d%80)
 * [Penpot的同类竞品对比](https://paooo.com/aigc-news/24173/#penpot%e7%9a%84%e5%90%8c%e7%b1%bb%e7%ab%9e%e5%93%81%e5%af%b9%e6%af%94)
 * [Penpot的应用场景](https://paooo.com/aigc-news/24173/#penpot%e7%9a%84%e5%ba%94%e7%94%a8%e5%9c%ba%e6%99%af)

![Penpot](https://paooo.com/wp-content/uploads/2026/07/Penpot-website-1.avif)

## Penpot的主要功能

 * **UI 设计与原型制作**：在浏览器中完成界面设计、交互原型和可视化编辑，支持多页
   面管理。
 * **实时协作**：多人同时编辑同一设计文件，支持评论、标注和版本同步。
 * **Inspect 模式**：选中任意元素可直接查看并复制对应的 SVG、CSS、HTML 代码，开发
   者无需手动还原。
 * **原生 CSS Grid 与 Flex 布局**：设计稿按真实 Web 布局规则渲染，所见即所得，输出
   代码与视觉完全一致。
 * **Design Tokens 管理**：业内首个完整支持 W3C Design Tokens 标准的设计工具，统一
   管控颜色、字号、间距等变量。
 * **组件与变体系统**：支持创建可复用组件及多状态变体，构建可扩展的设计系统。
 * **MCP Server 集成**：内置 MCP 服务，AI Agent 可直接读取设计文件的结构、组件和
   Tokens，实现双向设计-代码工作流。

![挖挖GitHub](https://paooo.com/wp-content/uploads/2026/07/wawagithub-29.avif)

微信关注回复 “**开源**”，加入**AI开源项目交流群**

## 如何使用Penpot

 * **方式一：SaaS 在线使用**
    - **注册账号**：访问 `design.penpot.app`，用邮箱注册免费账号。
    - **创建项目**：登录后新建团队或项目，进入设计画布开始创作。
    - **设计界面**：利用左侧工具栏绘制形状、文本和组件，右侧面板调整属性与布局。
    - **管理 Tokens**：在 Tokens 面板中定义颜色、字体、间距等设计变量，并绑定到元素。
    - **开启协作**：邀请团队成员加入项目，多人实时编辑同一文件。
    - **导出代码**：选中元素打开 Inspect 面板，一键复制 SVG、CSS 或 HTML 代码供开发
      使用。
 * **方式二：Docker 自托管**
    - **下载配置**：在服务器上执行 `curl` 获取官方 `docker-compose.yaml` 文件。
    - **启动服务**：运行 `docker compose up -d` 部署 Penpot 服务。
    - **访问配置**：通过浏览器访问服务器 IP 的 9001 端口，按向导完成初始化设置。
    - **注册管理员**：首次访问创建管理员账号，即可在内网环境中独立使用全部功能。

## Penpot的核心优势

 * **设计即代码**：从创作之初就用 Web 标准表达设计，Inspect 直接输出可用代码，消除
   设计与开发之间的翻译损耗。
 * **完全开源与自托管**：MPL-2.0 协议，支持私有化部署，满足金融、政府、医疗等敏感
   行业的合规与数据主权需求。
 * **AI 原生可读**：通过 MCP Server，AI Agent 直接读取设计结构而非截图，实现精准
   生成、自动调整和双向同步。
 * **无供应商锁定**：基于 SVG/CSS/HTML/JSON 开放标准，文件格式通用，随时可迁移至
   其他工具。
 * **Design Tokens 行业标准**：原生支持 W3C 标准，设计变量一处修改全局联动，构建
   可规模化维护的设计系统。

## Penpot的项目地址

 * **项目官网**：https://penpot.app/
 * **GitHub仓库**：https://github.com/penpot/penpot

## Penpot的同类竞品对比

  |  对比维度 |  **Penpot** |  [**Figma**](https://ai-bot.cn/sites/13896.html) |  
   |  **开源协议** |  MPL-2.0，完全开源 |  闭源商业软件 |  
 |  **部署方式** |  SaaS + Docker 自托管 |  仅 SaaS（云端） |  
 |  **数据所有权** |  完全自主，可私有化 |  存储于 Figma 云端 |  
 |  **设计文件格式** |  SVG、CSS、HTML、JSON 开放标准 |  私有格式 `.fig` |  
 |  **代码导出** |  Inspect 直接复制原生代码 |  Dev Mode 导出代码，需适配 |  
 |  **Design Tokens** |  原生支持 W3C 标准 |  通过插件或第三方工具支持 |  
 |  **AI 集成** |  内置 MCP Server，双向读写 |  依赖 Figma AI 功能，封闭生态 |  
 |  **协作能力** |  实时多人协作 |  实时多人协作（行业标杆） |  
 |  **社区生态** |  53.5k+ Star，活跃开源社区 |  庞大商业用户生态，插件丰富 |  
 |  **适用场景** |  注重隐私合规、设计系统建设、AI 工作流 |  快速原型、大型商业设计团队 |

## Penpot的应用场景

 * **企业级设计系统建设**：通过 Design Tokens 和组件库构建跨产品、跨平台的一致性
   设计规范。
 * **金融与政务 UI 开发**：私有化部署满足数据安全合规要求，设计稿不出内网。
 * **AI 驱动的前端开发**：结合 MCP 让 AI 读取设计稿直接生成代码，缩短从设计到上线
   的周期。
 * **开源社区与教育机构**：零成本使用全功能设计工具，支持教学、开源项目协作和技能
   培养。
 * **设计-开发无缝协作**：设计师在 Penpot 中创作，开发者通过 Inspect 直接获取可用
   代码，减少沟通成本。