Penpot是什么

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

Penpot的主要功能

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

微信关注回复 “开源”，加入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的应用场景

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