在设计工具领域长期被商业软件主导的格局下，Penpot 作为首个开源的设计与原型协作平台，于 2019 年由 Kaleidos 公司推出并迅速获得开发者社区的关注。与 Figma、Sketch 等封闭生态不同，Penpot 从架构层面就将「设计即代码」作为核心理念，其 SVG 导出机制直接服务于设计稿与前端代码的无缝对接。本文将从技术栈选择、SVG 导出机制、跨平台渲染架构三个维度，解析 Penpot 如何实现设计到代码的精确协作。
Clojure 技术栈的双端统一
Penpot 的技术选型体现了对工程一致性的极致追求。前端采用 ClojureScript 配合 React 框架构建单页应用，后端则使用 Clojure 编写并编译为 JVM 字节码运行，数据持久化由 PostgreSQL 完成。这一架构的核心优势在于前后端可以共享同一套数据结构和业务逻辑代码，消除了传统 Web 应用中前后端数据模型不一致带来的沟通成本与转换开销。
从实际工程角度看，Clojure 的函数式编程范式为 Penpot 的状态管理提供了天然优势。设计工具需要处理大量并发操作 —— 包括图形变换、图层堆叠、实时协作编辑等，Clojure 的不可变数据结构和软件事务内存（STM）机制能够优雅地解决这些复杂状态问题。同时，由于前后端均使用同一种编程语言，团队成员可以在前后端之间灵活切换，降低了维护门槛并提升了开发效率。这种全栈 Clojure 的架构选择，使得 Penpot 能够在保持代码简洁性的同时，实现复杂的设计交互逻辑。
SVG 作为原生格式的设计哲学
Penpot 将 SVG 作为内部存储的原生格式，这一决策直接决定了其导出能力的精确度和可靠性。在许多设计工具将矢量图形转换为私有格式的行业中，Penpot 选择 SVG 意味着设计数据的表达从一开始就与 Web 标准对齐。当用户在 Penpot 中绘制一个矩形、创建一条曲线或定义一组渐变时，这些元素的坐标、变换矩阵、填充规则等属性均以 SVG 兼容的方式记录，无需经过复杂的格式转换即可导出为标准 SVG 代码。
这种原生 SVG 策略在实际工作流中带来了显著优势。设计师完成界面设计后导出的 SVG 文件可以在任何浏览器中直接预览，也可以无缝嵌入 React、Vue 或 Svelte 等现代前端框架的项目中。由于 SVG 本身就是 DOM 的一部分，前端开发者可以直接通过 CSS 或 JavaScript 对导出的图形进行样式调整和动画控制，无需依赖设计团队重新导出。这种「设计即代码」的理念大幅缩短了设计交付的迭代周期，也降低了因格式转换导致的设计细节丢失风险。
导出机制的实现细节
Penpot 的导出功能由独立的 Exporter 应用模块负责，该模块从主应用的数据存储中读取设计对象，并将其转换为目标格式。在 SVG 导出场景下，Exporter 会遍历设计文件中的所有图形元素，依据元素的类型、属性和层级关系生成对应的 SVG 标签和属性。值得注意的是，Penpot 在导出时保留了设计稿中的分组结构、命名规范和参考线信息，使得导出的 SVG 文件在代码层面仍然具备可读性和可维护性。
针对不同使用场景，Penpot 支持多种导出格式的组合输出。除了标准 SVG 矢量文件外，平台还提供 PNG、JPG 等位图格式的导出选项，用户可以在导出面板中一次性选择多种格式和分辨率。这种灵活性使得同一设计稿既能产出用于高清屏的矢量资源，也能生成用于文档或演示的位图素材。对于需要将设计直接嵌入 HTML 的场景，Penpot 同样支持导出为 HTML 代码片段，开发者可以直接将生成的 HTML 粘贴到页面中，实现设计稿的快速落地。
跨平台渲染的工程挑战
作为一款基于 Web 的设计工具，Penpot 需要在浏览器环境中实现接近原生应用的交互体验。其渲染引擎基于 HTML5 Canvas 与 SVG 的混合模式：对于需要高精度矢量编辑的画布区域，使用 SVG 作为渲染底层以保证图形精确度；对于复杂的位图处理或大量图形的批量渲染，则切换到 Canvas 模式以提升性能。这种自适应渲染策略使得 Penpot 能够在保持设计精确度的同时，处理包含数百个元素的复杂设计文件。
跨平台兼容性是 Penpot 面临的另一重要挑战。由于采用 ClojureScript 编译为 JavaScript 运行，Penpot 需要确保在 Chrome、Firefox、Safari、Edge 等主流浏览器中的一致表现。团队针对不同浏览器的渲染差异进行了大量适配工作，特别是在 CSS 属性支持、字体渲染、输入事件处理等关键环节。这种浏览器端的深度优化确保了设计工具的响应速度和交互流畅性，使得用户能够在任何设备上获得稳定的设计体验。
设计代码协作的工作流价值
从团队协作的角度看，Penpot 的架构设计重新定义了设计师与开发者的协作方式。传统工作流中，设计稿以静态图片或专有格式交付，开发者需要手动测量尺寸、提取颜色、还原布局，过程中不可避免地存在信息损耗。Penpot 通过开放的 SVG 导出和标准化的数据格式，使得开发者能够直接获取设计稿的结构化信息，大幅减少了沟通往返。
这种协作模式的核心价值在于信息的双向流动。设计师可以在 Penpot 中为元素添加语义化命名和分组，开发者导出的 SVG 代码自然继承了这些结构化信息；反之，开发者也可以基于导出的 SVG 进行二次编辑，添加交互逻辑或动态样式后再导回设计稿进行确认。这种循环协作机制打破了设计与应用之间的壁垒，使得两个角色能够在同一套数据源上高效协同工作。
综合来看，Penpot 的技术架构体现了对开放标准和工程一致性的坚持。其 Clojure 双端统一的技术栈、SVG 原生格式的设计哲学、以及面向跨平台的渲染优化，共同支撑起了「设计即代码」这一核心理念的工程落地。对于追求设计开发协作效率的团队而言，深入理解 Penpot 的架构思路和技术选型，不仅能够更好地使用这一工具，也能为自身项目的技术决策提供有价值的参考。
资料来源：Penpot 官方技术文档（https://help.penpot.app/technical-guide/developer/architecture/）