视频加载失败

Figma太贵?这个开源设计平台,支持自托管,设计即代码

2513 字
13 分钟
Figma太贵?这个开源设计平台,支持自托管,设计即代码
Figma太贵?这个开源设计平台,支持自托管,设计即代码

朋友们!设计工具太贵还被绑定?#

你是不是经常遇到这些困扰:

  • Figma太贵:团队协作需要付费,而且价格越来越高
  • 数据不安全:设计稿存放在第三方云端,担心数据泄露
  • 设计开发脱节:设计师设计的效果,开发还原不出来
  • 无法自托管:想在公司内网部署,却没有合适的方案
  • 设计系统难维护:设计令牌、组件库难以统一管理
  • AI集成困难:想让AI参与设计流程,却没有合适的接口

今天我要给大家分享一个 GitHub 上的宝藏项目——Penpot!这是一款面向团队的开源设计平台,支持实时协作、设计即代码、设计令牌、MCP服务器,可自建部署,完全免费开源!

✨ 什么是 Penpot?#

Penpot 是一款面向团队的开源设计平台,专为大规模构建数字产品而设计。它的核心优势在于让您完全拥有设计基础设施的所有权,基于开源技术构建,支持自托管部署,让团队完全控制设计环境,满足严格的合规和治理要求。

核心特点

  • 🔓 开源免费:完全开源,无任何隐藏费用
  • 🏠 支持自托管:可部署在自己的服务器上,数据完全自主可控
  • 🎨 设计即代码:设计以代码形式表达,开发者可以直接理解和使用
  • 🔄 实时协作:多人实时协作设计,支持团队协作
  • 🎯 设计令牌:原生设计令牌支持,确保设计一致性
  • 🔌 MCP服务器:支持设计和代码之间的双向工作流
  • 📡 开放API:强大的开放API和插件系统,支持自动化和AI工作流
  • 📱 响应式设计:支持 CSS Grid 和 Flex Layout,设计响应式界面
  • 🌐 开放标准:支持 SVG、CSS、HTML、JSON 等开放标准

🎯 核心功能#

1. 实时协作设计#

Penpot 支持多人实时协作,团队成员可以同时编辑同一个设计文件:

- 多人实时编辑
- 实时光标显示
- 评论和标注
- 版本历史
- 设计评审

2. 设计即代码#

Penpot 最大的特色之一就是设计以代码形式表达,这让开发者可以直接理解和使用设计:

- 设计以 JSON 格式存储
- 支持 SVG、CSS、HTML 导出
- Inspect 模式提供即时代码访问
- 设计可以直接转换为代码
- 开发者可以轻松理解设计意图

3. 设计令牌(Design Tokens)#

原生设计令牌支持,提供设计和开发之间的单一事实来源:

- 原生设计令牌支持
- 确保设计一致性
- 简化设计系统管理
- 支持复杂设计系统
- 设计和开发共享同一来源

4. MCP 服务器#

MCP(Model Context Protocol)服务器实现设计和代码之间的双向工作流:

- 支持设计到代码的转换
- 支持代码到设计的更新
- AI可以读取和理解设计
- 实现自动化工作流
- 集成现有工具和系统

5. 响应式设计#

支持 CSS Grid 和 Flex Layout,从一开始就设计出像真实代码一样响应的界面:

- CSS Grid 布局支持
- Flex Layout 支持
- 响应式断点设置
- 设计真实的响应式界面
- 从设计到代码无缝转换

🚀 部署方式#

方式一:使用 SAAS 版本#

直接访问 https://design.penpot.app,无需部署,立即使用。

方式二:Docker 部署(推荐)#

Terminal window
# 创建目录
mkdir penpot && cd penpot
# 创建 docker-compose.yaml
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
# 启动服务
docker compose up -d
# ============================== Penpot 配置说明 ==============================
# 功能开关标识列表(可在PENPOT_FLAGS中按需增删)
# demo-users: 内置演示账号
# email-verification: 注册邮箱验证
# log-emails: 打印邮件日志
# log-invitation-tokens: 打印邀请链接Token日志
# login-with-github: GitHub第三方登录
# login-with-gitlab: GitLab第三方登录
# login-with-google: Google第三方登录
# login-with-ldap: LDAP登录
# login-with-oidc: OIDC统一身份登录
# login-with-password: 账号密码登录
# prepl-server: 开启调试PREPL服务
# registration: 允许自助注册账号
# secure-session-cookies: 会话Cookie启用安全加密(公网部署必须开启)
# smtp: 启用邮件发送服务
# smtp-debug: SMTP通信调试日志
# telemetry: 匿名使用数据上报
# webhooks: WebHook回调能力
# 官方完整配置文档:https://help.penpot.app/technical-guide/configuration/#penpot-configuration
# 安全警告:公网对外部署务必删除 disable-secure-session-cookies、disable-email-verification 关闭项
# ============================================================================
# 全局功能开关配置
x-flags: &penpot-flags
PENPOT_FLAGS: disable-email-verification enable-smtp enable-prepl-server disable-secure-session-cookies enable-mcp
# Penpot前端访问公网地址
x-uri: &penpot-public-uri
PENPOT_PUBLIC_URI: http://localhost:9001
# HTTP请求体大小限制(上传大设计文件使用)
x-body-size: &penpot-http-body-size
# 最大单请求Body上限
PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 367001600
# 兼容旧版变量(已废弃,仅做向下兼容保留)
PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE: 367001600
# Penpot主密钥,用于会话、邀请链接等子密钥派生
# 推荐使用512位Base64随机字符串生成,生成命令:python3 -c "import secrets; print(secrets.token_urlsafe(64))"
x-secret-key: &penpot-secret-key
PENPOT_SECRET_KEY: change-this-insecure-key
# 自定义Docker网络,所有服务互通
networks:
penpot:
# 持久化数据卷
volumes:
penpot_postgres_v15: # PostgreSQL数据库存储卷
penpot_assets: # 上传素材、设计文件存储卷
services:
# 前端页面服务,用户访问入口
penpot-frontend:
image: "penpotapp/frontend:${PENPOT_VERSION:-2.16}"
restart: always
ports:
- 9001:8080
volumes:
- penpot_assets:/opt/data/assets
# 依赖服务启动完成后再启动前端
depends_on:
- penpot-backend
- penpot-exporter
- penpot-mcp
networks:
- penpot
environment:
<< : [*penpot-flags, *penpot-http-body-size, *penpot-public-uri]
# Penpot后端核心业务服务
penpot-backend:
image: "penpotapp/backend:${PENPOT_VERSION:-2.16}"
restart: always
volumes:
- penpot_assets:/opt/data/assets
# 等待数据库、缓存健康就绪再启动
depends_on:
penpot-postgres:
condition: service_healthy
penpot-valkey:
condition: service_healthy
networks:
- penpot
environment:
<< : [*penpot-flags, *penpot-public-uri, *penpot-http-body-size, *penpot-secret-key]
# PostgreSQL数据库连接配置
PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot
PENPOT_DATABASE_USERNAME: penpot
PENPOT_DATABASE_PASSWORD: penpot
# Valkey缓存(原Redis),用于WebSocket实时通知
PENPOT_REDIS_URI: redis://penpot-valkey/0
# 文件存储配置:本地文件系统模式
PENPOT_OBJECTS_STORAGE_BACKEND: fs
PENPOT_OBJECTS_STORAGE_FS_DIRECTORY: /opt/data/assets
# 匿名使用数据上报
PENPOT_TELEMETRY_ENABLED: "true"
PENPOT_TELEMETRY_REFERER: compose
# SMTP邮件发送配置(当前使用内置邮件捕获容器)
PENPOT_SMTP_DEFAULT_FROM: [email protected]
PENPOT_SMTP_DEFAULT_REPLY_TO: [email protected]
PENPOT_SMTP_HOST: penpot-mailcatch
PENPOT_SMTP_PORT: 1025
PENPOT_SMTP_USERNAME:
PENPOT_SMTP_PASSWORD:
PENPOT_SMTP_TLS: "false"
PENPOT_SMTP_SSL: "false"
# MCP服务扩展组件
penpot-mcp:
image: "penpotapp/mcp:${PENPOT_VERSION:-2.16}"
restart: always
networks:
- penpot
# 图纸导出服务(生成图片/PDF等导出能力)
penpot-exporter:
image: "penpotapp/exporter:${PENPOT_VERSION:-2.16}"
restart: always
depends_on:
penpot-valkey:
condition: service_healthy
networks:
- penpot
environment:
<< : [*penpot-secret-key]
# 内部网络访问前端地址,用于渲染导出
PENPOT_PUBLIC_URI: http://penpot-frontend:8080
# 连接Valkey缓存
PENPOT_REDIS_URI: redis://penpot-valkey/0
# PostgreSQL 数据库存储业务数据
penpot-postgres:
image: "postgres:15"
restart: always
stop_signal: SIGINT
# 数据库健康检测,等待就绪再提供服务
healthcheck:
test: ["CMD-SHELL", "pg_isready -U penpot"]
interval: 2s
timeout: 10s
retries: 5
start_period: 2s
volumes:
- penpot_postgres_v15:/var/lib/postgresql/data
networks:
- penpot
environment:
- POSTGRES_INITDB_ARGS=--data-checksums
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot
# Valkey缓存服务(兼容Redis协议),实时消息、会话缓存
penpot-valkey:
image: valkey/valkey:8.1
restart: always
# 缓存健康检测
healthcheck:
test: ["CMD-SHELL", "valkey-cli ping | grep PONG"]
interval: 1s
timeout: 3s
retries: 5
start_period: 3s
networks:
- penpot
environment:
# 限制最大内存及淘汰策略
- VALKEY_EXTRA_FLAGS=--maxmemory 128mb --maxmemory-policy volatile-lfu
# 测试用邮件捕获服务,接收所有系统发送邮件,1080端口网页查看
# 生产环境请替换为真实SMTP服务器
penpot-mailcatch:
image: sj26/mailcatcher:latest
restart: always
expose:
- '1025'
ports:
- "1080:1080"
networks:
- penpot

访问 http://localhost:9001 即可使用。

📝 使用指南#

快速开始#

  1. 访问 Penpot(SAAS 版本或自建部署)
  2. 注册账户,创建团队
  3. 创建新项目
  4. 开始设计

设计流程#

1. 创建设计文件
2. 使用设计令牌定义样式
3. 创建组件和变体
4. 设计响应式界面
5. 团队协作评审
6. 导出代码(SVG/CSS/HTML)
7. 开发者实现
8. 通过 MCP 更新设计

开发者工作流#

1. 使用 Inspect 模式查看代码
2. 导出 SVG/CSS/HTML
3. 理解设计令牌
4. 实现设计
5. 通过 API 更新设计
6. 保持设计和代码同步

📊 对比其他方案#

方案开源自托管设计即代码设计令牌团队协作成本
Penpot🆓
Figma付费
Sketch付费
Adobe XD付费
InVision付费

📜 开源协议#

Penpot 采用 MPL-2.0(Mozilla Public License 2.0)开源协议:

  • 可以免费使用、修改和分发
  • 修改后的代码需要开源
  • 适合商业和非商业用途

📝 总结#

Penpot 是一款功能强大的开源设计平台,特别适合需要自托管部署、设计开发协作的团队。它支持实时协作、设计即代码、设计令牌、MCP服务器等核心功能,让设计和开发之间的工作流更加顺畅。无论是初创团队还是大型企业,都能从中受益。如果你正在寻找一个替代 Figma 的开源方案,或者需要在公司内网部署设计工具,Penpot 绝对值得一试!

🌟 项目资源#

官方网站: https://penpot.app

GitHub 地址: https://github.com/penpot/penpot

觉得项目不错的话,记得给作者点个 star 支持一下!

🎉 互动时间#

你在团队协作设计中遇到过什么问题?最希望设计工具支持什么功能?欢迎在评论区和我交流分享!

我会定期分享更多好用的工具,记得关注我哦!


推荐阅读:

如果您觉得这篇文章有帮助,请为小王点点推荐,谢谢!🌹

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
Figma太贵?这个开源设计平台,支持自托管,设计即代码
https://blog.huhaha.vip/posts/docker/penpot-intro/
作者
小王的博客
发布于
2026-06-24
许可协议
CC BY-NC-SA 4.0
相关文章智能推荐
1
GitHub热门项目!yantr:自托管应用商店,不占用系统资源,130+应用一键部署
工具推荐一个容器搞定所有服务!yantr作为应用而非操作系统运行,130+精选应用,一键部署,支持AI、媒体、下载、云存储、安全等多种类型
2
喜欢的博主突然下架视频?这个开源工具,一键备份所有精彩内容!
工具推荐一款完全免费开源的抖音视频下载工具,支持单个视频、图片笔记、合集、音乐、收藏、用户主页批量下载,无水印优先,最高质量选择,还支持直播录制和评论采集。支持CLI命令行和REST API,适合备份喜欢的博主内容!
3
GitHub热门项目!Voicebox,开源语音合成的终极解决方案
docker今天我要给大家推荐一个超级好用的语音合成工具——**Voicebox**,它是一个本地优先的开源语音克隆工作室,完全免费,在你的电脑上本地运行,保护隐私的同时,提供专业级的语音合成能力!这两天这个项目在技术圈子里特别火,今天我就来和大家唠唠这个神奇的工具,看看它是怎么让我们这些普通用户也能拥有专业级语音合成能力的。
4
发现免费在线PS替代品!Photopea让你不用安装软件也能专业修图
工具推荐最近我想修几张照片,但是电脑里没有装 Photoshop,下载安装又麻烦,而且正版还挺贵的。就在我纠结的时候,朋友给我推荐了一个在线图片编辑器——**Photopea**,简直是救星!今天必须分享给你们!
5
GitHub热门项目!BentoPDF:浏览器端隐私优先的PDF工具箱,50+工具一键搞定
docker所有处理在浏览器端完成,文件不上传服务器,支持50+工具,可自建部署,完全免费开源!
随机文章随机推荐

评论区

Profile Image of the Author
小王的博客
一个上了年纪的猿人.
分类
标签
最新动态
站点统计
文章
209
分类
15
标签
161
总字数
478,322
运行时长
0
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.7
文章许可
CC BY-NC-SA 4.0
文章目录