design-elevation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Elevation System

设计提升系统

This skill transforms functional visual outputs into polished, professional designs by applying systematic design thinking and refinement protocols.

本技能通过应用系统化设计思维和优化规则，将功能性视觉输出转换为精致、专业的设计。

Design Philosophy

设计理念

Follow Alla Kholmatova's design systems framework: every design decision is either a functional pattern (what users interact with — structure, layout, components) or a perceptual pattern (how it feels — color, typography, spacing, motion). Both layers must be intentional.

遵循Alla Kholmatova的设计系统框架：每一项设计决策都属于功能模式（用户交互的对象——结构、布局、组件）或感知模式（设计给人的感受——颜色、排版、间距、动效）。这两个层面的设计都必须具有目的性。

Canonical Design Tokens: Tailwind CSS

标准设计令牌：Tailwind CSS

All design decisions should map to Tailwind CSS as the shared design language. This means:

Colors from Tailwind's palette (gray, blue, emerald, amber, rose, violet, etc.)
Spacing from Tailwind's scale (1 = 0.25rem/4px, 2 = 0.5rem/8px, 4 = 1rem/16px, etc.)
Typography from Tailwind's type scale (text-xs through text-9xl)
Border radius from Tailwind's system (rounded-sm through rounded-2xl)
Shadows from Tailwind's elevation (shadow-sm through shadow-2xl)

When writing CSS or HTML, use Tailwind utility classes. When defining design tokens for other formats (presentations, documents), translate Tailwind values into the target medium.

所有设计决策都应映射到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的值转换为对应介质的适用值。

Activation Protocol

激活流程

When creating ANY visual output:

Start with function — Create a working version first
Define functional patterns — What does the user interact with? What's the structure? Use
```
references/grid-systems.md
```
Define perceptual patterns — How should it feel? What's the personality? Use
```
references/elevation-protocol.md
```
Apply interrogation — Question every default choice using
```
references/design-interrogation.md
```
Elevate with techniques — Use specific moves from
```
references/technique-catalog.md
```
Polish data visualizations — If any charts/data, apply
```
references/data-visualization.md
```
Final check — Ensure output feels hand-crafted, not templated

创建任何视觉输出时，请遵循以下步骤：

从功能出发——先创建可用版本
定义功能模式——用户交互的对象是什么？结构是什么？参考
```
references/grid-systems.md
```
定义感知模式——设计应该给人什么感受？风格定位是什么？参考
```
references/elevation-protocol.md
```
进行设计审视——使用
```
references/design-interrogation.md
```
质疑每一个默认选择
运用技巧优化——从
```
references/technique-catalog.md
```
中选用特定技巧
优化数据可视化——如果包含图表/数据，应用
```
references/data-visualization.md
```
中的规则
最终检查——确保输出内容看起来是精心打造的，而非模板化产物

Functional Patterns by Output Type

按输出类型划分的功能模式

For Presentations (PPTX)

针对演示文稿（PPTX）

Start with information hierarchy, not decoration
Apply grid systems from
```
references/grid-systems.md
```
One idea per slide — if it needs two ideas, it needs two slides
Build complexity gradually across the slide sequence

从信息层级入手，而非先做装饰
应用
```
references/grid-systems.md
```
中的网格系统
每页幻灯片只承载一个核心观点——如果需要两个观点，就拆分到两张幻灯片
在幻灯片序列中逐步增加内容复杂度

For Dashboards & Data Visualization

针对仪表盘与数据可视化

Begin with data relationships, not chart types
Apply Tufte's data-ink ratio from
```
references/data-visualization.md
```
Structure: KPI bar → Primary chart → Supporting charts → Detail tables
Use small multiples over multi-series charts when comparing 4+ categories
Default to Tailwind's gray scale for non-data elements; reserve color for data

从数据关系入手，而非先选定图表类型
应用
```
references/data-visualization.md
```
中的Tufte数据墨水比原则
结构：KPI栏 → 主图表 → 辅助图表 → 详情表格
比较4个及以上类别时，优先使用小多图而非多系列图表
非数据元素默认使用Tailwind的灰度色系；颜色仅用于区分数据

For Documents & Reports

针对文档与报告

Structure with clear typographic hierarchy
Apply document grids from
```
references/grid-systems.md
```
Use Tailwind's type scale for consistent sizing

采用清晰的排版层级构建结构
应用
```
references/grid-systems.md
```
中的文档网格
使用Tailwind的字体刻度保证尺寸一致性

For Web/HTML Artifacts

针对网页/HTML制品

Design with responsive grid foundations (Tailwind's grid/flex utilities)
Use Tailwind utility classes directly
Apply animation restraint —
```
transition-all duration-200 ease-out
```
as default

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

Perceptual Patterns

感知模式

Typography Excellence

卓越排版

Tailwind's type scale is the foundation. Layer these refinements:

Use
```
font-sans
```
(Inter/system) for UI,
```
font-serif
```
for editorial
Apply
```
tracking-tight
```
for display text (text-3xl and above)
Apply
```
leading-relaxed
```
for body text
Use
```
font-semibold
```
for emphasis over
```
font-bold
```
— subtler hierarchy
For numbers in data contexts: always
```
tabular-nums
```
Refer to
```
references/typography-scales.md
```
for scale selection

Tailwind的字体刻度是基础，在此之上可添加以下优化：

UI内容使用
```
font-sans
```
（Inter/系统字体），编辑类内容使用
```
font-serif
```
标题文本（text-3xl及以上）应用
```
tracking-tight
```
正文文本应用
```
leading-relaxed
```
强调文本使用
```
font-semibold
```
而非
```
font-bold
```
——层级更柔和
数据场景中的数字：始终使用
```
tabular-nums
```
参考
```
references/typography-scales.md
```
选择字体刻度

Color Sophistication

精致配色

Tailwind's palette is the source of truth:

Build from
```
gray
```
neutrals (not pure black/white)
```
text-gray-900
```
for primary text,
```
text-gray-500
```
for secondary,
```
text-gray-400
```
for tertiary
```
bg-white
```
or
```
bg-gray-50
```
for backgrounds — never stark white with stark black
Accent color: pick ONE from Tailwind's palette (blue, emerald, violet, etc.)
Apply 60-30-10: 60% neutrals, 30% secondary, 10% accent
Refer to
```
references/color-systems.md
```
for full system

Tailwind的调色板是唯一标准：

从
```
gray
```
中性色构建基础（而非纯黑/纯白）
主文本使用
```
text-gray-900
```
，次要文本使用
```
text-gray-500
```
， tertiary文本使用
```
text-gray-400
```
背景使用
```
bg-white
```
或
```
bg-gray-50
```
——绝对不要纯白配纯黑
强调色：从Tailwind调色板中选择一种（blue、emerald、violet等）
应用60-30-10原则：60%中性色，30%次要色，10%强调色
参考
```
references/color-systems.md
```
获取完整配色系统

Spatial Systems

空间系统

Tailwind's spacing scale provides the rhythm:

Base unit:
```
4
```
(1rem / 16px) for most UI
Component padding:
```
p-4
```
to
```
p-6
```
(16-24px)
Section spacing:
```
py-12
```
to
```
py-20
```
(48-80px)
Gaps:
```
gap-4
```
for tight,
```
gap-6
```
for comfortable,
```
gap-8
```
for spacious
Use Tailwind's spacing scale exclusively — no arbitrary values
Refer to
```
references/spacing-systems.md
```
for patterns

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
```
获取布局模式

Visual Refinement

视觉优化

Border radius:
```
rounded-lg
```
as default for cards,
```
rounded-md
```
for buttons
Borders:
```
border border-gray-100
```
for subtle card separation
Shadows:
```
shadow-sm
```
for cards; reserve
```
shadow-lg
```
for modals/overlays
Hover states:
```
hover:bg-gray-50
```
for interactive elements
Transitions:
```
transition-colors duration-150
```
as default

圆角：卡片默认使用
```
rounded-lg
```
，按钮默认使用
```
rounded-md
```
边框：使用
```
border border-gray-100
```
实现柔和的卡片分隔
阴影：卡片使用
```
shadow-sm
```
；
```
shadow-lg
```
仅用于模态框/覆盖层
悬停状态：交互元素使用
```
hover:bg-gray-50
```
过渡效果：默认采用
```
transition-colors duration-150
```

Design Exemplars

设计范例

Use these as illustrations of principles, not as the system itself. The system is Tailwind + Kholmatova's framework. These exemplars show what excellence looks like:

Stripe: Gradient sophistication, precise type, technical content made beautiful
Linear: Dark mode mastery, keyboard-first, minimal and precise
Apple: Scale contrasts, photography integration, restraint as premium
Swiss/International Style: Grid discipline, objective clarity, mathematical spacing
Trimble Modus: Enterprise utility, Open Sans 14px body, 4px radius, uniform shadows, professional restraint
IBM Carbon: Sharp corners (0px radius), IBM Plex type family, 2x grid, four-theme architecture
Shopify Polaris: Merchant-friendly, warm neutrals, dark primary buttons, 13px body, rounded cards
Adobe Spectrum: Four color themes, two scale modes, three-layer token architecture, creative-tool patterns
Salesforce Lightning: CRM-optimized, brand blue #0176d3, slds- utility classes, record-detail patterns

Refer to

references/design-exemplars.md

for specific techniques to borrow.

以下内容是原则的示例，而非系统本身。本系统基于Tailwind + Kholmatova框架构建。这些范例展示了优秀设计的样子：

Stripe：渐变质感精致，排版精准，技术内容呈现美观
Linear：深色模式运用出色，优先支持键盘操作，设计极简且精准
Apple：尺度对比鲜明，融合摄影元素，以克制体现高端感
瑞士/国际风格：网格严谨，内容客观清晰，间距遵循数学逻辑
Trimble Modus：企业级实用性，正文使用14px Open Sans，4px圆角，统一阴影，专业克制
IBM Carbon：直角（0px圆角），IBM Plex字体家族，2倍网格，四主题架构
Shopify Polaris：面向商家友好，中性色温暖，主按钮深色，正文13px，卡片圆角
Adobe Spectrum：四种配色主题，两种尺度模式，三层令牌架构，创意工具类设计模式
Salesforce Lightning：CRM场景优化，品牌蓝#0176d3，使用
```
slds-
```
前缀工具类，记录详情布局模式

参考

references/design-exemplars.md

获取可借鉴的具体技巧。

Trimble Modus Override

Trimble Modus 覆盖规则

When building for Trimble products or when Modus styling is requested, Modus tokens override Tailwind defaults:

Font: Open Sans (not Inter), body at 14px (not 16px)
Primary:
```
#0063A3
```
Trimble Blue (not Tailwind blue-600)
Border radius:
```
4px
```
everywhere (not
```
rounded-lg
```
)
Shadows:
```
0 0 4px rgba(36,35,45,0.3)
```
uniform (not directional)
Gray scale: Modus grays with cool/blue undertone (not Tailwind neutral grays)
Full reference:
```
references/modus-design-system.md
```

为Trimble产品构建设计或要求使用Modus风格时，Modus令牌将覆盖Tailwind默认值：

字体：Open Sans（而非Inter），正文14px（而非16px）
主色：
```
#0063A3
```
Trimble蓝（而非Tailwind blue-600）
圆角：所有元素均为
```
4px
```
（而非
```
rounded-lg
```
）
阴影：统一使用
```
0 0 4px rgba(36,35,45,0.3)
```
（而非方向性阴影）
灰度色系：带冷调/蓝调的Modus灰度（而非Tailwind中性灰度）
完整参考：
```
references/modus-design-system.md
```

IBM Carbon Override

IBM Carbon 覆盖规则

When building for IBM products or when Carbon styling is requested, Carbon tokens override Tailwind defaults:

Font: IBM Plex Sans (not Inter), body at 14px
Primary:
```
#0f62fe
```
Blue 60 (not Tailwind blue-600)
Border radius:
```
0
```
everywhere (not
```
rounded-lg
```
) — Carbon's signature sharp corners
Text:
```
#161616
```
Gray 100 (not Tailwind gray-900)
Layers: alternating white/gray-10 (
```
#f4f4f4
```
) for depth
Full reference:
```
references/carbon-design-system.md
```

为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 Override

Shopify Polaris 覆盖规则

When building Shopify apps or when Polaris styling is requested, Polaris tokens override Tailwind defaults:

Font: Inter, body at 13px (not 16px)
Primary buttons:
```
#303030
```
dark (not blue!)
Interactive/links:
```
#005bd3
```
Page background:
```
#f1f1f1
```
(not white)
Border radius:
```
8px
```
for cards,
```
6px
```
for buttons
Full reference:
```
references/polaris-design-system.md
```

为Shopify应用构建设计或要求使用Polaris风格时，Polaris令牌将覆盖Tailwind默认值：

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

Adobe Spectrum Override

Adobe Spectrum 覆盖规则

When building Adobe products or when Spectrum styling is requested, Spectrum tokens override Tailwind defaults:

Font: Adobe Clean / Source Sans Pro, body at 14px
Accent:
```
#0D80D8
```
(light) /
```
#2A9AF4
```
(dark)
Border radius:
```
4px
```
for controls,
```
8px
```
for cards
Four themes: Lightest, Light, Dark, Darkest
Two scales: Medium (desktop), Large (touch)
Full reference:
```
references/spectrum-design-system.md
```

为Adobe产品构建设计或要求使用Spectrum风格时，Spectrum令牌将覆盖Tailwind默认值：

字体：Adobe Clean / Source Sans Pro，正文14px
强调色：
```
#0D80D8
```
（浅色模式）/
```
#2A9AF4
```
（深色模式）
圆角：控件
```
4px
```
，卡片
```
8px
```
四种主题：最浅、浅色、深色、最深色
两种尺度：中等（桌面）、大（触控）
完整参考：
```
references/spectrum-design-system.md
```

Salesforce Lightning Override

Salesforce Lightning 覆盖规则

When building Salesforce apps or when Lightning/SLDS styling is requested, SLDS tokens override Tailwind defaults:

Font: Salesforce Sans, body at 13px
Brand:
```
#0176d3
```
(not Tailwind blue-600)
Border radius:
```
4px
```
(0.25rem) everywhere
Text:
```
#181818
```
(not Tailwind gray-900)
Uses
```
slds-
```
prefix utility classes
Full reference:
```
references/lightning-design-system.md
```

为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
```

Critical Design Moves (Quick Reference)

关键设计技巧（速查）

Make it feel intentional

让设计更具目的性

Replace
```
#000000
```
with
```
text-gray-900
```
Replace
```
#ffffff
```
with
```
bg-gray-50
```
for backgrounds
Use
```
rounded-lg
```
consistently, not mixed radii
Apply one spacing scale throughout

用
```
text-gray-900
```
替代
```
#000000
```
背景用
```
bg-gray-50
```
替代
```
#ffffff
```
统一使用
```
rounded-lg
```
，避免混合不同圆角值
全程使用同一间距刻度

Make it feel premium

让设计更显高端

Generous whitespace —
```
p-8
```
or
```
p-12
```
on hero sections
Tight tracking on display text:
```
tracking-tight
```
Colored shadows:
```
shadow-blue-500/10
```
instead of black
Subtle borders:
```
border-gray-100
```
instead of
```
border-gray-300
```

充足留白—— hero区块使用
```
p-8
```
或
```
p-12
```
标题文本使用紧凑字间距：
```
tracking-tight
```
使用彩色阴影：
```
shadow-blue-500/10
```
替代黑色阴影
柔和边框：用
```
border-gray-100
```
替代
```
border-gray-300
```

Make it feel clean

让设计更简洁

Remove borders and use whitespace to separate
Reduce to 2-3 type sizes maximum per view
Single accent color
```
text-gray-500
```
for supporting text, not smaller type

移除边框，用留白分隔元素
每个视图最多使用2-3种字体尺寸
单一强调色
辅助文本使用
```
text-gray-500
```
，而非缩小字体

Make data feel clear

让数据更清晰

Title states the finding, not the chart type
Direct labels over legends
Gray out non-essential series
```
tabular-nums
```
on all number columns
Source attribution in
```
text-xs text-gray-400
```

标题直接呈现结论，而非说明图表类型
直接标注数据，而非使用图例
淡化非关键数据系列
所有数字列使用
```
tabular-nums
```
来源标注使用
```
text-xs text-gray-400
```

Resource Loading Priority

资源加载优先级

For efficiency, load resources in this order:

```
references/elevation-protocol.md
```
— Always load first
```
references/data-visualization.md
```
— Load when any data/charts involved
```
references/technique-catalog.md
```
— Load for specific techniques
```
references/design-interrogation.md
```
— Load for quality checks
```
references/modus-design-system.md
```
— Load when Trimble/Modus styling is requested
```
references/carbon-design-system.md
```
— Load when IBM/Carbon styling is requested
```
references/polaris-design-system.md
```
— Load when Shopify/Polaris styling is requested
```
references/spectrum-design-system.md
```
— Load when Adobe/Spectrum styling is requested
```
references/lightning-design-system.md
```
— Load when Salesforce/Lightning styling is requested
Context-specific references (color, typography, spacing, grids) as needed

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

```
references/elevation-protocol.md
```
—— 始终优先加载
```
references/data-visualization.md
```
—— 涉及数据/图表时加载
```
references/technique-catalog.md
```
—— 需要特定技巧时加载
```
references/design-interrogation.md
```
—— 进行质量检查时加载
```
references/modus-design-system.md
```
—— 要求Trimble/Modus风格时加载
```
references/carbon-design-system.md
```
—— 要求IBM/Carbon风格时加载
```
references/polaris-design-system.md
```
—— 要求Shopify/Polaris风格时加载
```
references/spectrum-design-system.md
```
—— 要求Adobe/Spectrum风格时加载
```
references/lightning-design-system.md
```
—— 要求Salesforce/Lightning风格时加载
根据需要加载特定场景参考（颜色、排版、间距、网格）

Output Standards

输出标准

Every delivered visual should:

Use Tailwind's design tokens consistently (or their translated equivalents)
Show clear functional patterns (structure, hierarchy, interaction)
Express coherent perceptual patterns (color, type, spacing, motion)
Demonstrate data integrity (if data is present, follow Tufte's principles)
Feel intentionally designed, not defaulted
Balance boldness with restraint

交付的每一份视觉内容都应满足：

一致使用Tailwind设计令牌（或其对应介质的转换值）
呈现清晰的功能模式（结构、层级、交互）
表达连贯的感知模式（颜色、字体、间距、动效）
保证数据完整性（若包含数据，遵循Tufte原则）
看起来是精心设计的，而非默认模板
在大胆创新与克制之间取得平衡

Silent Execution

静默执行

Unless explicitly asked, apply all design thinking internally. The user sees only the polished result. Document design decisions in code comments for HTML/CSS, or in speaker notes for presentations, but don't explain the process unless requested.

Great design is invisible when done right. The user should feel the quality without seeing the effort.

除非明确要求，所有设计思考过程均在内部完成。用户仅能看到最终的精致成果。HTML/CSS中的设计决策可记录在代码注释中，演示文稿的设计决策可记录在备注中，但除非用户询问，否则无需解释设计流程。

优秀的设计在完成时是无形的。用户应能感受到设计的品质，却看不到背后的付出。