面向 Codex/ChatGPT 的 Open Design 插件

将下方指令输入你的 ChatGPT 桌面应用中的任意任务

Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.

安装一次,随时从 Codex/ChatGPT 开始创作。

先了解完整的 Codex 与 Open Design 工作区,再跟随从安装到成品的真实流程。

真实 Codex 任务界面:使用 Open Design 插件创作,并同时展示完成后的 Goodfield 咖啡馆网站
真实 Codex 任务 提示词、Open Design 交接过程、生成的文件和最终网站,全都呈现在同一个工作区。
  1. 01 安装

    让 Codex 帮你完成安装

    将这条指令粘贴到 Codex 任务中。Codex 会读取仓库里的安装流程,完成插件与本地 MCP 配置,无需依赖公开的插件市场页面。

    Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.
  2. 02 使用

    新建一个 Codex 任务

    Codex 完成安装后,在新任务中打开已安装的 Open Design 插件,然后选择“Try now”开始使用。

    Codex 中真实的 Open Design 插件详情页,带有 Try now 按钮
  3. 03 创作

    写下设计需求

    提及 Open Design,然后描述你要创作的内容、所需信息、视觉方向和响应式要求。

    真实 Codex 提示词,请 Open Design 创建一个温暖的社区咖啡馆网站
  4. 04 创作

    实时跟进任务交接

    Codex 会确认设计方向、创建项目并将工作交给 Open Design,生成的文件会实时出现。

    社区咖啡馆网站生成过程中真实的 Codex 与 Open Design 工作区
  5. 05 创作

    查看创作结果

    同一个任务会返回响应式 Goodfield 咖啡馆落地页,以及生成的图片和可编辑文件。

    通过 Codex 中的 Open Design 插件生成的 Goodfield 社区咖啡馆落地页成品

直接从这条提示词开始。

在 Codex 的插件菜单中选择 Open Design,描述你要创作的内容,并在同一个任务中持续完善。Codex 会将插件提及显示为 Open Design 标签。

Oryzo 产品落地页,画面包含富有触感的切割垫和软木物件

产品发布

@open-design Create a tactile product launch page for Oryzo, a sustainable rice-husk material. Use a cutting-mat grid, cork-toned product photography, oversized typography, technical labels, and a warm editorial layout.
Open Design Osaka 活动落地页,使用地图与排版结合的视觉设计

活动页面

@open-design Create an event landing page for Open Design Osaka. Lead with a typographic map of Japan, restrained ivory and olive colors, the date and location, speaker details, and a clear registration action.
Fable 5 深色编辑风产品网站

编辑风网站

@open-design Create a dark editorial website for Fable 5. Use a near-black canvas, small navigation, a bold serif headline, restrained white typography, and subtle interactive controls.
明亮画布上的 Open Design 模型时间线交互界面

互动叙事

@open-design Create an interactive release story for Open Design 0.9.0. Visualize a model timeline on a bright canvas with floating cards, connecting lines, color-coded labels, and responsive horizontal exploration.

安装前常见问题

Codex 始终掌控任务,Open Design 负责视觉创作流程。

  1. 这个插件为 Codex 增加了哪些能力?

    它为 Codex 带来一套用于创建网站、幻灯片、原型和设计系统的 Open Design 工作流。插件通过本地 Open Design MCP 完成需求收集、项目创建和作品生成。

  2. 支持哪些 Codex 产品?

    当前版本支持 Codex Desktop 和 Codex CLI,Codex 是首个获得支持的宿主。

  3. 安装前需要准备什么?

    请使用 Codex CLI 0.144.6 或更高版本,以及 Open Design 0.17.0 或更高版本。注册本地 MCP 前,请先安装 Open Design。

  4. 为什么需要新建一个 Codex 任务?

    Codex 会在任务启动时加载插件和 MCP 能力。新建任务后,刚刚安装的 Open Design Cloud 插件就会生效。

  5. 需要一直打开 Open Design 窗口吗?

    不需要。注册好的本地 MCP 会在需要时,以无界面模式启动已签名的 Open Design 运行时。

在下一个 Codex/ChatGPT 任务中使用 Open Design。

安装插件、连接本地 MCP,然后调用 @open-design即可开始创作。

Open Design 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS、Windows 与 Linux