Law的数字世界

第一步：安装 Codex 桌面版#

去 openai.com/codex 下载 Codex 桌面版，安装后用 ChatGPT 账号登录。

Codex 桌面版说明

Codex 桌面版比 CLI 更好上手——不需要配环境，安装即用，界面和 VS Code 类似，左侧是对话，右侧是内置浏览器。OpenAI Plus 订阅用户直接可用。

第二步：用 Codex 一句话部署 open-design#

我用的 Prompt 原文：

请帮我本地部署 Open Design，并让它在 Codex 里面运行：https://github.com/nexu-io/open-design

就这一句。Codex 会自动完成全部操作：克隆仓库 → 安装依赖 → 启动 MCP 服务 → 把 open-design 的所有 Skill 和 Design System 接口注册到自己的工具列表里。

部署完成后，你会看到如下状态——Open Design 已经跑在本地了，Codex 也已识别并接管了它的所有能力：

从这一刻起，Codex 就完全接管了 open-design 的操作权限——你不需要再打开任何界面。

第三步：写 Prompt，生成完整产品原型#

这是我实际用的 Prompt，目标是做一个 AI 社媒内容创作平台的高保真 Web 原型：

帮我用 Open Design，设计一个 AI 社媒内容创作平台的高保真 Web 原型，中文界面，风格专业、现代、适合内容团队和品牌运营使用。平台主要用于生成和管理各类社媒图片、视频、文案和素材。

平台需要包含以下核心页面：工作台首页、Skill 中心、Skill 详情页、图片创作页、视频创作页、分镜编辑页、素材中心、案例灵感库、模型中心、品牌中心、项目中心、发布日历、数据分析页。

设计重点：首页要展示最近项目、热门 Skill、快速创作入口、生成任务状态、素材推荐和创作额度。Skill 中心要像应用市场一样，展示小红书封面、抖音脚本、TikTok 视频、商品主图、海报生成、视频分镜、数字人口播、字幕生成、长视频切短视频等热门 Skill。图片创作页要支持选择模型、平台尺寸、风格、比例、参考图、品牌色、负面提示词和生成数量。视频创作页要支持脚本生成视频、图生视频、文生视频、分镜生成视频，并可以选择不同视频模型。分镜编辑页要展示多个镜头卡片，每个镜头包含画面描述、台词、时长、镜头运动、参考图、使用模型和单镜头重生成按钮。素材中心要支持上传图片、视频、音频、Logo、商品图、人物图，并支持标签、文件夹、搜索、授权状态和一键加入项目。案例库要展示图片和视频样例，每个样例显示使用的 Skill、模型、提示词、平台尺寸，并支持一键复刻。模型中心要展示图片模型、视频模型、文案模型、配音模型、数字人模型，并标注速度、成本、质量、适用场景和商用授权。品牌中心要管理 Logo、品牌色、字体、品牌口吻、视觉风格、禁用词、品牌模板。发布日历要支持多平台内容排期、定时发布和发布状态。数据分析页要展示内容表现、平台数据、热门内容类型、模型效果和创作建议。整体 UI 要有 SaaS 平台质感，左侧导航，顶部搜索和创建按钮，中间为主要工作区。界面不要做成营销官网，要直接进入可使用的产品后台。视觉风格简洁、专业、有科技感，但不要过度花哨。

Prompt 发出去之后，Codex 接管 open-design，开始自动处理：

提交后，Codex 通过 MCP 接口自动调用 open-design：选 Skill → 选 Design System → 逐页生成 HTML → 整合成完整多页原型。整个过程你只需要等，不需要做任何操作，大概 10-15 分钟，13 个页面全部完成。

第四步：查看成果#

生成完成后，在浏览器打开生成的 HTML 文件预览。出来的是一个有左侧导航、顶部搜索、13 个完整页面的 SaaS 产品后台原型，每一页都有真实布局和内容。

工作台首页：快速创作入口、生成任务状态、最近项目、素材推荐全部到位：

Skill 中心：像应用市场一样展示热门设计能力，小红书封面、抖音脚本、数字人口播……一应俱全：

图片创作页：选模型、平台尺寸、风格、品牌色，一键生成：

视频创作页：脚本生成视频、图生视频、文生视频、分镜生成视频，视频模型自由选：

分镜编辑页：每个镜头独立展示画面描述、台词、时长、镜头运动，支持单镜头重生成：

Prompt 写作要点：

1. 先说清楚产品定位——“AI 社媒内容创作平台”，不是”做个网站”
2. 列出所有页面——13 个页面一个不漏
3. 每个页面描述功能点——“首页要展示最近项目、热门 Skill……”
4. 说清楚整体风格和布局——“SaaS 平台质感""左侧导航，顶部搜索”

TIP

不满意？在 Codex 里追问：“把首页改成深色模式""Skill 中心卡片改成 3 列”。Codex 会再次通过 MCP 调用 open-design，自动重新生成对应页面，改到满意为止。