企业官网建设流程全解析

Penpot：开源设计平台，浏览器里免费协作、还能自托管

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot

Penpot 是一个开源设计协作平台：你在浏览器里画设计稿、导交付物、做原型，团队多人同时编辑同一个文件，商业工具要按席位按月收费的功能它全部免费，还允许你整套部署到自己的服务器。设计稿基于 SVG 这类开放格式存储，不会被锁进某个专有格式里。

打开浏览器就能用：零安装，一个画布实时同步

你不需要装任何客户端，注册在线版账号后就能建文件开画。界面分三块：左侧是页面和图层，中间是画布，右侧是属性面板。同事在编辑同一个文件时，改动会实时出现在你的屏幕上，和协作文档一个体验。

注册后十分钟：建文件、拉人进来

先建一个团队（Penpot 里文件都挂在团队下），新建一个文件，拉一个 375 宽的画板，画个按钮。在团队设置里用邮箱邀请成员，权限可以细分成只看或可编辑。从此不用在聊天软件里传"最终版"文件，也不存在版本覆盖。

为什么不卡：你画的本来就是 SVG

Penpot 画布用 SVG、CSS 这类开放标准描述，不是私有二进制格式。这意味着浏览器直接就能渲染，文件可以原样导出 SVG 或 PDF，换工具不丢数据。渲染核心是独立编译的 Rust 模块，官方技术文档 里有部署和架构细节。

把设计稿变成交付物：CSS 和 SVG 直接复制

Penpot 的 inspect 模式就是为开发者准备的：选中任意元素，右侧直接显示尺寸、间距、色值，CSS 片段一键复制，不用再拿截图目测。

inspect 模式下尺寸间距都能读

选中一个卡片，宽度、高度、距上边缘的距离、内边距、圆角全都列出来；颜色给 HEX 和 RGB；文本元素直接读出字体、字号、行高。这些数值和设计稿是同一份数据，不存在"导出的代码对不上图"。

代码即设计，交付不靠截图

因为每个设计元素本身就是矢量加 CSS 属性，inspect 面板里的代码是设计本身的直译。整个画板可以导出 SVG、PNG 或 PDF，也可以生成在线查看链接发给前端。设计师和开发看到的是同一份数据，而不是两张图。

让团队共用一套组件库：组件和设计令牌放一处

Penpot 的共享库让一个文件里定义的组件、颜色、样式被团队所有文件引用，全产品用同一个"主按钮"。

改一个组件，所有实例跟着变

把按钮做成组件后，改一次圆角或配色，用到它的每个页面同步更新。同一组件还能做变体覆盖不同状态，单个实例可以本地覆盖某项样式，不影响其他实例。

设计令牌：颜色和间距两边对齐

Penpot 支持原生设计令牌，把"主色""间距-8"定义成变量，组件和文本都引用它。品牌色调整时改一处全局生效，设计侧和开发侧共享同一组变量名，而不只是互相发一张色板。

做可点击的原型：写代码前先验证交互流程

静态图回答不了"流程顺不顺手"，Penpot 里可以直接连交互流程，在浏览器里点着走一遍再交付。

连页面跳转和触发条件

把两个元素拖线相连，指定触发方式（点击或悬停）和跳转目标：切页面、弹层、滚动定位都行，跳转还能带动画参数。一个页面可以同时挂多条流程，复杂分支也能画清楚。

走查演示：一个分享链接就够

连好之后切到预览模式，原型就能点了。把查看链接发给产品经理或客户，对方不用装任何东西，点着体验，还能在画布具体位置留评论，反馈直接挂在元素上，不会飘在聊天记录里。

自托管一套开源设计环境：内网几分钟跑起来

如果你的公司要求设计数据不出内网，Penpot 可以整套部署到自己的机房：仓库里提供现成的 Docker 编排文件，装好 Docker 后跑一条 compose 命令，服务就在本机 9001 端口起来，官方技术文档里有完整配置说明。

权限和数据：你自己说了算

自托管之后，数据库、对象存储、所有设计文件都在你的服务器上，账号体系、权限层级、备份策略由你定。要接内部系统，可以用 access token 调 API；要加自定义功能，插件系统 和开源的 MCP server 都留了扩展口。

今晚就能做：打开在线版建一个画板

别纠结部署，先注册 Penpot 在线版，建一个文件，画一个手机屏，放个"登录"按钮。明早把链接发给一个同事，你会直观看到实时协作和权限长什么样——这是比读任何文档都快的上手方式。

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot