proxycast/docs/aiprompts/design-language.md

Lime UI 视觉语言

适用范围

本规范适用于 Lime 全部前端界面，包括：

• 设置页
• 功能工作台
• 卡片型列表页
• 弹窗、面板、侧边栏
• 新增页面与既有页面重构

目标不是“做得更花”，而是统一全局视觉判断标准，减少页面之间的配色漂移、布局割裂和局部过度设计。

视觉目标

Lime 的整体界面应当接近以下气质：

• 轻盈、清晰、专业，而不是炫技
• 信息优先，装饰只服务层级
• 桌面应用感强，避免网页营销风格
• 用少量颜色建立辨识度，而不是靠大面积饱和色
• 大多数页面默认明亮、安静、可长时间使用

配色原则

1. 基础底色

• 主背景以浅白、浅灰、浅青为主
• 常用基底建议接近：
  • slate-50
  • white
  • emerald-50
  • sky-50
• 不要默认使用纯白大平面配纯黑文本；应保留轻微层次

2. 主强调色

• 主操作优先使用深色实心按钮，而不是高饱和彩色按钮
• 当前推荐主强调色方向：
  • 深海军蓝 / 深石板蓝：主按钮、关键操作
  • 柔和绿色：成功、可用、健康状态
  • 天空蓝：辅助信息、候选状态
  • 琥珀色：提醒、兼容、注意事项

3. 状态色映射

• 成功 / 可用：emerald
• 提醒 / 兼容：amber
• 信息 / 次级操作：sky 或 slate
• 错误 / 危险：rose 或 red

不要出现同一语义在不同页面频繁换色。

渐变与氛围层

1. 渐变使用规则

• 渐变只能作为“气氛层”，不能承担信息表达
• 优先使用单一连续渐变，不要做左右两段式硬切
• 渐变对比度必须低，不能影响文字可读性

推荐做法：

• 一个大底渐变
• 叠加 2 到 3 个低透明模糊色块

避免做法：

• 两层方向冲突的渐变叠加
• 右侧单独再盖一层灰蓝或灰黑渐变
• 大面积高饱和紫色、蓝紫色背景

2. 背景层级

• 背景先轻，再让卡片浮出来
• 如果背景已经有气氛层，卡片本身就要更克制
• 当页面出现“背景比内容更显眼”的情况，优先减背景，不要继续加组件装饰
• 弹窗、浮层、工作台主面板默认禁止半透明与磨砂效果；不要用 bg-white/80、backdrop-blur、半透明描边去制造“高级感”
• 需要悬浮感时，优先用实体底色、清晰边框和浅阴影，不要靠透出下层内容制造层级

容器与布局

1. 内容宽度策略

根据页面类型决定宽度，不要所有页面统一 max-width：

• 表单型设置页：约 800px
• 信息面板页：约 960px 到 1200px
• 卡片工作台 / 列表工作台：约 1200px 到 1440px

原则：

• 不盲目铺满
• 也不要把卡片型页面锁死在窄列中
• 应根据容器尺寸自适应，而不是写死单一宽度

2. 信息区块结构

推荐页面结构：

1. 页面标题区
2. 摘要区 / 工作台区
3. 搜索筛选区
4. 主内容区

每一层都要有独立职责，不要把标题、筛选、统计、主操作全挤进一行。

3. 卡片型列表页

• 卡片页优先考虑桌面端横向效率
• 列数根据容器宽度自适应
• 卡片之间的间距要比普通表单更大
• 同一行卡片高度尽量对齐

文字排版

1. 中文优先

• 中文标题不要使用过大的字间距
• 英文标签可以少量增加 tracking，但只能用于辅助标签
• 不要让英文全大写成为页面主标题的唯一信息承载

2. 层级规则

• 一个页面只保留一个主标题中心
• 子页面不要重复出现“标题 + 同标题卡片标题”双重堆叠
• 标题负责定性，说明负责补充，不要写两句意思相同的话

3. 统计卡文字

统计卡推荐结构：

• 图标
• 指标名
• 简短说明
• 大数字

避免：

• 把中文标题挤成竖排感
• 说明文字过长导致卡片内断裂
• 英文 tracking 过大压过中文阅读节奏

卡片与表面

1. 卡片表面

• 卡片底色优先白色或轻微染色白
• 边框比阴影更重要
• 阴影要浅，重点靠层级和留白，而不是重投影
• 面板内不要连续叠三层以上卡片；能用分区、留白、分隔线解决的，不要继续套一层圆角卡

推荐方向：

• bg-white
• bg-slate-50
• border-slate-200/80
• shadow-sm shadow-slate-950/5

避免方向：

• 大面积 bg-white/80、bg-slate-50/70 一类半透明主表面
• backdrop-blur-* 用在正文承载容器、工作台、弹窗主体
• 在同一信息区连续嵌套多层圆角白卡，导致边界重复、滚动时视觉发花

2. 组件圆角

• 工作台容器：大圆角
• 卡片：中大圆角
• 小型状态标签：胶囊圆角

不要在同一页面混用太多种圆角尺度。

交互元素

1. 按钮

• 主按钮：深色实心
• 次按钮：白底描边
• 状态按钮：按语义色做浅底+描边

避免所有按钮都长得一样，也避免每个按钮一个颜色体系。

2. 筛选器

• 筛选器应独立成区，不要贴在大标题下直接散排
• 激活态和未激活态差异必须明确
• 数量徽标可以保留，但颜色不要喧宾夺主

跨页面一致性要求

涉及以下改动时，应优先遵守本规范：

• 页面重排
• 新增工作台
• 设置页视觉升级
• 卡片列表改版
• 主题与配色统一

如果已有页面明显更成熟，应向成熟页面靠拢，而不是重新发明一套风格。

实施清单

改 UI 前先检查：

1. 这是表单页、信息页还是卡片页？
2. 当前页面是否被错误限制在过窄宽度？
3. 是否存在重复标题或重复说明？
4. 背景是否比内容更显眼？
5. 中文排版是否被英文 tracking 或窄卡片破坏？
6. 按钮层级是否清晰？
7. 状态色是否遵守全局映射？

本次沉淀的直接经验

这次 skills 页面调整形成了以下可复用结论：

• 卡片工作台页不应沿用普通设置页的 800px 窄列宽度
• 中文统计卡要优先保证标题和说明的横向可读性
• 氛围背景应采用连续浅渐变，不要做分段叠色
• 工作台主操作应与统计信息分栏，而不是挤成一行
• 分组标题应使用“中文主标题 + 英文辅助标签”的组合，而不是反过来
• Team Workspace / 浮层类界面应避免半透明主体和多层套卡，否则会放大遮挡感与层级混乱

关联文档

• components.md
• overview.md