乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > Codex + Penpot:用 AI 直接在设计工具里生成界面

Codex + Penpot:用 AI 直接在设计工具里生成界面

当前时间： 2026-08-16 16:49:10 分类：办公文件 评论(0)
Codex + Penpot:用 AI 直接在设计工具里生成界面

1. 背景

在传统流程里，产品界面通常需要经历需求描述、线框图、视觉设计、开发还原等多个环节。
如果只是快速验证一个 App 页面、后台界面或组件想法，反复在设计工具和代码工具之间切换会比较低效。

Codex + Penpot 的组合，可以让我们把自然语言需求直接交给 Codex，由 Codex 通过 Penpot MCP 在设计文件中创建画板、图层、文本、按钮、卡片和页面结构。

简单来说：

2. 适合什么场景

Codex + Penpot 比较适合以下场景：

  • 快速生成 App 登录页、首页、列表页、详情页
  • 根据产品描述生成低保真或中保真原型
  • 快速搭建后台管理界面结构
  • 批量生成多个页面方案
  • 把文字需求转成可编辑的设计画板
  • 做产品方案初稿、演示稿、需求评审稿

不太适合直接替代最终视觉设计。
它更适合做“第一版可讨论的设计稿”，后续仍然可以由设计师继续精修。

3. 整体工作原理

这套流程的核心是 MCP，也就是 Model Context Protocol。

在这里：

  • Codex 是 AI 编程和操作代理
  • Penpot 是设计工具
  • Penpot MCP Server 是两者之间的连接桥梁
  • Penpot token 用来认证当前用户身份
  • 当前打开并连接 MCP 的 Penpot 文件，就是 Codex 实际操作的目标文件

工作链路大致如下：

4. 准备条件

在开始之前，需要准备：

  • 已安装 Codex
  • 已有 Penpot 账号
  • 能打开 Penpot 设计文件
  • Penpot 中已启用 MCP Server / MCP Plugin
  • 已获取 Penpot MCP key
  • Codex 配置文件可编辑

在 Windows 上，Codex 的全局配置通常位于：

C:\Users\<你的用户名>\.codex\config.toml

5. 获取 Penpot MCP Token

在 Penpot 中进入：

生成 MCP key。

生成后，你会得到类似这样的 MCP 地址：

{  "mcpServers": {    "penpot": {      "url": "https://design.penpot.app/mcp/stream?userToken=你的token"    }  }}

这里的 userToken 是用户级 MCP key，不是某个项目专属 token。

也就是说，它用于证明“你是谁”，而不是固定绑定某一个项目。

实际操作哪个设计文件，取决于你当前在 Penpot 中打开并连接 MCP 的文件。

6. 在 Codex 中配置 Penpot MCP

打开 Codex 配置文件：

C:\Users\<你的用户名>\.codex\config.toml

添加或修改如下配置：

[mcp_servers.penpot]url = "https://design.penpot.app/mcp/stream?userToken=你的token"

注意不要把 token 写成示例里的中文，需要完整粘贴 Penpot 生成的真实 URL。

配置完成后，重启 Codex 或重新打开一个 Codex 会话。

用MCP命令在窗口测试是否添加成功

7. 连接 Penpot 文件

配置 Codex 只是第一步。

真正决定 Codex 画在哪个文件里的，是 Penpot 当前连接的文件。

操作流程：

  1. 打开 Penpot。

  2. 进入你想让 Codex 操作的设计文件。

  3. 在该文件中打开 MCP Server / MCP Plugin。

  4. 点击 Connect。

  5. 回到 Codex，让 Codex 读取当前文件或执行设计任务。

  6. 建议一次只让一个 Penpot 文件连接 MCP。

如果浏览器里开了多个 Penpot 标签页，最好只在目标文件里连接 MCP，避免目标不明确。

8. 当前文件和页面的关系

很多人会误以为 Codex 会自动识别浏览器当前激活的标签页。

实际上，更准确的理解是：

Codex 操作的是当前 MCP 连接绑定的 Penpot 文件

所以：

  • 你打开 A 文件并连接 MCP，Codex 就会画在 A 文件里。

  • 你想切换到 B 文件，需要在 B 文件里重新连接 MCP。

  • 多个文件同时连接 MCP 时，可能出现目标不明确的问题。

  • 因此，正式操作前可以先让 Codex 查询当前文件：

请检查当前 Penpot MCP 连接的是哪个文件和页面，如果连接正常，Codex 应该能返回当前文件名、页面名或当前选中内容。

9. 第一次验证连接

配置完成后，可以先发一个简单请求：

请读取当前 Penpot 文件名和页面名

或者：

请在当前 Penpot 页面创建一个 390x844 的手机画板，标题为测试页面

如果成功，说明 Codex 已经可以操作 Penpot。

如果超时或没有响应，通常说明：

  • Penpot 文件没有连接 MCP

  • Codex 没有重启，配置还没加载

  • token 失效

  • 浏览器中的 MCP 连接断开

  • 多个 Penpot 页面连接导致状态混乱

10. 示例章节：生成 App 登录页和首页

首先给一段设计需求

请用penpot给我设计： 

一个 app的登录界面和主页，登录：用户名和密码，还可以微信，短信，QQ登录；主页底部包括资讯和我的，资讯包括：新闻的展示list，上面带有banner动画，下面是新闻列表。就按照此要求给我哦设计界面

抽根烟等待。。。。。。处理完成

看成品效果：

ok，就是这么丝滑。。。。。。重要的是他免费，比起figma更适合个人开发者。。。。

11. 总结

Codex + Penpot 的价值不在于一次性生成最终设计稿，而在于快速把想法变成可编辑的视觉结构。

它适合产品早期构思、需求评审、原型验证和页面方案探索。

通过 MCP，Codex 不只是“给建议”，而是可以真正进入 Penpot 文件，创建画板、排版、图层和文本。

对于需要频繁做界面草稿、产品原型和设计验证的人来说，这套流程可以明显减少从文字需求到可视化页面之间的时间成本。

▼关注我获取更多基础编程知识 ▼
一个热爱编程、分享的 Bug 战士

👆🏻👆🏻👆🏻扫码关注👆🏻👆🏻👆🏻

▼点个「」赞，是我持续更新的动力 ▼