本地开发penpot源码支持AI原型设计(一)

源码开发Penpot，Penpot是一款开源在线设计协作工具，支持创建设计、交互原型和设计系统，优势在于提供私有化部署能力。安装方式包括Docker一键部署（访问localhost:9001）和源码安装：克隆仓库后通过manage.sh脚本启动开发环境（主应用端口3449）。源码安装需注意默认开启邮件验证，需修改backend脚本禁用该功能方可直接注册。两种方式均可快速搭建类似Figma的设计平台

余生大大

469人浏览 · 2025-08-08 18:21:19

余生大大 · 2025-08-08 18:21:19 发布

什么是penpot

Penpot是第一个用于设计和代码协作的开源设计工具。设计师可以创建令人惊叹的设计、交互式原型、大规模的设计系统，而开发人员则喜欢现成的代码，使他们的工作流程变得简单快捷。所有这一切都没有交接戏。

如上是官方给的解释，Penpot其实就是一个开源的在线设计系统，跟figma还有Axure等等类似，只不过Penpot开源了，对有需要私有化部署在线协作设计系统的用户非常友好。

Git地址：https://github.com/penpot/penpot.git

Docker启动

如果不需要二次开发代码可以直接使用docker启动应用
进入到下载代码的docker目录下

penpot/docker/images/docker-compose.yaml

在这里插入图片描述
执行docker compost命令安装

docker compose -p penpot -f docker-compose.yaml up -d

安装完成后访问如下地址打开penpot

访问地址：http://localhost:9001/

源码安装

下载git仓库

首先先下载penpot的源码
克隆命令：

git clone https://github.com/penpot/penpot.git

校验docker环境

确保本地存在docker环境

docker --version && docker compose version

启动Penpot开发环境

执行命令

./manage.sh pull-devenv

等待依赖包下载完成
请添加图片描述

启动开发环境

 ./manage.sh run-devenv

请添加图片描述

启动完成后可以通过以下地址访问Penpot：

主应用: http://localhost:3449
Storybook: http://localhost:6006
MinIO控制台: http://localhost:9001
邮件测试: http://localhost:1080

在这里插入图片描述
启动以后访问：http://localhost:3449/ 打开penpot页面

这时候需要创建一个账号登陆，但是这时候需要注意，默认是开启了邮件发送校验，必须要通过邮件点击才能注册成功，但是有的是不想要这个功能的，所以这时候需要关闭注册邮件校验的功能。

修改启动脚本：backend/scripts/start-dev/start-dev

export PENPOT_FLAGS="\
       $PENPOT_FLAGS \
       enable-prepl-server \
       enable-urepl-server \
       enable-nrepl-server \
       enable-webhooks \
       enable-backend-asserts \
       enable-audit-log \
       enable-login-with-ldap \
       enable-transit-readable-response \
       enable-demo-users \
       disable-feature-fdata-pointer-map \
       enable-feature-fdata-objects-map \
       disable-secure-session-cookies \
       enable-rpc-climit \
       enable-smtp \
       enable-quotes \
       enable-file-snapshot \
       enable-access-tokens \
       disable-tiered-file-data-storage \
       enable-file-validation \
       enable-file-schema-validation \
       enable-subscriptions \
       disable-subscriptions-old \
       disable-email-verification";

主要是最下面的关闭email校验
在这里插入图片描述
随后注册一个账户就可以登陆了