紧凑但不拥挤
通过层级、对齐和分组控制密度，不依赖大面积留白。
Leego Design UI设计规范
v2.29.1 · 2026-10-19登录、账号与退出
账号只出现一次。退出成功回到登录，失败可重试；登录过期后返回原任务。
原型演示 · 无真实认证
基础规范
跨系统共享的视觉语言，不绑定具体业务。
结论先于装饰
页面先回答发生了什么，再给出解释和操作。
状态可被解释
颜色必须与文字、图标、形状或线型共同编码。
移动端独立设计
移动 App 以任务流为主，不缩小桌面工作台。
颜色系统
70% 中性、20% 青黛紫、7% 玉青、3% 朱砂。
青黛紫
#4D3B8F品牌与主操作
20%玉青
#147A70成功与恢复
7%朱砂
#B9472F危险与必须处理
3%危险强化
#9F311F图标、4px 状态边
强语义安全强化
#0C665D对勾、恢复状态边
强语义关注黄
#B88625提醒与临期
语义色墨色
#172033标题与正文
中性页面底色
#EFEEE9工作区背景
70% 中性MiSans 与跨端排版
“小字号”表示紧凑的信息组织，不表示使用难以阅读的极小文字；所有可见文字至少 12px。正文与导航400、按钮与小标题500、大标题600；须先取得官方字体并同源注册。本规范包不内置字体文件，声明字体栈不等于实际加载。
经营健康概览
风险变化与今日行动
用于结论、证据与操作说明。中文正文保持自然字距，兼顾办公距离下的连续阅读。
异常已恢复：请复核“客户服务”指标。
全角标点不悬空，长标题允许自然换行，不通过缩小字号强行塞入一行。
Q3 经营收入 ¥12,680,420.35
同比 −8.6% · SLA 99.95% · 2026-08-23 09:41
华东区域企业协作与多渠道数据综合分析中心
−¥9,999,999.00 / 0 / 未知 / 数据已过期 3 小时
卡片内边距 12–16pxWeb 表格 44 / 48pxMobile 列表 60–84px移动触控区 ≥ 44px
定方向、统一设计、验证交付
先读取事实，只确认会改变设计的决策；每个元素都必须服务于上下文、决策、行动、风险、证据或可访问性。
一个推荐方向与代表样例，直接交付
- 项目方向
- 任务优先、清晰克制；行动优先管理驾驶舱
- 主要用户
- 需要识别异常并完成处置的负责人
- 保护内容
- 对象、范围、风险、权限、时间与证据
- 允许变化
- 已确认的品牌色、Logo、少量图像；不改变固定框架及状态语义
首要行动
无图标收纳条目
3 个高风险对象列表：需要核对详情：需要核对，证据未齐更新于 3 分钟前 · 原型数据
保留详情风险与更新时间；品牌切换不改变几何和状态语义。缺陷开关仅用于验证检查器。
3. 检查结果与证据
目录登记 35 条规则，不代表全部通过。此按钮只执行当前样例的 3 项浏览器断言；完整任务仍需独立评审。
未验证：尚未检查当前示例。
固定框架216 / 68px 侧栏64px 顶栏34 / 56px 对齐轴字号 ≥ 12px纯图标热区 ≥ 44px
企业官网独立平台规范
官网使用连续叙事、单一主转化和编辑式节奏，不继承企业工作台外壳。
连续阅读
body 单一滚动
品牌价值 → 问题 → 方案 → 能力 → 证据 → 联系真实转化
每页一个主要目标
没有真实联系能力时明确禁用，不伪造成功内容证据
授权与来源可追溯
客户、数字、评价和认证未经确认只做占位上线质量
320px、200%、WCAG AA
SEO、性能、隐私和境内发布信息逐项核实WEBSITE · 6 PATTERNS
打开企业官网交互规范 →结构固定，品牌表达可以按项目替换。
内容最大宽度 1440px，阅读宽度 720px，桌面 / 移动章节间距 96px / 56px。
Pad / Tablet 独立平台规范
先识别操作姿态与任务闭环，再决定常驻分栏；不是缩小 Web，也不是放大 Mobile。
概览网格
扫描多个模块、趋势与待办
导航栏 + 12 列网格 + 可选支持面板列表详情
连续浏览对象与详情
240–320px 列表 + 主详情区支持面板
配置、审核、结算与复核
主区约 70% + 280–360px 行动区高频作业台
开单、盘点与现场录入
稳定分区 + 大触控 + 固定主操作适配规则
打开 4 类交互模板 →空间不足时收起支持区，不压缩主任务。
960–1179px 保留两块核心内容；760–959px 使用单一主工作区与可恢复侧滑层；低于 760px 才进入 Mobile 信息架构。
组件与真实状态
组件必须包含默认、交互和失败状态。
操作 · 组件示例
状态
● 成功◆ 关注▲ 风险! 危险○ 未知
紧凑表格
项目状态更新时间
数据同步成功3 分钟前
经营指标关注今天 08:30
舆情来源未知已过期 3h
异常状态 · 组件示例
!同步失败
保留上次有效数据，标明更新时间，并提供重试入口。
跨系统模板库 · 25 PATTERNS
打开交互模板馆 →先选择正确的任务结构，再映射当前系统组件。
模板记录必要数据、交互闭环、响应式、真实状态、反例和验收标准；来源系统只用于设计追溯。
业务语义扩展
基础规范可跨系统复用，业务规则必须按项目单独启用。
STORE HEALTH EXAMPLE
门店健康管理系统
健康、食安红线和整改生命周期属于示范业务映射，不能自动套用到财务、人事或其他系统。
1待接收2已接收3整改中4待复核5已关闭
企业产品动效
先判断该不该动，再用统一令牌表达反馈、空间和状态；高频数据界面保持克制。
按下即获得反馈
同步给同事和 Codex
技能地址保持不变，每次调用从固定清单读取最新版规范与工程令牌。
CODEX TEAM SETUP · DYNAMIC
下载 2.29.1 规范包 ↓安装一次，持续使用最新版
下载并解压规范包，把技能提交到仓库级目录，再将 AGENTS_SNIPPET.md 合并到根目录 AGENTS.md。需要最新版时使用固定 GitHub 更新源；无法核验时使用内置快照。
01 · 安装到团队仓库
mkdir -p .agents/skills cp -R ./leego-design-ui .agents/skills/leego-design-ui
02 · 动态最新版
https://raw.githubusercontent.com/jiamo-coder/leego-design-ui/main/latest.json
03 · 先审计，不修改
$leego-design-ui 先同步最新版规范，再只审计当前系统，不修改代码。 以“Leego Design UI”为基准生成 UI_2_AUDIT.md， 按 P0/P1/P2 列出页面、组件、设计令牌、响应式、 信息密度和无障碍差异。
04 · 确认后实施
$leego-design-ui 先同步最新版规范，再按已确认的 UI_2_AUDIT.md 实施 P0 和 P1。 保留现有业务逻辑、接口、权限和数据结构， 优先复用现有组件，统一设计令牌， 完成后运行 lint、构建和响应式验收。
推荐仓库结构
<repo>/
├─ AGENTS.md
└─ .agents/skills/leego-design-ui/
├─ SKILL.md
├─ agents/openai.yaml
├─ references/
└─ assets/规范内容由固定清单动态更新；技能工作流与权限边界保留在仓库中。