Penpot

Penpot 是开源界首款原生拥抱 Web 标准、专为跨职能产研团队打造的免费多人在线协同设计与原型平台。凭借开放源代码许可、CSS Grid 与 Flexbox 真实盒模型排版驱动以及高度自主可控的 Docker 私有化自托管部署能力，它打破了传统设计工具的技术壁垒，成为全球开源开发者与自主创新团队的首选平台。

为什么说 Penpot 是第一款“把 CSS 原生标准写进画布”的设计工具？

在传统设计工具中，设计师在画布上绘制元素多基于“绝对坐标点（X, Y）”和死板的像素宽高。这种脱离前端工程实现的模式，导致前端工程师在开发中不得不痛苦地将写死的坐标重新用 CSS 弹性盒（Flexbox）与网格（Grid）进行重构，这也是“设计稿与线上网页相去甚远”的根源。

Penpot 从底层重构了这一范式：它是业界首款完全将 W3C 标准 CSS 规范原生植入设计核心的协同软件：

在 Penpot 中，排版容器不仅具备流式弹性布局能力，更完整支持了 CSS Grid（网格布局引擎）：设计师在画布上定义的列宽比例（如 1fr 2fr 1fr）、单元格间距（Gap）与对齐方式，在底层完全等价于标准 CSS 声明。设计师在排版的同时，本质上是在用可视化的形式编写现代 Web 布局代码，前端工程师打开检查面板即可直接复制真实的 Grid 样式，彻底消灭了产研沟通内耗。

基于 Docker Compose 的企业内网私有化自托管部署实操

数据主权与隐私安全是开源社区坚定的追求。Penpot 官方提供了极为成熟的 Docker 容器编排方案，企业与极客可在十几分钟内完成全套私有化集群部署：

# docker-compose.yaml 核心服务编排示例
version: '3.8'

services:
  penpot-frontend:
    image: penpotapp/frontend:latest
    ports:
      - "9001:80"
    depends_on:
      - penpot-backend

  penpot-backend:
    image: penpotapp/backend:latest
    volumes:
      - penpot_assets:/opt/data/assets
    environment:
      - PENPOT_DATABASE_URI=postgresql://penpot:penpot@penpot-postgres/penpot
      - PENPOT_REDIS_URI=redis://penpot-redis/0
      - PENPOT_SECRET_KEY=your_strong_secret_key
    depends_on:
      - penpot-postgres
      - penpot-redis

  penpot-postgres:
    image: postgres:15
    environment:
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot
      - POSTGRES_DB=penpot
    volumes:
      - postgres_data:/var/lib/postgresql/data

  penpot-redis:
    image: redis:7-alpine

volumes:
  penpot_assets:
  postgres_data:

执行 docker compose up -d 后，全套系统即可在内网本地服务器拉起。后端采用 Clojure 微服务架构，前端采用 ClojureScript 驱动，依托 Redis 与 PostgreSQL 服务，轻松承载团队内部实时协同，且所有数据 100% 物理留存在自有硬盘之上。

原生 SVG 数据存储架构与直接生成清洁 Web 代码

主流商业协同软件普遍采用私有二进制或封闭专有格式，一旦服务商终止服务或调整授权政策，用户沉淀的海量设计文件面临无法打开的巨大风险。

Penpot 坚定选择了开放的 原生 SVG（Scalable Vector Graphics） 作为其最底层的图形存储与表达规范：

画布上的每一个矢量节点、路径轮廓与渐变填充，底层数据天然由开放且具备标准语义的 SVG 节点树构成。这意味着用户导出的不仅仅是一张静态图片，更是一份语法完全合法、属性规范且不含垃圾冗余标签的 Web 矢量资产。开发者甚至可以直接将 Penpot 生成的代码片段无缝复制到 React 或 Vue 组件库中，将其直接作为自适应矢量组件进行二次编程。

开源自托管运维实践：PostgreSQL 备份与 WebSocket 实时协作连接调优

在将 Penpot 作为核心基座长期运维时，系统管理员应重点关注以下工程运维细节：

首先是生产数据库的定时冷备机制：Penpot 所有的项目元数据、权限关系、设计图层版本与评论批注全部持久化存储在 PostgreSQL 数据库中，而图像等静态文件则持久化在挂载的数据卷或 S3 存储中。建议通过自动化 Cron 任务每日执行 pg_dump 全量逻辑备份并异地归档，杜绝硬件损坏造成的资产损毁。

其次是反向代理层的长连接保活调优：多人实时协同依赖稳定持续的双向 WebSocket 连接。在前端 Nginx 反向代理层配置中，必须显式声明 proxy_set_header Upgrade $http_upgrade; 与 proxy_set_header Connection "upgrade";，并将 proxy_read_timeout 调高至 86400 秒，避免企业内网防火墙因超时掐断握手，杜绝画布协作时频繁出现重连提示。