Penpot 自托管指南开源设计平台如何打通设计到开发的全流程【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpotPenpot 是一款开源的在线设计平台设计界面、原型和交付代码全部跑在浏览器里可以免费用官方云服务也可以用 Docker 部署到自家服务器。这篇文章帮你搞清楚三件事它和闭源设计工具最本质的差别在哪、打开后的第一屏长什么样以及今天就能走通的一条路径——建第一个文件、做完第一个原型、交付给开发最后给团队搭一个自托管的 Penpot。换个角度看设计稿代码是现成的很多团队被闭源工具卡住的地方是交付环节设计稿是专有格式开发只能导出图片然后拿标尺量间距、肉眼估字号写完代码再回头对一遍。工具越封闭这一步的信息损耗越大。Penpot 的底层逻辑不同它的设计文件本身就是基于 SVG 等开放标准的数据渲染出来的对象和真实网页元素一一对应。你选中任意一个文本或按钮右侧 Inspect 面板直接给出对应元素的 CSS 和 HTML 片段复制即用量出来的宽高、颜色、字体值就是最终代码里的值。图里是一个商品卡片的文字元素左边是画布右边 Info 页签显示测量数据Code 页签里直接是可用的 CSS 与 SVG/HTML 片段字号、行高、字重全部是真实值不存在设计稿 36px、开发写成 14px的错位。第一次打开 Penpot工作区只有三块区域注册后进入任意文件界面固定分三块和主流设计软件的学习成本基本持平左侧是页面与图层面板中间是画布顶部切换 Design / Prototype / Inspect 三种模式右侧属性面板随所选对象显示尺寸、约束、填充、描边等选项。图中编号区域从上到下就是最常用的操作路径创建画板、在左侧选层、在右侧改属性。左侧还可以直接上传 TTF、OTF、WOFF 字体挂到团队名下见下方部署一节的字体面板整个团队文本样式从此统一。做出第一个原型然后丢链接出去画完静态稿切到顶部的 Prototype 模式按住画板边缘的圆点拖到另一个画板就完成了一次跳转连线右侧面板能看到当前文件的所有 Flow 起点点右上角播放按钮即可按真实路径走一遍流程。图里是一个音乐 App 的多画板流程登录、首页、播放、账号设置之间用连线标出跳转关系右侧列出了 Logged user、Not logged user、Onboarding 三个入口点。做完原型后点右上角 Share link任何人打开链接即可在网页里体验整个流程不用装任何客户端。团队层面成员管理在 Team 的 Members 页签完成Owner / Admin / Editor 等角色逐人下拉切换权限最小化到这个人能不能改、能不能删。颜色这类最容易各写各的值统一收敛在团队的 Shared Libraries 里把一组色板、字体、组件做成共享库后库内改一次所有引用它的文件全部同步这就是 Penpot 设计系统的基础设施官方说明见 共享库文档。一条命令在本地部署自托管版对数据不能出内网的团队Penpot 支持完整自托管后端是 Clojure 服务 Postgres 对象存储前端就是浏览器没有客户端可装。官方给出的是 Docker Compose 一键编排compose 文件直接放在本仓库的 docker/images/ 目录下。启动只需要两条命令先拿到 compose 文件再启动docker compose -p penpot -f docker-compose.yaml up -d启动完成后浏览器打开 http://localhost:9001 注册第一个账号即完成部署。版本方面可以显式指定避免latest 漂移PENPOT_VERSION2.17.1 docker compose -p penpot -f docker-compose.yaml up -d目前仓库中最新的版本记录为 2.18.0开发中稳定版以 CHANGES.md 为准。上线前还有两件事值得做对外域名挂 HTTPSHTTP 下浏览器剪贴板等 API 受限定期备份 Postgres 与素材两个 Docker 卷。代理配置Nginx / Caddy / Traefik 示例都写在了 Docker 部署文档 里照抄即可。部署完成后团队字体在 Team 的 Fonts 页签上传一次全团队的文件共用下一步想动手可以直接打开官方网页版注册一个账号走一遍上面工作区 → 原型 → 分享的路径想深挖代码结构技术指南 里有前后端架构拆解和插件开发说明社区里也可以直接提问。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Penpot 自托管指南：开源设计平台如何打通设计到开发的全流程
Penpot 自托管指南开源设计平台如何打通设计到开发的全流程【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpotPenpot 是一款开源的在线设计平台设计界面、原型和交付代码全部跑在浏览器里可以免费用官方云服务也可以用 Docker 部署到自家服务器。这篇文章帮你搞清楚三件事它和闭源设计工具最本质的差别在哪、打开后的第一屏长什么样以及今天就能走通的一条路径——建第一个文件、做完第一个原型、交付给开发最后给团队搭一个自托管的 Penpot。换个角度看设计稿代码是现成的很多团队被闭源工具卡住的地方是交付环节设计稿是专有格式开发只能导出图片然后拿标尺量间距、肉眼估字号写完代码再回头对一遍。工具越封闭这一步的信息损耗越大。Penpot 的底层逻辑不同它的设计文件本身就是基于 SVG 等开放标准的数据渲染出来的对象和真实网页元素一一对应。你选中任意一个文本或按钮右侧 Inspect 面板直接给出对应元素的 CSS 和 HTML 片段复制即用量出来的宽高、颜色、字体值就是最终代码里的值。图里是一个商品卡片的文字元素左边是画布右边 Info 页签显示测量数据Code 页签里直接是可用的 CSS 与 SVG/HTML 片段字号、行高、字重全部是真实值不存在设计稿 36px、开发写成 14px的错位。第一次打开 Penpot工作区只有三块区域注册后进入任意文件界面固定分三块和主流设计软件的学习成本基本持平左侧是页面与图层面板中间是画布顶部切换 Design / Prototype / Inspect 三种模式右侧属性面板随所选对象显示尺寸、约束、填充、描边等选项。图中编号区域从上到下就是最常用的操作路径创建画板、在左侧选层、在右侧改属性。左侧还可以直接上传 TTF、OTF、WOFF 字体挂到团队名下见下方部署一节的字体面板整个团队文本样式从此统一。做出第一个原型然后丢链接出去画完静态稿切到顶部的 Prototype 模式按住画板边缘的圆点拖到另一个画板就完成了一次跳转连线右侧面板能看到当前文件的所有 Flow 起点点右上角播放按钮即可按真实路径走一遍流程。图里是一个音乐 App 的多画板流程登录、首页、播放、账号设置之间用连线标出跳转关系右侧列出了 Logged user、Not logged user、Onboarding 三个入口点。做完原型后点右上角 Share link任何人打开链接即可在网页里体验整个流程不用装任何客户端。团队层面成员管理在 Team 的 Members 页签完成Owner / Admin / Editor 等角色逐人下拉切换权限最小化到这个人能不能改、能不能删。颜色这类最容易各写各的值统一收敛在团队的 Shared Libraries 里把一组色板、字体、组件做成共享库后库内改一次所有引用它的文件全部同步这就是 Penpot 设计系统的基础设施官方说明见 共享库文档。一条命令在本地部署自托管版对数据不能出内网的团队Penpot 支持完整自托管后端是 Clojure 服务 Postgres 对象存储前端就是浏览器没有客户端可装。官方给出的是 Docker Compose 一键编排compose 文件直接放在本仓库的 docker/images/ 目录下。启动只需要两条命令先拿到 compose 文件再启动docker compose -p penpot -f docker-compose.yaml up -d启动完成后浏览器打开 http://localhost:9001 注册第一个账号即完成部署。版本方面可以显式指定避免latest 漂移PENPOT_VERSION2.17.1 docker compose -p penpot -f docker-compose.yaml up -d目前仓库中最新的版本记录为 2.18.0开发中稳定版以 CHANGES.md 为准。上线前还有两件事值得做对外域名挂 HTTPSHTTP 下浏览器剪贴板等 API 受限定期备份 Postgres 与素材两个 Docker 卷。代理配置Nginx / Caddy / Traefik 示例都写在了 Docker 部署文档 里照抄即可。部署完成后团队字体在 Team 的 Fonts 页签上传一次全团队的文件共用下一步想动手可以直接打开官方网页版注册一个账号走一遍上面工作区 → 原型 → 分享的路径想深挖代码结构技术指南 里有前后端架构拆解和插件开发说明社区里也可以直接提问。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考