ui-clarity

name	ui-clarity
description	ohmyflight 页面 UI 清晰度工作原则。用于新增或修改前端页面、表格、卡片、筛选区、结果区、统计摘要、暗色/亮色样式或用户指出页面混乱难看时。

UI Clarity

本 skill 用于保证页面让人看得清楚，而不是只把控件堆出来。

先参考

• 先看仓库里同类成熟页面，不要凭空自造样式。
• 普通工具优先用 Bootstrap 的 card、row、form-control、form-select、btn、table。
• 大型工作台可参考培训皇帝的分区、表格壳、滚动区域、标题层级和对齐方式。
• 如果 owner 指出某个页面做得好，以该页面为视觉参考。

清晰原则

• 页面先分区，再放内容；上传区、操作区、摘要区、结果区、异常区要一眼分开。
• 同一类信息必须对齐：标题对标题、数字对数字、表头对内容。
• 表格必须有清楚的表头、行分隔、列宽和滚动边界；不要让内容糊在一起。
• 数字列通常右对齐，文字列左对齐，说明列给足宽度。
• 间距要稳定，避免忽大忽小；卡片之间要有呼吸感。
• 颜色只用于状态、提示和必要强调；不要用大块怪色或无意义装饰。
• 黑底白字、白底黑字必须跟随主题变量，不能出现亮色页面里局部黑块。
• 不要为了“设计感”牺牲可读性。

动手前

• 先确认页面主要用户要看什么、先看什么、对比什么。
• 先确认数据是否适合表格、摘要、图表或筛选器。
• 不明确的视觉目标向 owner 确认；已明确参考页面时，按参考页面执行。

验证

• 构建和测试只能证明页面可运行，不能证明页面好看。
• UI 调整后要从人的阅读顺序检查：能否快速找到入口、摘要、异常、明细和导出。
• 前端视觉最终由 owner 人工确认。