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

什么是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校验

随后注册一个账户就可以登陆了