当前位置：

社区首页

电脑数码

存储设备

网络存储

NAS存储

极空间/ZSpace

文章详情

前端终于不用等设计了，Agent 自动画原型，代码直接出

你不是设计师，却被迫画原型。你不是项目经理，却在等设计稿。

等了两周的设计稿，切出来全是坑——间距不对、命名混乱、导出格式不兼容，前端永远在擦屁股。

2026 年了，Agent 都能写代码，画原型这件事也该交给 AI 了。

设计原型有三大代表性应用：Figma、Penpot、Pencil。其中 Figma 是商业闭源的，Pencil 支持 IDE/Agent ，Penpot 纯开源，支持本地化托管可完全免费使用。

所以很多时候 Penpot 被做 Figma 开源版。这款应用我其实在 24 年时候就介绍过，但是当前它面向的还是有点类似 PS 加原型设计的概念，而如今 Agent 当道，Penpot 也早已接入 Agent 工作流，提供 MCP 服务并且支持几乎所有 Agent 接入和访问。

这意味着我们不再需要手动去做原型设计，只要把权限交给 Agent，然后直接下要求就可以让它协助我们完成更多的产品原型设计，所得即前端代码，可直接交付给后端使用。

如果你是一个前端开发者，或者是全栈开发者，或者是 OPC，或者是在自己打磨产品，Penpot 加 Agent 的全自托管工作流，可能是你当前可以找到的优秀解决方案之一。

最重要的是，它自托管的完全免费的，而且拥有非常优秀庞大的插件库。可以帮你节约不少的 Figma 订阅费用。

一. Penpot MCP + Agent

进入 Penpot，它会提供包含 XD、Figma、Canva、Sketch 在内的六种主流设计工作的使用风格。我们可以自由切换和选择，这就直接把学习成本打穿到了地板。

但是，对于我这种非设计专业的，或者没有使用过任何原型设计软件的人来说，依旧存在一定的学习成本和难度。

所以 Penpot 内部提供了非常多的模板库，直接选择下面的模板样式就可以复用它们的设计。这里的模板即是新手引导性材料，又是一些设计灵感。我们还可以通过外部下载模板导入进去，整个 Penpot 的文档都是 SGV 等主流版本，不存在格式垄断，所以灵活度非常的高。

下面我来跑一下如何使用 Agent 对接 Penpot 进行原型开发。这里我直接引用了官方提供的一系列模板之一，主要内容是 Penpot 的一个使用说明，里面都是使用的英文，以及部分操作。

那么最简单的例子，就是通过 Agent 把文中的英文都改成中文，来看看能完成任务并且保留争取的内容。

第一步，我们需要先添加插件。点击当前工作页名称旁边的三个点进入设置，下面有一个插件按钮，点击后选择插件管理。

先说下 Penpot 内部的设计插件，非常多。他们的官方可以直接安装插件，只要提供名字就ok了。

但是我们这里要添加的是 Penpot 的官方 MCP 插件。截至本文成稿，Penpot 的 Image 镜像已经升级了，但是 MCP 镜像还是很老的版本，所以无法使用，需要我们自己去构建的。

我全部都整合到了项目代码里，大家直接复用就可以。

我们直接在插件的地址这里，输入下面的信息：极空间 NAS IP:4400/manifest.json。这是 MCP 服务的一个 mainfest.json地址。

很快它就会完成安装，点击打开，会在系统右侧的插件列表里展示出来。

继续点这个插件，里面有一个 Connect按钮，蒂芙尼蓝色的图标，点一下就可以和后台的 MCP 对接上了。

说一下 Penpot 的逻辑，它的 MCP 是根据工作页走的。就是如果你返回主页，或者换一个工作页，那就需要重新连接一下 MCP。

Agent 在和 MCP 交互的时候，MCP 会告诉 Agent 这是哪一个页面，里面的布局如何。

正常情况下你点击后会显示为已连接。如果连接错误的话，在连接状态上方会有具体的提示信息，可以发给 AI 让它排查一下。

MCP 的 Json 格式如下，直接复制到 Agent 下就可以。我这里以 Cherry Studio 为例，如果你用了 Claude 、WorkBuddy、Codex 等工具，那么可以直接把下面的 JSON 发给它们，让它们自行配置。

{ "mcpServers": { "penpot": { "type": "http", "url": "http://NAS ip:4401/mcp" } } }

在 CherryStudio 里，可以看到 Penpot MCP 一共提供了 4 个工具，可以根据需要配置是否启动，是否启动批准。

四个具体的 MCP Tool 功能如下。在和 Penpot 交互的时候，都是提供过 execute_code直接走命令的，和传统的 MCP 工具调用又有点区别。

简单提问一下，让 Agent 看看能否获取到 MCP 信息。让它帮我把 Penpot 页面里的英文全部改成中文字体。

DPSV 4 反正上手就是干，速度还是挺快的，干完以后顺便截了个图给我看了下最终的效果。比对原始的界面，布局、排版、格式完全没有变化，真的就是给我翻译了一下文字，准确性还是很强的。

二. 极空间部署 Penpot

下面我们来部署 Penpot 这个项目吧。

依旧是使用我们的老朋友极空间。极空间最近更新了不少的功能，比如极影视 Emby 协议，极音乐 Subsonic 协议，无限网卡支持，大文件扫描等等。包括 Docker 端也更新了启动、排序、相对路径、.env 导入这些很实用的功能。

所以如果从 NAS 选择上，我是非常推荐大家选择极空间私有云的。简约而不简单，个性化功能足，性价比也不错。

回归正题，部署 Penpot 也是使用 Docker。但是因为 MCP 服务是需要自己构建的，所以需要将官方的 MCP 包先放到极空间里。

🔻极空间闪电传，直接复制，请务必放到根目录下。

[请复制这段文字，然后打开极空间 APP或客户端] 极空间用户分享了"mcp"。↫LIYDIMZRGIYTEVSOLE2EQ#m26bnaLWSXQde4h4saHzxR6OYE1pxNMuC0gbf9OVIFzVXm2abkrrQVnu5XT2Cc7LOE℞GE2TANRYHAZTEMBTGE↫提取码:2212

接着我们打开极空间的 Docker 应用，选择创建一个 Compose，然后路径就选择刚才闪电传放了 MCP 服务的那个根目录。（注意一定不要选到 MCP 文件夹里面）

然后复制下面的 yaml代码，填入 yaml 代码区部署。

services: penpot-frontend: image: penpotapp/frontend:2.16 restart: always ports: - 29001:8080 # 左侧端口可以改为自定义 volumes: - ./assets:/opt/data/assets depends_on: - penpot-backend - penpot-exporter environment: PENPOT_PUBLIC_URI: http://local:port # 这里填写你的局域网/域名，端口是映射后的 PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 367001600 PENPOT_REGISTRATION_ENABLED: true penpot-backend: image: penpotapp/backend:2.16 restart: always volumes: - ./assets:/opt/data/assets depends_on: penpot-postgres: condition: service_healthy penpot-valkey: condition: service_healthy environment: PENPOT_FLAGS: disable-email-verification enable-smtp disable-secure-session-cookies PENPOT_PUBLIC_URI: http://local:port # 这里填写你的局域网/域名，端口是映射后的 PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 367001600 PENPOT_SECRET_KEY: # 这里填写定义字符串，和下面要一致 PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot PENPOT_DATABASE_USERNAME: penpot PENPOT_DATABASE_PASSWORD: penpot PENPOT_REDIS_URI: redis://penpot-valkey/0 PENPOT_OBJECTS_STORAGE_BACKEND: fs PENPOT_OBJECTS_STORAGE_FS_DIRECTORY: /opt/data/assets PENPOT_TELEMETRY_ENABLED: "false" PENPOT_REGISTRATION_ENABLED: true penpot-exporter: image: penpotapp/exporter:2.16 restart: always depends_on: penpot-valkey: condition: service_healthy environment: PENPOT_SECRET_KEY: # 这里填写定义字符串，和上面要一致 PENPOT_PUBLIC_URI: http://penpot-frontend:8080 PENPOT_REDIS_URI: redis://penpot-valkey/0 penpot-postgres: image: postgres:15 restart: always stop_signal: SIGINT healthcheck: test: ["CMD-SHELL", "pg_isready -U penpot"] interval: 2s timeout: 10s retries: 5 start_period: 2s volumes: - ./db:/var/lib/postgresql/data environment: POSTGRES_INITDB_ARGS: --data-checksums POSTGRES_DB: penpot POSTGRES_USER: penpot POSTGRES_PASSWORD: penpot penpot-valkey: image: valkey/valkey:8.1 restart: always healthcheck: test: ["CMD-SHELL", "valkey-cli ping | grep PONG"] interval: 1s timeout: 3s retries: 5 start_period: 3s environment: VALKEY_EXTRA_FLAGS: --maxmemory 256mb --maxmemory-policy volatile-lfu penpot-mcp: # MCP 服务 image: node:22-bookworm container_name: penpot-mcp restart: always depends_on: - penpot-frontend working_dir: /app command: > sh -lc "corepack enable && npx -y @penpot/mcp@stable" ports: - 4400:4400 - 4401:4401 - 4402:4402 environment: PENPOT_MCP_REMOTE_MODE: "true" PENPOT_MCP_SERVER_HOST: 0.0.0.0 PENPOT_MCP_SERVER_PORT: 4401 PENPOT_MCP_WEBSOCKET_PORT: 4402 PENPOT_MCP_PLUGIN_SERVER_HOST: 0.0.0.0 PENPOT_MCP_LOG_LEVEL: info pnpm_config_dangerously_allow_all_builds: "true" PNPM_CONFIG_DANGEROUSLY_ALLOW_ALL_BUILDS: "true"

具体的执行部署，可以看我的图片。这里唯一注意的就是路径。然后配置项搜索 PENPOT_SECRET_KEY修改一下，自己编辑几个字符串进去就可以，别的都不用改。