用 Codex 2分钟输出高保真原型图

​

​

生成的效果图：​

​

​

如何使用 codex 生成 UI 原型图​

只要在 codex Agent 中使用合适的 Prompt，就可以快速生成 UI 原型图。​

下面是我使用的 UI 原型图 Prompt，它是一个结构化的 Prompt 模版，你可以根据自己的需求进行调整：​

​

代码块​

Python

你是一位资深 UI 设计师，根据以下需求创建 UI 原型图：​

​

## 产品需求- 应用类型：高端健康管理移动应用​

- 核心模块：​

* 数据仪表盘 (实时健康指标)​

* 运动计划系统 (训练课程+进度追踪)​

* 睡眠质量分析 (多维数据可视化)​

* 营养管理 (智能食物数据库)​

​

## UI 设计- 单个页面尺寸为 375x812PX，带有描边，模拟手机边框​

- 高保真，贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。​

- 视觉层次​

* 使用玻璃拟态​

* 多层阴影系统​

- 交互细节​

* 悬停时组件的微缩放​

* 聚焦状态的光晕扩散（box-shadow过渡）​

​

## 技术规范- 使用 HTML + Tailwind CSS（CDN方式）生成所有原型界面​

- 使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。​

- 图标: 引用在线矢量图标库内的图标（任何图标都不要带有背景色块、底板、外框）​

- 图片: 使用开源图片网站链接的形式引入​

​

## 输出规范- 每个界面应作为独立的 HTML 文件存放​

- show.html 作为 UI 原型展示界面，使用 iframe 的方式嵌入所有界面的 HTML 片段​

* 所有页面直接平铺展示在 show.html 页面中​

* show.html 不需要副标题和需求介绍​

​

​

​

写出一个好的 Prompt，其实就一个简单原则： 正确的描述你的需求。​

结构化 Prompt​

通过 Prompt 的层级结构，可以让 AI 更容易理解你的需求，生成出真正符合需求的、可实现的 UI 原型。​

不仅可以应用在原型图场景，在其他场景也是通用的。​

​

🤔

分析上面的Prompt，这种层级结构遵循了从抽象到具体的思维过程：​

•

先确定做什么（产品需求）​

•

再确定长什么样（UI设计）​

•

然后确定怎么做（技术规范）​

•

最后确定如何交付（输出规范）​

​

​

​

这样的流程既符合逻辑思维，也对应了设计开发的实际工作流程。​

最重要的是，这种结构让AI能够理解全局，生成出真正符合需求的、可实现的UI原型。​

不是随便画几个好看的界面就完事，而是有目的、有约束、有标准的创作。​

​

📌

像是在 UI设计 部分，你可以继续进行结构化拆分，比如：​

•

视觉层次​

•

使用玻璃拟态​

•

多层阴影系统​

​

​