Codex Kernelia 界面设计｜按桌面和手机重排内容层级
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/modern-ui-design/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/modern-ui-design/`，把核对后的文件保存为 `.agents/skills/modern-ui-design/SKILL.md`。
- 在该项目根目录启动 Codex，输入 `$modern-ui-design` 并选择同名技能。
中文摘要
先确定界面视觉方向，再按台式机和手机各自的阅读顺序调整布局、导航与状态反馈。
SKILL.md 中文导读
可复现示例
为下列数据面板写桌面和手机的布局提案。
{"viewportDesktop":1440,"viewportMobile":390,"first":"summary","secondary":"history","emptyState":true}工作步骤
- 确定视觉方向和两个或三个设计原则。
- 用尺寸、字重和留白明确哪些模块优先。
- 分别设计桌面和手机构图，并检查加载、空内容和错误状态。
验收方法
提案写明 `desktopColumns=2` 和 `mobileColumns=1`，移动端顺序为 `summary, history`。为空历史单独设计提示。
GitHub 原文 · 更新日期
适用环境
用 Codex 打开 Kernelia，准备目标内容顺序、现有界面组件和需支持的屏幕尺寸。
常见问题
手机布局可以直接缩小桌面版吗？
根据手机的阅读和导航优先级重新安排模块。保留已经确定的视觉方向。