Penpot

设计稿交给开发者后，经常还要解释按钮之间的距离、卡片怎样换行，以及点击后跳到哪个页面。 这些问题涉及布局规则和交互关系，只看一张静态图片很难说完整。 Penpot 可以绘制界面、连接交互原型，也允许开发者查看尺寸、样式和代码片段，适合围绕同一份设计文件讨论这些细节。

在浏览器里绘制和共同修改界面

Penpot 官方项目提供在线服务和自托管两种使用方向，支持实时协作，并采用 SVG、CSS、HTML 等开放标准。 设计时可以组织图层、制作组件，使用组件变体和设计令牌管理重复出现的界面样式。 设计令牌可以理解为给颜色、间距等设计值统一命名，让团队围绕一致的定义维护界面。

对个人开发者而言，可以从网站首页或产品设置页开始画。 对已有设计分工的团队而言，重复使用的按钮、输入框和卡片更值得整理成组件，避免同一类元素在多个页面中各改一遍。 组件怎样命名、哪些样式需要共用，仍需要团队按项目建立约定。

图片来自 Penpot 官方文档，展示图层面板、字体样例与右侧设计属性。

布局规则可以在设计阶段说明白

Penpot 的 Flex Layout 与 Grid Layout分别对应 CSS Flexbox 和 CSS Grid 的布局思路。 Flex 适合组织一行按钮、列表等内容，可以设置排列方向、间距、内边距和尺寸适配方式。 Grid 用行和列组织二维布局，适合卡片区域等需要同时考虑两个方向的页面结构。

以产品卡片为例，可以给图片、标题和按钮设置间距，并决定容器如何适应内容。 修改标题长度或画板宽度时，观察排列是否符合预期，就能把“内容变多怎么办”这个问题提前放进讨论。 这种做法比只给出固定坐标更容易说明设计意图，开发者也能对应到熟悉的布局属性。

用原型连接页面之间的动作

原型文档介绍了把画板连接起来的方法。 在 Prototype 面板中，可以选择触发交互的图层，连接目标画板，设置跳转或弹层等动作，并通过 View mode 预览。 完成的流程可以通过链接分享。

例如，做一个活动报名页面，可以建立介绍页、填写页和提交结果页，把报名按钮与目标页面相连。 讨论时沿着用户实际点击的路径检查，容易发现返回入口缺失、提示信息不足等问题。 这里模拟的是页面行为，真正的网站仍需要开发者完成业务逻辑、数据保存和接口连接。

开发者可以直接查看尺寸和样式

Penpot 的 Inspect 模式提供只读检查界面，可以查看对象属性、距离与尺寸，也能导出素材。 选择对象后，代码页签可以显示 SVG、HTML 和 CSS 片段。

这对核对边距、字体和颜色尤其直接。 开发者有明确数值可查，设计师也能指向具体对象讨论，减少在截图上反复画箭头的沟通。 把这些片段用于实际项目时，还需要按照项目的组件结构、样式约定和响应式规则进行组织。

自托管需要维护服务器和设计数据

希望省去部署工作，可以从官方在线服务进入。 希望自己管理设计资料，可以阅读自托管指南，使用 Docker 和 Docker Compose 运行实例。 官方提供了 Compose 配置文件，并说明了服务启动、环境变量和数据备份方式。

正式给团队使用时，需要处理访问地址、邮件配置、注册策略和备份。 文档特别提醒，对外开放实例应启用邮件验证或关闭开放注册；持久数据包括数据库与上传素材，备份方案应覆盖两者。 维护容器、升级版本和恢复数据，都需要有人负责。

Penpot 采用 MPL 2.0 开源许可，自托管的服务器、存储和维护成本由使用者承担。 官方另有付费 Enterprise 方案，涉及集中管理、权限和 SSO 等企业功能，并面向云端及自托管场景。 团队选型时，应把绘图需要和组织管理需要分别列出，按对应方案核对条件。

可以选一个真实页面，把布局、一次页面跳转和开发者需要查看的样式完整做出来。 让设计师和开发者共同检查这份文件，确认双方都能找到所需信息，再决定是否扩展到整个项目。

• 访问 Penpot 官网
• 进入 Penpot 在线服务
• 查看 Penpot 源码和企业方案说明
• 阅读自托管文档