参考 UI 设计规范与多产品 UI 设计
用 Codex 实现
如果你用 Codex 学这节，建议让它承担“多产品设计规范整理者”的角色。
你可以要求它先对比不同产品线的：
- 目标用户
- 布局结构
- 组件复用
- 视觉差异
- 设计系统规则
可直接这样说：
text
请对比这几个产品或页面的 UI 规范：
1. 共同的组件和布局模式
2. 必须区分开的视觉语言
3. 适合抽成设计系统的部分
4. 最终给我一个统一又可区分的方案配套阅读：
图示：多产品 UI 和设计系统教学很适合配合 Skills 截图，帮助理解“把规范沉淀成可反复调用的能力”。
这节课适合在什么时候讲
当你已经做出了 1 个页面，下一步就会遇到一个问题：
- 如果要扩成多个页面怎么办
- 如果要做两个不同产品线怎么办
- 如果既想统一品牌感，又想区分不同场景怎么办
这节课讲的就是“统一”和“差异化”如何同时成立。
多产品 UI 的核心思路
统一的部分
- 字体、间距、圆角、阴影等基础规则
- 按钮、输入框、导航、卡片等基础组件
- 响应式规则和交互反馈方式
需要区分的部分
- 目标人群与语言风格
- 主色与辅助视觉元素
- 首页结构与重点行动按钮
- 内容模块的顺序和密度
一个好用的对比框架
| 维度 | 应该统一什么 | 应该区分什么 |
|---|---|---|
| 品牌感 | Logo、基础色板、基础组件 | 子品牌主视觉、主题图形 |
| 页面结构 | 导航逻辑、卡片规则、表单规范 | 首页 hero、内容密度、重点 CTA |
| 交互方式 | 悬浮、点击、错误提示、空状态 | 面向不同角色的任务流 |
| 内容风格 | 标题层级、说明区块结构 | 面向学生、家长、成人、机构的语言 |
推荐课堂练习
选择 2 个产品或页面，例如：
- 青少年课程页 vs 成人课程页
- 招生页 vs 机构合作页
- 用户端首页 vs 管理后台首页
然后让 Codex 输出：
- 哪些组件可以共用
- 哪些视觉元素必须区分
- 哪些规则值得沉淀成 design tokens
- 最后做成一套“统一而有差异”的方案
推荐交付物
- 1 份多产品 UI 对比表
- 1 套共用组件清单
- 1 套差异化规则说明
- 1 份设计系统最小规范
常见卡点
- 为了统一，结果所有页面都长得一样
- 为了差异化，结果每个页面像不同品牌做的
- 没有沉淀变量和组件，后续越改越乱
学完以后你应该会什么
- 能判断哪些部分值得做成设计系统
- 能为不同人群设计不同的页面表达
- 能让
Codex不只生成单页，而是帮助你维护多个页面的一致性