构建第一个现代应用程序 - UI 设计

用 Codex 实现

这节里，推荐让 Codex 先做“产品视觉规划助手”，再做“组件实现代理”。

先让它输出：

• 风格方向
• 页面信息架构
• 核心组件清单
• 视觉风险点

可直接这样说：

请先把这个产品想法转成 UI 方案：
1. 页面信息架构
2. 视觉风格方向
3. 组件清单
4. 手机端和桌面端的差异
先给设计和实现建议，再开始写代码

配套阅读：

• 用 Codex 完成常见开发任务
• Codex 快速上手与界面指南

图示：UI 设计课建议直接结合 IDE 扩展来讲“从想法到页面结构”的过程，尤其适合边改边看效果。

这节课到底在解决什么

很多初学者一打开 IDE 就想直接写页面，结果往往会遇到 3 个问题：

• 页面信息层级混乱
• 视觉风格前后不一致
• 组件越写越多，但看不出“产品感”

这节课的重点不是“画得多漂亮”，而是学会在动手前先做一轮轻量设计，让后面的代码实现更稳。

推荐的课堂节奏

阶段	目标	产出
需求澄清	把产品目标和用户场景说清楚	1 段产品描述
信息架构	确定页面要有哪些区块	页面骨架草图
视觉方向	决定色彩、字体、风格关键词	风格词清单
组件拆解	找出按钮、卡片、导航等基础组件	组件清单
首屏实现	先完成 hero 区和主 CTA	第一版页面
细节打磨	补响应式、状态和空态	可演示页面

一页页面至少要想清楚的 5 件事

1. 用户进来第一眼看到什么
2. 用户下一步最希望点击什么
3. 页面里哪些内容是“解释”，哪些内容是“行动”
4. 手机端和桌面端的主次是否一致
5. 页面是否只靠颜色表达重点，还是也用了大小、留白和结构

适合课堂上直接做的练习

• 把一个模糊想法改写成清晰的页面目标
• 让 Codex 先给出 2 到 3 个风格方向，再选 1 个落地
• 用白板或纸笔先画出 hero、功能区、CTA 区
• 先做静态结构，再补交互和动画

建议交付物

• 1 份页面结构图
• 1 套风格关键词或视觉方向说明
• 1 份组件清单
• 1 个可运行的首屏页面

验收标准

• 页面目标是否一眼能看懂
• 信息是否有明确主次
• 组件是否风格统一
• 手机端是否可读、可点、不卡布局
• 学员能不能讲清楚自己为什么这样设计

常见卡点

• 一上来就追求“高级感”，忽视结构清晰
• 颜色、阴影、圆角全都改，导致页面没有统一规则
• 先写很多细节，再发现主流程没有跑通

建议衔接

• 下一节可以进入 参考 UI 设计规范与多产品 UI 设计
• 如果要把设计进一步转成代码，可继续看 从设计原型到项目代码