一个开源团队，做了个让 Figma 害怕的东西！
原文链接一个开源团队，做了个让 Figma 害怕的东西！
原文链接：https://mp.weixin.qq.com/s/-dovEXFVQbmmizp5Gq6DYQ 来源：开源先锋 发布时间：2026-06-23
摘要
Penpot — 开源、可自托管的 UI 设计协作工具，GitHub 52.9k Star，定位 Figma 替代品。核心差异化：基于 SVG/CSS/HTML 开放标准构建，设计稿本身就是可直接读懂的代码，无私有格式锁定。原生支持 CSS Flex/Grid 布局、Design Tokens、AI Agent 集成（MCP Server）、跨项目组件库共享。Docker 一键部署，4 核 8GB 可支撑 10-20 人团队。
项目背景
西班牙公司 Kaleidos 开发，最早为内部项目，2021 年对外开源。MPL-2.0 协议，已发布 80+ 版本。
四大功能特色
1. UI 设计：线框图 → 原型 → 响应式一站式
CSS Flex 和 Grid 布局直接内嵌进设计工具，画布上拖出来的布局底层就是真实 CSS 结构——设计稿即规则，不是死图。
2. 设计系统：组件 + Design Tokens + 共享库
原生支持 Design Tokens，颜色/字体/圆角/间距统一定义，改一处全局更新。组件库可跨项目共享。
3. AI 工作流：开放 AI 集成通道
不是简单加个"AI 生成图片"按钮，而是开放整个集成通道——任何 AI Agent/大模型/工具都可接入 Penpot 核心流程，驱动"代码生成设计稿→设计稿生成代码→设计稿生成设计稿"等工作流。MCP Server 支持让 AI 真正读懂、操作设计文件。
4. 代码协作：设计稿和代码真正对上
SVG 作为原生文件格式，CSS/HTML/SVG/JSON 全部开放。代码检查面板看到的样式就是可直接用的代码，无需二次翻译。
部署方式
方式一：官方云端 → design.penpot.app 注册即用，免费零配置。
方式二：Docker 自托管 → 两条命令：
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
docker compose -p penpot -f docker-compose.yaml up -d
访问 http://localhost:9001，建议 4 核 8GB 起步。
核心评价
有学习成本（和 Figma 操作习惯不完全一样），但熟悉后在"设计与开发打通"这件事上想得比 Figma 更彻底。最值钱的不只是免费——是数据主权和工具控制权还给你。