🎨 Penpot 2026：当设计稿学会「说人话」，开发与设计的千年纷争终于熄火

“这个按钮的圆角到底是多少？设计稿里看着像 8px，代码里写的是 6px…”
“我导出的 SVG 图标颜色怎么又丢了？团队规范里明明定义的是 --icon-primary！”

如果你曾在深夜的开发群里见过类似的对话，那你一定理解「设计-开发交接」这种古老的仪式有多么令人崩溃。今天给 GitHub Trending 霸榜的 Penpot，正是那个试图用一行代码终结这场战争的狠角色。

🤔 Penpot 是谁？为什么 Figma 用户都在偷偷 star 它

Penpot 是一个完全开源的设计与原型工具，专为设计师和开发者之间的无缝协作而生。它不像传统设计工具那样把画布当作一个封闭的像素盒子，而是从底层将设计元素视为真正的 Web 代码——SVG、CSS、HTML 结构。

2026 年的 Penpot 2.0 已经支持了实时协作、设计 Token、组件变体、自动布局、原型交互等高端特性，但它最致命的诱惑仍然是那句话：你可以在自己的服务器上运行它，数据完全归你，没有任何协作人数限制，且永远免费。

📦 开源协议：Mozilla Public License 2.0。今天的推荐日期是 2026-06-21，GitHub 星数已突破 35k，社区贡献者超过 500 人。

⚔️ 设计工具「三国杀」：Penpot 凭什么叫板 Figma 和 Sketch

我们不妨把目前主流的设计协作工具拉到一张桌子上，看看 Penpot 究竟动了谁的奶酪。

Figma：云端的完美情人，但你有钥匙吗？

Figma 的实时协作和浏览器原生体验确实革命性，但它是一个封闭的 SaaS。你的设计文件、设计系统、团队库全部运行在 Figma 的服务器上。当你想导出真正的设计 Token 给开发团队时，需要借助插件或第三方工具（如 Tokens Studio），而且一旦超出免费层级，账单会让你怀疑人生。

Penpot 的做法截然不同：设计文件本身就是 .penpot 格式的开放数据，你可以直接解析；内置的「设计 Token」面板能直接生成 CSS/SCSS/JSON 变量，无需任何中介。

Sketch：macOS 贵族，跨平台是硬伤

Sketch 作为老牌矢量工具，插件生态极其丰富，但它始终是 macOS 的「独占者」。而在 Penpot 甚至 Figma 面前，原生应用的优势在浏览器性能大幅提升的今天已不那么明显。Penpot 基于 Web 技术构建，任何操作系统都能用，包括 Linux（这对开发者太重要了）。

真正降维打击的地方：代码原生（Code-first）

Figma 和 Sketch 的设计稿本质上是一个矢量图形堆栈，你在画板上画的每一个矩形、文本，最终都被翻译成专有的二进制或 JSON 结构。Penpot 则直接从「Web 第一性原理」出发：

  • 🏷️ 你画的一个矩形，在 inspect 面板里直接就是 div 或 svg rect，附带完整的 CSS 属性
  • 🎨 定义的色彩、排版、间距都以设计 Token 形式存储，一键导出为前端变量
  • 💻 SVG 图标复制出来就是干净、语义化的 SVG 代码，没有多余的 g 标签或乱码的 id

这种「所见即所得代码」的体验，让以前“设计师调了，前端还得再写一遍”的重复劳动变成了零。

🧙 核心魔法：设计 Token 与代码同步的终极奥义

我们来实际看一个例子。假设你在 Penpot 中创建了一套品牌色彩系统：

  • 主色 #7B61FF（紫罗兰）
  • 危险色 #E84D4D
  • 间距基准 8px

在 Penpot 的「设计 Token」面板中，你可以直接把它们组织成层级结构（如 color.primary, spacing.base），而无需下载任何插件。当你把设计分享给开发者时，他们看到的界面会自动将这些 Token 翻译为：

:root {
  --color-primary: #7B61FF;
  --color-danger: #E84D4D;
  --spacing-base: 8px;
  --font-size-body: 16px;
}

同时，组件库也能直接关联这些 Token。修改主色，所有按钮、链接、标签的颜色全部联动更新。这不是什么新增的「设计系统功能」，而是 Penpot 基因里自带的能力，因为它从一开始就把设计当作「参数化代码」来处理。

更绝的是，开发者甚至可以通过 Penpot 的 Plugin API （2026 年已全面开放）直接拉取设计文件数据，接入 CI/CD 流程：

// 获取当前文件的所有颜色 Token
const tokens = await penpot.getDesignTokens();
const cssVars = tokens.toCSS();
fs.writeFileSync('design-tokens.css', cssVars);

🏗️ 技术架构：为什么敢说「代码原生」？Clojure 的浪漫与野心

这可能是一小部分开发者才感兴趣的硬核话题，但它恰好解释了 Penpot 为什么能做到那些 Figma 做不到的事。

Penpot 的前后端全部使用 Clojure 与 ClojureScript 编写。这是一种运行在 JVM 和 JavaScript 引擎上的 Lisp 方言，以函数式、不可变数据和强大的宏系统著称。这种选择带来了两个直接好处：

  • 数据结构即设计：Penpot 内部的设计元素被表示为普通的 Clojure 数据结构（EDN），这本身就是一种开放格式。任何开发者都能用最简单的脚本解析 .penpot 文件，而无需逆向专有格式。这种透明性，闭源工具永远给不了。
  • 高性能的实时协作：多人同时编辑时的冲突解决采用 CRDT（无冲突复制数据类型）或 OT（操作转换）算法。Penpot 基于一套定制的协同引擎，能处理每秒上千次的设计微调，并且对网络延迟极度宽容。就算你和设计师一个在火星一个在地球，也能愉快地拖拽矩形。

前端方面，Penpot 使用自己构建的 rumext 框架（基于 React 思想的 ClojureScript 封装），渲染层并没有直接用 Canvas，而是混合了 SVG 和 DOM。这意味着页面元素在浏览器中就是真实的 DOM 节点，开发工具的 inspect 面板甚至可以直接借用浏览器开发者工具的一部分能力。

🎯 适用场景与冷静反思

没有银弹，Penpot 也有它的甜蜜区和盲区。

✅ 这些场景下 Penpot 会让你爽到飞起：

  • 团队需要建立从设计到代码的严格设计系统，并且希望 Token 直接驱动 UI 开发。
  • 重视数据隐私或合规（如金融、医疗），需要自托管的设计协作平台。
  • 大量 SVG 图标、插画设计，迫切需要「设计即导出代码」的整洁工作流。
  • 技术主导的团队，设计师愿意接受些许学习曲线换取开发者愉悦。

⚠️ 目前可能需要再接再厉的地方：

  • 插件生态相较 Figma 仍显稚嫩，但核心功能已足够扎实。
  • 复杂交互动效（如微交互预览）还不如 Principle 或 Figma 丰富。
  • 自托管需要一定的运维能力，虽然官方提供 Docker 一键部署，但团队需自己维护服务器。
  • 部分设计师可能觉得 Penpot 的界面“太像开发工具”，不像 Figma 那样“感性”。

💡 敲黑板：什么时候你应该义无反顾地转向 Penpot

如果你已经受够了「设计稿是一回事，前端还原是另一回事」的轮回，或者团队的 DevOps 文化要求一切进入版本控制、自动化流水线，那么 Penpot 就是你今年最该认真评估的工具。它不仅仅是 Figma 的廉价替代品，更是一套全新的设计工程化范式：Design as Data, Design as Code。

2026 年的 Penpot 已经证明，开源协作可以兼具优雅的用户体验和工业级稳定性。当你下次在 PR 里看到设计师为你提交的设计 Token 更新时，你可能会感动得想给这个项目再点一颗 ⭐。

（文章首发于 GitHub Trending 观察，项目地址：penpot/penpot）