design-elevation

设计层次提升系统

此技能通过运用系统化的设计思维和精修流程，将功能性视觉输出转化为精致、专业的设计。

设计理念

遵循 Alla Kholmatova 的设计系统框架：每项设计决策都属于功能模式（用户交互的内容——结构、布局、组件）或感知模式（整体感受——色彩、排版、间距、动效）。这两个层面都必须经过深思熟虑。

规范设计令牌：Tailwind CSS

所有设计决策都应映射到 Tailwind CSS，将其作为通用设计语言。这意味着：

• 颜色来自 Tailwind 的调色板（gray、blue、emerald、amber、rose、violet 等）
• 间距采用 Tailwind 的比例（1 = 0.25rem/4px，2 = 0.5rem/8px，4 = 1rem/16px 等）
• 排版采用 Tailwind 的字号比例（text-xs 至 text-9xl）
• 边框圆角采用 Tailwind 的系统（rounded-sm 至 rounded-2xl）
• 阴影采用 Tailwind 的层级（shadow-sm 至 shadow-2xl）

编写 CSS 或 HTML 时，请使用 Tailwind 实用类。为其他格式（演示文稿、文档）定义设计令牌时，请将 Tailwind 的值转换为目标媒介适用的值。

激活流程

创建任何视觉输出时：

1. 从功能出发——先创建可运行的版本
2. 定义功能模式——用户会与什么交互？结构是什么？使用 references/grid-systems.md
3. 定义感知模式——整体应呈现怎样的感受？风格是什么？使用 references/elevation-protocol.md
4. 进行审视——使用 references/design-interrogation.md 质疑每一项默认选择
5. 运用技巧提升设计——使用 references/technique-catalog.md 中的具体方法
6. 精修数据可视化——如果包含图表或数据，请应用 references/data-visualization.md
7. 最终检查——确保输出具有手工打造的质感，而非套用模板

不同输出类型的功能模式

演示文稿（PPTX）

• 从信息层级入手，而非装饰
• 应用 references/grid-systems.md 中的网格系统
• 每张幻灯片只表达一个观点——如果需要表达两个观点，就拆成两张
• 在整个幻灯片序列中逐步提升复杂度

仪表板与数据可视化

• 从数据关系入手，而非图表类型
• 应用 references/data-visualization.md 中的 Tufte 数据墨水比
• 结构：KPI 栏 → 主图表 → 辅助图表 → 详细数据表
• 比较 4 个或更多类别时，优先使用小倍图，而非多系列图表
• 非数据元素默认使用 Tailwind 的灰色系；将颜色留给数据

文档与报告

• 通过清晰的排版层级组织内容
• 应用 references/grid-systems.md 中的文档网格
• 使用 Tailwind 的字号比例，确保尺寸一致

Web/HTML 制品

• 基于响应式网格进行设计（Tailwind 的 grid/flex 实用类）
• 直接使用 Tailwind 实用类
• 克制使用动画——默认采用 transition-all duration-200 ease-out

感知模式

卓越排版

Tailwind 的字号比例是基础。可叠加以下优化：

• UI 使用 font-sans（Inter/系统字体），编辑类内容使用 font-serif
• 展示文本（text-3xl 及以上）应用 tracking-tight
• 正文应用 leading-relaxed
• 强调时使用 font-semibold，而非 font-bold——层级效果更微妙
• 数据场景中的数字始终使用 tabular-nums
• 字号比例的选择请参阅 references/typography-scales.md

精致用色

Tailwind 的调色板是唯一依据：

• 以 gray 中性色为基础（不要使用纯黑或纯白）
• 主文本使用 text-gray-900，次要文本使用 text-gray-500，三级文本使用 text-gray-400
• 背景使用 bg-white 或 bg-gray-50——避免刺眼的纯白搭配纯黑
• 选定一种 Tailwind 调色板中的强调色（blue、emerald、violet 等）
• 遵循 60-30-10 原则：60% 中性色、30% 次要色、10% 强调色
• 完整系统请参阅 references/color-systems.md

间距体系

Tailwind 的间距比例提供了布局节奏：

• 基础单位：大多数 UI 使用 4（1rem / 16px）
• 组件内边距：p-4 到 p-6（16-24px）
• 区块间距：py-12 到 py-20（48-80px）
• 间隙：紧凑布局使用 gap-4，舒适布局使用 gap-6，宽敞布局使用 gap-8
• 仅使用 Tailwind 的间距比例，不要使用任意值
• 模式请参阅 references/spacing-systems.md

视觉润色

• 边框圆角：卡片默认使用 rounded-lg，按钮使用 rounded-md
• 边框：使用 border border-gray-100 实现细腻的卡片区分
• 阴影：卡片使用 shadow-sm；将 shadow-lg 留给模态框和叠加层
• 悬停状态：交互元素使用 hover:bg-gray-50
• 过渡效果：默认使用 transition-colors duration-150

设计范例

请将以下内容作为原则的示例，而非系统本身。该系统采用 Tailwind + Kholmatova 的框架。这些范例展示了卓越设计的样貌：

• Stripe：精妙的渐变、精准的字体，以及美观呈现的技术内容
• Linear：出色的深色模式、键盘优先、简约而精准
• Apple：尺度对比、摄影融合、以克制彰显高级感
• Swiss/International Style：严谨的网格、客观清晰、数学化的间距
• IBM Carbon：锐利的直角（0px 圆角）、IBM Plex 字体系列、2x 网格、四种主题架构
• Shopify Polaris：贴近商家的设计、温暖的中性色、深色主按钮、13px 正文字号、圆角卡片
• Adobe Spectrum：四种颜色主题、两种比例模式、三层令牌架构、创意工具模式
• Salesforce Lightning：针对 CRM 优化、品牌蓝色 #0176d3、slds- 工具类、记录详情模式

可借鉴的具体技巧请参阅 references/design-exemplars.md。

IBM Carbon 覆盖规则

为 IBM 产品构建界面或被要求采用 Carbon 风格时，Carbon 令牌优先于 Tailwind 默认值：

• 字体：IBM Plex Sans（不是 Inter），正文为 14px
• 主色：#0f62fe Blue 60（不是 Tailwind blue-600）
• 边框圆角：所有位置均为 0（不是 rounded-lg）——这是 Carbon 标志性的锐利直角
• 文本：#161616 Gray 100（不是 Tailwind gray-900）
• 层级：交替使用白色/gray-10（#f4f4f4）以体现深度
• 完整参考：references/carbon-design-system.md

Shopify Polaris 覆盖规则

为 Shopify 应用构建界面或被要求采用 Polaris 风格时，Polaris 令牌优先于 Tailwind 默认值：

• 字体：Inter，正文为 13px（不是 16px）
• 主按钮：深色 #303030（不是蓝色！）
• 交互元素/链接：#005bd3
• 页面背景：#f1f1f1（不是白色）
• 边框圆角：卡片为 8px，按钮为 6px
• 完整参考：references/polaris-design-system.md

Adobe Spectrum 覆盖规则

为 Adobe 产品构建界面或被要求采用 Spectrum 风格时，Spectrum 令牌优先于 Tailwind 默认值：

• 字体：Adobe Clean / Source Sans Pro，正文为 14px
• 强调色：#0D80D8（浅色）/ #2A9AF4（深色）
• 边框圆角：控件为 4px，卡片为 8px
• 四种主题：Lightest、Light、Dark、Darkest
• 两种比例：Medium（桌面端）、Large（触控）
• 完整参考：references/spectrum-design-system.md

Salesforce Lightning 覆盖规则

为 Salesforce 应用构建界面或被要求采用 Lightning/SLDS 风格时，SLDS 令牌优先于 Tailwind 默认值：

• 字体：Salesforce Sans，正文为 13px
• 品牌色：#0176d3（不是 Tailwind blue-600）
• 边框圆角：所有位置均为 4px（0.25rem）
• 文本：#181818（不是 Tailwind gray-900）
• 使用 slds- 前缀的工具类
• 完整参考：references/lightning-design-system.md

关键设计要点（速查）

让设计更显匠心

• 将 #000000 替换为 text-gray-900
• 将背景中的 #ffffff 替换为 bg-gray-50
• 统一使用 rounded-lg，不要混用不同圆角
• 全程采用同一套间距比例

打造高级质感

• 留出充足的空白——主视觉区域使用 p-8 或 p-12
• 展示文字采用紧凑字距：tracking-tight
• 使用彩色阴影：用 shadow-blue-500/10 代替黑色阴影
• 使用微妙的边框：用 border-gray-100 代替 border-gray-300

打造简洁感

• 移除边框，使用空白进行区隔
• 每个视图最多使用 2-3 种字号
• 使用单一强调色
• 使用 text-gray-500 呈现辅助文字，而非缩小字号

清晰呈现数据

• 标题直接说明发现，而不是图表类型
• 使用直接标注，而非图例
• 弱化非必要的数据系列
• 所有数字列均使用 tabular-nums
• 来源注明使用 text-xs text-gray-400

资源加载优先级

为提高效率，请按以下顺序加载资源：

1. references/elevation-protocol.md — 始终首先加载
2. references/data-visualization.md — 涉及数据或图表时加载
3. references/technique-catalog.md — 使用特定技巧时加载
4. references/design-interrogation.md — 进行质量检查时加载
5. references/carbon-design-system.md — 请求 IBM/Carbon 样式时加载
6. references/polaris-design-system.md — 请求 Shopify/Polaris 样式时加载
7. references/spectrum-design-system.md — 请求 Adobe/Spectrum 样式时加载
8. references/lightning-design-system.md — 请求 Salesforce/Lightning 样式时加载
9. 按需加载特定上下文的参考资料（颜色、字体排印、间距、网格）

输出标准

交付的每个视觉作品都应：

• 一贯使用 Tailwind 的设计令牌（或其转换后的等效项）
• 展示清晰的功能模式（结构、层级、交互）
• 呈现协调的感知模式（颜色、字体、间距、动效）
• 确保数据完整性（如包含数据，应遵循 Tufte 的原则）
• 体现经过精心设计的质感，而非默认样式
• 在大胆与克制之间取得平衡

静默执行

除非用户明确要求，否则请在内部运用所有设计思考，只向用户呈现打磨完善的结果。HTML/CSS 的设计决策应记录在代码注释中，演示文稿则记录在演讲者备注中；除非用户要求，否则不要解释设计过程。

优秀的设计，做好时是隐形的。用户应能感受到品质，却看不见背后的努力。