pixel-craft

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pixel Craft Skill

Create professional, polished UI that looks intentionally designed—not AI-generated.

打造专业、精致的UI，呈现出精心设计的质感，而非AI生成的千篇一律效果。

1. Starting From Scratch

1. 从零开始设计

Start with a Feature, Not a Layout

从功能入手，而非布局

Don't design the shell first (nav, sidebar, footer). Design actual functionality:

What fields does this form need?
What data does this card display?
What actions can the user take?

The shell comes later, informed by the features you've designed.

不要先设计框架（导航栏、侧边栏、页脚）。先设计实际功能：

这个表单需要哪些字段？
这个卡片要展示哪些数据？
用户可以执行哪些操作？

框架应在之后根据已设计的功能来搭建。

Hold the Color

先不用色彩，以灰度设计

Design in grayscale first. This forces you to use spacing, contrast, and size to create hierarchy—not color as a crutch. Color enhances a clear hierarchy; it can't fix a broken one.

先用灰度进行设计。这会迫使你利用间距、对比度和尺寸来构建层级，而非依赖色彩作为“拐杖”。色彩是对清晰层级的强化，而非糟糕层级的补救。

Don't Design Too Much

不要过度设计

Don't design every feature upfront. Work in cycles:

Design a simple version
Build it
Discover edge cases in real use
Fix them
Repeat

Be a pessimist: Don't include features you're not ready to build. A comment system without attachments is better than no comment system at all.

不要一开始就设计所有功能。采用循环迭代的方式：

设计一个简单版本
实现它
在实际使用中发现边缘情况
修复问题
重复上述步骤

做个“悲观主义者”：不要加入你还没准备好实现的功能。一个没有附件功能的评论系统，好过完全没有评论系统。

Choose a Personality

为设计定义风格调性

Every design communicates something. Decide intentionally:

Element	Elegant/Serious	Playful/Casual
Font	Serif or neutral sans	Rounded sans-serif
Border radius	None or small (rounded-sm)	Large (rounded-xl, rounded-full)
Colors	Muted, blue, gold	Bright, pink, teal
Language	"Your account"	"Hey there!"

Stay consistent—don't mix playful borders with formal language.

每个设计都在传递某种信息。要刻意决定：

元素	优雅/严肃风	活泼/休闲风
字体	衬线体或中性无衬线体	圆润无衬线体
圆角	无或小圆角（rounded-sm）	大圆角（rounded-xl、rounded-full）
色彩	低饱和度色调、蓝色、金色	明亮色调、粉色、蓝绿色
文案语气	“您的账户”	“嗨，您好！”

保持风格一致——不要将活泼的圆角与正式的文案语气混用。

Limit Your Choices

限制你的选择范围

Don't pick from infinite values. Define systems upfront:

Spacing: 1, 2, 3, 4, 6, 8, 12, 16, 24, 32
Font sizes: text-xs through text-4xl
Colors: 8-10 shades per color
Shadows: shadow-sm through shadow-2xl

Constraints speed up decisions and create consistency.

不要从无限的取值中挑选。提前定义设计系统：

间距：1、2、3、4、6、8、12、16、24、32
字体大小：text-xs 至 text-4xl
色彩：每种颜色8-10个色调
阴影：shadow-sm 至 shadow-2xl

约束条件能加快决策速度，并确保设计一致性。

2. Visual Hierarchy

2. 视觉层级设计

Not All Elements Are Equal

并非所有元素都同等重要

Every interface has:

Primary content — What users came for (text-slate-900)
Secondary content — Supporting info (text-slate-500)
Tertiary content — Least important (text-slate-400)

Use color, weight, and size to make the hierarchy obvious.

每个界面都包含：

主要内容 — 用户访问页面的核心目标（text-slate-900）
次要内容 — 辅助信息（text-slate-500）
三级内容 — 最不重要的信息（text-slate-400）

利用色彩、字重和尺寸来明确层级关系。

Size Isn't Everything

尺寸并非唯一手段

Don't rely on font size alone. Better tools:

Font weight: 400-500 normal, 600-700 emphasis
Color: Dark for primary, grey for secondary
Avoid weights under 400—use lighter color instead

不要仅依赖字体大小。更好的方式包括：

字重：400-500为常规，600-700用于强调
色彩：主要内容用深色，次要内容用灰色
避免使用400以下的字重——改用更浅的色彩替代

Emphasize by De-emphasizing

通过弱化其他元素来突出重点

When something won't stand out, de-emphasize the competition:

html

<!-- Don't: Make active item louder -->
<a class="text-blue-600 font-bold">Active</a>
<a class="text-slate-700">Other</a>

<!-- Do: Make inactive items quieter -->
<a class="text-slate-900">Active</a>
<a class="text-slate-400">Other</a>

If a sidebar competes with main content, remove its background color entirely.

如果某个元素不够突出，就弱化它的竞争对手：

html

<!-- 错误做法：仅突出当前项 -->
<a class="text-blue-600 font-bold">Active</a>
<a class="text-slate-700">Other</a>

<!-- 正确做法：弱化非当前项 -->
<a class="text-slate-900">Active</a>
<a class="text-slate-400">Other</a>

如果侧边栏与主内容抢视线，完全移除它的背景色即可。

Labels Are a Last Resort

标签是最后的选择

Often you don't need labels:

```
janedoe@example.com
```
— obviously an email
```
(555) 765-4321
```
— obviously a phone
```
$19.99
```
— obviously a price

Combine labels with values:

Instead of "In stock: 12" → "12 left in stock"
Instead of "Bedrooms: 3" → "3 bedrooms"

When you need labels, make them secondary:

html

<div>
  <span class="text-xs text-slate-500 uppercase tracking-wide">Revenue</span>
  <span class="text-2xl font-semibold text-slate-900">$45,231</span>
</div>

通常你不需要标签：

```
janedoe@example.com
```
— 显然是邮箱地址
```
(555) 765-4321
```
— 显然是电话号码
```
$19.99
```
— 显然是价格

将标签与内容合并：

不要写“库存：12” → 改成“仅剩12件库存”
不要写“卧室：3” → 改成“3间卧室”

当确实需要标签时，将其设为次要元素：

html

<div>
  <span class="text-xs text-slate-500 uppercase tracking-wide">Revenue</span>
  <span class="text-2xl font-semibold text-slate-900">$45,231</span>
</div>

Semantic Hierarchy ≠ Visual Hierarchy

语义层级 ≠ 视觉层级

<h1>

doesn't have to be huge. Section titles often work better small:

html

<h1 class="text-sm font-medium text-slate-500 uppercase tracking-wide">
  Account Settings
</h1>

<h1>

标签不一定需要很大。章节标题通常小一点效果更好：

html

<h1 class="text-sm font-medium text-slate-500 uppercase tracking-wide">
  Account Settings
</h1>

Balance Weight and Contrast

平衡字重与对比度

Icons feel heavy. De-emphasize them:

html

<span class="flex items-center gap-2">
  <Icon class="size-5 text-slate-400" />  <!-- softer -->
  <span class="text-slate-900">Label</span>  <!-- full contrast -->
</span>

Thin borders too subtle? Make them thicker, not darker:

html

<div class="border-2 border-slate-200">...</div>  <!-- thicker, soft -->

图标会显得很重。弱化它们：

html

<span class="flex items-center gap-2">
  <Icon class="size-5 text-slate-400" />  <!-- 降低视觉权重 -->
  <span class="text-slate-900">Label</span>  <!-- 保持高对比度 -->
</span>

细边框不够明显？ 把它变粗，而非加深颜色：

html

<div class="border-2 border-slate-200">...</div>  <!-- 更粗但柔和 -->

Button Hierarchy

按钮层级设计

Don't style by semantics alone. Style by importance:

html

<!-- Primary: solid, high contrast -->
<button class="bg-blue-600 text-white">Save Changes</button>

<!-- Secondary: outline or muted -->
<button class="border border-slate-300 text-slate-700">Cancel</button>

<!-- Tertiary: link-style -->
<button class="text-slate-500 underline">Reset</button>

Destructive ≠ always red and bold. If "Delete" isn't the primary action, make it subtle. Show the scary red button in a confirmation modal where it IS the primary action.

不要仅按语义来设计样式，要按重要性来：

html

<!-- 主按钮：实心填充，高对比度 -->
<button class="bg-blue-600 text-white">Save Changes</button>

<!-- 次按钮：轮廓线或低饱和度样式 -->
<button class="border border-slate-300 text-slate-700">Cancel</button>

<!-- 三级按钮：链接样式 -->
<button class="text-slate-500 underline">Reset</button>

破坏性操作≠必须用红色粗体。如果“删除”不是主要操作，就设计得低调一些。只有在确认弹窗中它作为主要操作时，再使用醒目的红色按钮。

3. Spacing & Layout

3. 间距与布局

Start with Too Much White Space

先预留过多空白，再逐步缩减

Don't add minimum spacing to not look bad. Start with way too much, then remove until happy. What seems like "too much" in isolation is often "just right" in context.

不要为了“看起来不糟糕”而设置最小间距。先预留远多于需要的空白，再逐步缩减直到满意。单独看似乎“过多”的空白，在整体界面中往往刚好合适。

Use a Spacing Scale

使用间距比例系统

Tailwind 4 uses

--spacing: 0.25rem

(4px) as base:

p-1  = 0.25rem (4px)   — icon gaps, tight inline
p-2  = 0.5rem  (8px)   — compact buttons, tight lists
p-3  = 0.75rem (12px)  — form input padding
p-4  = 1rem    (16px)  — base padding, standard gaps
p-6  = 1.5rem  (24px)  — card padding, comfortable
p-8  = 2rem    (32px)  — section spacing
p-12 = 3rem    (48px)  — component groups
p-16 = 4rem    (64px)  — major sections
p-24 = 6rem    (96px)  — hero content
p-32 = 8rem    (128px) — dramatic page breaks

The scale should have ~25% jumps between adjacent values. 4px → 6px is imperceptible; 4px → 8px is noticeable.

Tailwind 4 使用

--spacing: 0.25rem

（4px）作为基准：

p-1  = 0.25rem (4px)   — 图标间隙、紧凑行内元素
p-2  = 0.5rem  (8px)   — 紧凑按钮、密集列表
p-3  = 0.75rem (12px)  — 表单输入框内边距
p-4  = 1rem    (16px)  — 基础内边距、标准间隙
p-6  = 1.5rem  (24px)  — 卡片内边距、舒适间距
p-8  = 2rem    (32px)  — 区块间距
p-12 = 3rem    (48px)  — 组件组间距
p-16 = 4rem    (64px)  — 主要区块间距
p-24 = 6rem    (96px)  — Hero区域内容间距
p-32 = 8rem    (128px) — 大幅页面分隔间距

相邻间距值之间的增幅应约为25%。4px→6px几乎无法察觉；4px→8px则清晰可见。

Don't Fill the Whole Screen

不要填满整个屏幕

If content only needs 600px, use 600px. Don't stretch it. Extra width makes interfaces harder to interpret.

html

<div class="max-w-2xl mx-auto">...</div>  <!-- centered, constrained -->

如果内容只需要600px宽度，就用600px。不要强行拉伸。过宽的界面会增加理解难度。

html

<div class="max-w-2xl mx-auto">...</div>  <!-- 居中并限制宽度 -->

Grids Are Overrated

网格布局并非万能

Not everything should be fluid/percentage-based. Sidebars should be fixed width:

html

<!-- Bad: sidebar grows/shrinks with viewport -->
<aside class="w-1/4">...</aside>

<!-- Good: sidebar stays optimal, main area flexes -->
<aside class="w-64 shrink-0">...</aside>
<main class="flex-1">...</main>

并非所有元素都应该是流式/百分比宽度。侧边栏应该使用固定宽度：

html

<!-- 错误：侧边栏随视窗大小伸缩 -->
<aside class="w-1/4">...</aside>

<!-- 正确：侧边栏保持最优宽度，主内容自适应 -->
<aside class="w-64 shrink-0">...</aside>
<main class="flex-1">...</main>

Relative Sizing Doesn't Scale

相对尺寸无法自适应缩放

A headline at 2.5× body size works on desktop but not mobile. Define sizes independently:

Desktop: 18px body, 45px headline
Mobile: 14px body, 24px headline (not 35px)

Large elements shrink faster than small elements at smaller screens.

标题大小为正文2.5倍在桌面端合适，但在移动端则不然。要独立定义各端尺寸：

桌面端：正文18px，标题45px
移动端：正文14px，标题24px（而非35px）

大元素在小屏幕上的缩小幅度应大于小元素。

Avoid Ambiguous Spacing

避免模糊的间距分组

Groups need definition. More space BETWEEN groups, less space WITHIN:

html

<!-- Bad: equal spacing everywhere -->
<label>Name</label>      <!-- 16px gap -->
<input />                <!-- 16px gap -->
<label>Email</label>     <!-- 16px gap -->
<input />

<!-- Good: tight within groups, loose between -->
<label>Name</label>      <!-- 4px gap -->
<input />
                         <!-- 24px gap -->
<label>Email</label>     <!-- 4px gap -->
<input />

This applies everywhere: headings need more space above than below, list items shouldn't have line-height-sized gaps between them.

元素组需要明确的边界。组与组之间的间距要大，组内元素的间距要小：

html

<!-- 错误：所有间距一致 -->
<label>Name</label>      <!-- 16px 间隙 -->
<input />                <!-- 16px 间隙 -->
<label>Email</label>     <!-- 16px 间隙 -->
<input />

<!-- 正确：组内紧凑，组间宽松 -->
<label>Name</label>      <!-- 4px 间隙 -->
<input />
                         <!-- 24px 间隙 -->
<label>Email</label>     <!-- 4px 间隙 -->
<input />

这适用于所有场景：标题上方的间距应大于下方；列表项之间不应使用行高大小的间隙。

4. Typography

4. 排版设计

Type Scale (Tailwind 4)

字体大小比例系统（Tailwind 4）

text-xs   = 0.75rem  (12px)  — captions, badges
text-sm   = 0.875rem (14px)  — secondary text, labels
text-base = 1rem     (16px)  — body text
text-lg   = 1.125rem (18px)  — lead paragraphs
text-xl   = 1.25rem  (20px)  — small headings
text-2xl  = 1.5rem   (24px)  — section headings
text-3xl  = 1.875rem (30px)  — page titles
text-4xl  = 2.25rem  (36px)  — hero headings
text-5xl  = 3rem     (48px)  — display

Avoid em units for scale—they compound when nested.

text-xs   = 0.75rem  (12px)  — 说明文字、徽章
text-sm   = 0.875rem (14px)  — 次要文本、标签
text-base = 1rem     (16px)  — 正文文本
text-lg   = 1.125rem (18px)  — 引导段落
text-xl   = 1.25rem  (20px)  — 小标题
text-2xl  = 1.5rem   (24px)  — 章节标题
text-3xl  = 1.875rem (30px)  — 页面标题
text-4xl  = 2.25rem  (36px)  — Hero区域标题
text-5xl  = 3rem     (48px)  — 展示性标题

避免使用em单位来定义字体比例——嵌套时会产生复合缩放问题。

Use Good Fonts

选择优质字体

Safe default: System font stack or neutral sans-serif
Quality indicator: Fonts with 5+ weights are usually better crafted
Don't use headline fonts for body text — they have tight letter-spacing and short x-height

安全默认选项：系统字体栈或中性无衬线体
品质判断标准：拥有5种以上字重的字体通常制作更精良
不要用标题字体做正文——它们的字距紧凑，x高度较小

Line Length: 45-75 Characters

行长度：45-75个字符

html

<p class="max-w-prose">...</p>  <!-- 65ch, optimal -->

Wide images with narrow text is fine—different elements can have different widths.

html

<p class="max-w-prose">...</p>  <!-- 65ch，最优长度 -->

宽图片搭配窄文本是可行的——不同元素可以有不同的宽度。

Line-Height Is Proportional

行高要与字号成比例

Small text (14-16px): needs more line-height (leading-relaxed, 1.625)
Large headings (36px+): needs less (leading-tight, 1.25)

Also: longer lines need more line-height. Eyes travel farther.

小文本（14-16px）：需要更大的行高（leading-relaxed，1.625）
大标题（36px+）：需要更小的行高（leading-tight，1.25）

此外：行越长，需要的行高越大。眼睛移动的距离更远。

Align Mixed Sizes by Baseline

按基线对齐不同大小的文本

html

<div class="flex items-baseline">  <!-- not items-center -->
  <span class="text-2xl">$49</span>
  <span class="text-sm text-slate-500">/month</span>
</div>

html

<div class="flex items-baseline">  <!-- 不要用items-center -->
  <span class="text-2xl">$49</span>
  <span class="text-sm text-slate-500">/month</span>
</div>

Don't Center Long Text

长文本不要居中对齐

Center-alignment works for headlines and short blocks. Anything over 2-3 lines should be left-aligned. If one block in a centered group is too long, rewrite it shorter.

居中对齐适合标题和短文本块。超过2-3行的文本应该左对齐。如果居中组中有一个文本块太长，就把它改短。

Right-Align Numbers in Tables

表格中的数字右对齐

Decimals line up, making comparison easy.

小数点会自动对齐，便于比较。

Letter-Spacing

字距调整

Tighten headlines:
```
tracking-tight
```
for large text
Loosen all-caps:
```
tracking-wide
```
for uppercase text

收紧标题字距：大文本使用
```
tracking-tight
```
放宽全大写文本的字距：大写文本使用
```
tracking-wide
```

Not Every Link Needs a Color

并非所有链接都需要颜色

In link-heavy interfaces (navs, lists), colored links are overbearing:

html

<a class="font-medium hover:underline">Link</a>  <!-- no special color -->

Reserve blue/underline for links in prose.

在链接密集的界面（导航栏、列表）中，带颜色的链接会显得过于突兀：

html

<a class="font-medium hover:underline">Link</a>  <!-- 不使用特殊颜色 -->

将蓝色/下划线样式保留给正文中的链接。

5. Color

5. 色彩设计

Use HSL (or oklch)

使用HSL（或oklch）色彩模式

HSL makes relationships visible. Hex codes like #5C6AC4 and #14B8A6 look unrelated even if they're from the same palette.

Tailwind 4 uses oklch for wider gamut colors.

HSL能清晰展示色彩之间的关系。像#5C6AC4和#14B8A6这样的十六进制代码，即使来自同一调色板，看起来也毫无关联。

Tailwind 4 使用oklch模式来实现更宽的色域。

You Need More Colors Than You Think

你需要的色彩比想象中更多

Real palette needs:

Greys: 8-10 shades (text, backgrounds, borders)
Primary: 5-10 shades (brand, CTAs, active states)
Accents: 5-10 shades each for semantic states:
- Red: errors, destructive, negative trends
- Yellow/Amber: warnings
- Green: success, positive trends

Total: potentially 100+ values across all colors.

实用的调色板需要：

灰色系：8-10个色调（文本、背景、边框）
主色调：5-10个色调（品牌色、CTA按钮、激活状态）
辅助色：每种语义状态5-10个色调：
- 红色：错误、破坏性操作、负面趋势
- 黄色/琥珀色：警告
- 绿色：成功、积极趋势

总计：所有颜色加起来可能有100+个取值。

Define Shades Upfront

提前定义色调

Don't use

lighten()

darken()

. Pick 9 shades (50-900) per color:

Pick base (500) — works as button background
Pick edges — darkest (900) for text, lightest (50/100) for tinted backgrounds
Fill gaps — 700, 300, then 800, 600, 400, 200

不要使用

lighten()

或

darken()

函数。为每种颜色选择9个色调（50-900）：

选择基础色调（500）——适合作为按钮背景
选择两端的色调——最暗的（900）用于文本，最亮的（50/100）用于浅色背景
填充中间的色调——先选700、300，再选800、600、400、200

Don't Let Lightness Kill Saturation

不要让亮度降低饱和度

At extremes (very light/dark), saturation impact weakens. Compensate by:

Increasing saturation for light/dark shades
Rotating hue toward brighter colors for light shades (toward yellow/cyan/magenta)
Rotating hue toward darker colors for dark shades (toward red/green/blue)

在极端情况下（极亮/极暗），饱和度的影响会减弱。可以通过以下方式弥补：

提高亮色调和暗色调的饱和度
亮色调向更明亮的色相偏移（黄色/青色/洋红）
暗色调向更深的色相偏移（红色/绿色/蓝色）

Greys Need Saturation

灰色也需要饱和度

Pure grey (0% saturation) feels lifeless. Tailwind provides:

Cool:
```
slate
```
(blue undertone)
Neutral:
```
gray
```
,
```
zinc
```
Warm:
```
stone
```
(slight warmth)

纯灰色（0%饱和度）会显得毫无生气。Tailwind提供了：

冷灰色：
```
slate
```
（偏蓝）
中性灰：
```
gray
```
、
```
zinc
```
暖灰色：
```
stone
```
（略带暖调）

Don't Use Grey Text on Colored Backgrounds

不要在有色背景上使用灰色文本

Grey text on white works because of reduced contrast. On colored backgrounds, pick a color with same hue but adjusted saturation/lightness:

html

<!-- Bad: washed out -->
<div class="bg-blue-600 text-blue-600/50">...</div>

<!-- Good: hand-picked -->
<div class="bg-blue-600 text-blue-200">...</div>

白色背景上的灰色文本之所以可行，是因为降低了对比度。在有色背景上，应选择同色相但调整了饱和度和亮度的颜色：

html

<!-- 错误：颜色发灰，对比度不足 -->
<div class="bg-blue-600 text-blue-600/50">...</div>

<!-- 正确：手动挑选的适配颜色 -->
<div class="bg-blue-600 text-blue-200">...</div>

Accessibility

可访问性

Normal text: 4.5:1 contrast minimum
Large text (18px+): 3:1 minimum

Flip the contrast when colored backgrounds are tricky:

html

<!-- Hard to get 4.5:1 -->
<span class="bg-blue-500 text-white">Badge</span>

<!-- Easier and less attention-grabbing -->
<span class="bg-blue-100 text-blue-800">Badge</span>

常规文本：最小对比度4.5:1
大文本（18px+）：最小对比度3:1

当有色背景难以满足对比度时，反转对比方式：

html

<!-- 难以达到4.5:1的对比度 -->
<span class="bg-blue-500 text-white">Badge</span>

<!-- 更容易实现，且不会过于醒目 -->
<span class="bg-blue-100 text-blue-800">Badge</span>

Don't Rely on Color Alone

不要仅依赖色彩传递信息

Colorblind users need secondary indicators:

html

<!-- Bad: color only -->
<span class="text-red-500">-12%</span>

<!-- Good: color + icon -->
<span class="text-red-500 flex items-center gap-1">
  <IconArrowDown class="size-4" /> -12%
</span>

色盲用户需要辅助标识：

html

<!-- 错误：仅用颜色 -->
<span class="text-red-500">-12%</span>

<!-- 正确：颜色+图标 -->
<span class="text-red-500 flex items-center gap-1">
  <IconArrowDown class="size-4" /> -12%
</span>

6. Depth & Shadows

6. 深度与阴影设计

Light Comes from Above

光源来自上方

Top edges catch light → slightly lighter
Bottom edges in shadow → slightly darker
Below elements → cast shadow

顶部边缘 受光 → 颜色稍浅
底部边缘 在阴影中 → 颜色稍深
元素下方 → 投射阴影

Raised Elements

凸起元素

html

<button class="bg-blue-500 shadow-md 
               border-t border-blue-400">  <!-- lighter top edge -->
  Button
</button>

Shadows below should be short offset, minimal blur (1-4px). Real shadows are sharp.

html

<button class="bg-blue-500 shadow-md 
               border-t border-blue-400">  <!-- 顶部边缘更亮 -->
  Button
</button>

元素下方的阴影应该偏移量小、模糊度低（1-4px）。真实的阴影是清晰的。

Inset Elements (inputs, wells)

内嵌元素（输入框、凹坑）

html

<input class="shadow-inner border-b border-white" />
<!-- shadow at top (blocked light), lighter bottom edge (catches light) -->

html

<input class="shadow-inner border-b border-white" />
<!-- 顶部有阴影（光线被遮挡），底部边缘更亮（受光） -->

Shadow Elevation System

阴影层级系统

Closer = larger shadow = more attention.

shadow-sm  — buttons at rest, subtle lift
shadow     — cards, default
shadow-md  — dropdowns, popovers
shadow-lg  — cards on hover, sticky headers
shadow-xl  — modals, dialogs
shadow-2xl — full-screen overlays

距离越近（视觉上）→ 阴影越大 → 越受关注。

shadow-sm  — 常态按钮，轻微凸起
shadow     — 卡片，默认层级
shadow-md  — 下拉菜单、弹出框
shadow-lg  — 悬停时的卡片、粘性头部
shadow-xl  — 模态框、对话框
shadow-2xl — 全屏遮罩层

Interactive Shadows

交互式阴影

html

<!-- Lift on grab -->
<div class="shadow-sm active:shadow-lg cursor-grab">Drag me</div>

<!-- Press on click -->
<button class="shadow-md active:shadow-sm">Click</button>

html

<!-- 拖拽时抬起 -->
<div class="shadow-sm active:shadow-lg cursor-grab">Drag me</div>

<!-- 点击时按下 -->
<button class="shadow-md active:shadow-sm">Click</button>

Two-Part Shadows

双层阴影

Professional shadows combine:

Large, soft: simulates direct light source
Small, tight: simulates ambient occlusion (where light can't reach)

At higher elevations, the small shadow fades.

专业的阴影由两部分组成：

大而柔和的阴影：模拟直射光源
小而清晰的阴影：模拟环境光遮蔽（光线无法到达的区域）

在更高层级的元素上，小阴影会逐渐消失。

Flat Design Can Have Depth

扁平化设计也能有深度

Without shadows, use color: lighter = closer, darker = further.

html

<!-- Raised card (lighter than background) -->
<div class="bg-white">Card</div>
<body class="bg-slate-100">

<!-- Inset well (darker than background) -->
<div class="bg-slate-200">Well</div>

Solid shadows work for flat aesthetics:

html

<div class="shadow-[0_4px_0_0_theme(colors.slate.300)]">Card</div>

没有阴影的话，可以用颜色来体现：颜色越浅→越靠前，颜色越深→越靠后。

html

<!-- 凸起的卡片（比背景浅） -->
<div class="bg-white">Card</div>
<body class="bg-slate-100">

<!-- 内嵌的凹坑（比背景深） -->
<div class="bg-slate-200">Well</div>

实心阴影适用于扁平化设计风格：

html

<div class="shadow-[0_4px_0_0_theme(colors.slate.300)]">Card</div>

Overlap to Create Layers

通过重叠创建层次感

Break elements out of their containers:

html

<section class="bg-slate-800 pb-16">Hero</section>
<div class="-mt-12 bg-white rounded-lg shadow-lg">Card overlaps hero</div>

When images overlap, add invisible border matching background to prevent clashing:

html

<div class="flex -space-x-3">
  <img class="ring-2 ring-white rounded-full" />
  <img class="ring-2 ring-white rounded-full" />
</div>

让元素突破容器的边界：

html

<section class="bg-slate-800 pb-16">Hero</section>
<div class="-mt-12 bg-white rounded-lg shadow-lg">Card overlaps hero</div>

当图片重叠时，添加与背景颜色一致的隐形边框以避免边缘冲突：

html

<div class="flex -space-x-3">
  <img class="ring-2 ring-white rounded-full" />
  <img class="ring-2 ring-white rounded-full" />
</div>

7. Images

7. 图片处理

Use Good Photos

使用高质量图片

Bad photos ruin good designs. Either hire a photographer or use quality stock (Unsplash). Never design with placeholders expecting to swap in phone photos later.

糟糕的图片会毁掉优秀的设计。要么聘请摄影师，要么使用高质量的图库（如Unsplash）。不要先用占位符设计，之后再换成手机拍摄的照片。

Text Over Images Needs Consistent Contrast

图片上的文本需要一致的对比度

Images have light and dark areas that compete with text. Solutions:

Overlay: Semi-transparent black/white layer
Lower contrast: Reduce image contrast, adjust brightness
Colorize: Desaturate + multiply blend with brand color
Text shadow: Large blur, no offset (like a glow)

html

<div class="relative">
  <img class="absolute inset-0" />
  <div class="absolute inset-0 bg-black/40"></div>  <!-- overlay -->
  <h1 class="relative text-white">Headline</h1>
</div>

图片有明暗区域，会与文本产生冲突。解决方案：

叠加层：半透明的黑色/白色图层
降低图片对比度：减少图片的对比度，调整亮度
色彩化处理：去饱和后与品牌色混合叠加
文本阴影：大模糊度、无偏移（类似发光效果）

html

<div class="relative">
  <img class="absolute inset-0" />
  <div class="absolute inset-0 bg-black/40"></div>  <!-- 叠加层 -->
  <h1 class="relative text-white">Headline</h1>
</div>

Respect Intended Sizes

尊重图片的原始尺寸

Don't scale 16-24px icons to 64px — they look chunky
Don't shrink full screenshots — text becomes illegible
Redraw favicons at 16px instead of shrinking logos

If icons are too small, wrap in a shape:

html

<div class="size-12 bg-blue-100 rounded-full flex items-center justify-center">
  <Icon class="size-5 text-blue-600" />
</div>

不要将16-24px的图标放大到64px——它们会显得粗糙
不要缩小完整的截图——文本会变得难以辨认
重新绘制16px的图标，而非缩小logo

如果图标太小，把它包裹在一个形状内：

html

<div class="size-12 bg-blue-100 rounded-full flex items-center justify-center">
  <Icon class="size-5 text-blue-600" />
</div>

User-Uploaded Content

用户上传的内容

You can't control quality. Protect your layout:

html

<!-- Force aspect ratio -->
<img class="aspect-square object-cover" />

<!-- Prevent background bleed -->
<img class="ring-1 ring-black/5" />

你无法控制其质量。要保护你的布局：

html

<!-- 强制固定宽高比 -->
<img class="aspect-square object-cover" />

<!-- 防止背景色溢出 -->
<img class="ring-1 ring-black/5" />

8. Finishing Touches

8. 收尾优化

Supercharge Defaults

优化默认样式

Replace bullets with icons (checkmarks, custom icons)
Promote quotation marks into large decorative elements
Style links with thick colored underlines
Use branded colors for checkboxes/radios

用图标替换项目符号（勾选标记、自定义图标）
将引号升级为大型装饰元素
为链接添加粗彩色下划线
为复选框/单选框使用品牌色

Add Color with Accent Borders

用彩色边框增添色彩

No graphic design skills? Add colored borders:

html

<div class="border-t-4 border-blue-500">Card</div>
<div class="border-l-4 border-amber-500">Alert</div>
<a class="border-b-2 border-blue-500">Active nav</a>

没有平面设计技巧？添加彩色边框即可：

html

<div class="border-t-4 border-blue-500">Card</div>
<div class="border-l-4 border-amber-500">Alert</div>
<a class="border-b-2 border-blue-500">Active nav</a>

Decorate Backgrounds

装饰背景

Change background color between sections
Use subtle gradients (hues within 30°)
Add faint repeating patterns
Place simple geometric shapes

Keep contrast low so nothing interferes with content.

不同区块使用不同的背景色
使用柔和的渐变（色相差在30°以内）
添加淡色重复图案
放置简单的几何形状

保持低对比度，避免干扰内容。

Don't Overlook Empty States

不要忽略空状态

Empty states are first impressions. Don't show:

[Filters that don't work]
No items yet.

Do show:

[Illustration]
Create your first project
Get started by adding something new.
[+ Add Project]

Hide UI that doesn't work yet. Use the space to encourage action.

空状态是用户的第一印象。不要显示：

[无法工作的筛选器]
暂无内容。

应该显示：

[插图]
创建你的第一个项目
点击下方开始添加内容。
[+ 添加项目]

隐藏暂时无法使用的UI。利用这个空间引导用户采取行动。

Use Fewer Borders

少用边框

Before adding a border, try:

Box shadow: More subtle separation
Different backgrounds: Adjacent elements with different colors
More spacing: Simply increase the gap

Borders are heavy. Use them as a last resort.

在添加边框之前，试试这些方法：

盒阴影：更微妙的分隔效果
不同的背景色：相邻元素使用不同颜色
增加间距：简单地扩大间隙

边框的视觉权重很高。把它作为最后的选择。

Think Outside the Box

打破常规思维

Dropdowns can have sections, columns, icons, images
Tables can combine columns, add hierarchy, use color
Radio buttons can be selectable cards
Forms can be multi-column

Don't accept that components must look the way you've always seen them.

下拉菜单可以分区块、多列、包含图标和图片
表格可以合并列、添加层级、使用色彩
单选按钮可以设计成可选择的卡片
表单可以设计成多列布局

不要认为组件必须是你见过的样子。

Reference Files

参考文件

For detailed code examples and edge cases:

references/code-examples.md — Full component examples (cards, forms, nav, tables, modals, heroes)
references/hierarchy.md — Emphasis, de-emphasis, labels, weight/contrast balance
references/spacing-layout.md — White space, spacing systems, grids, responsive sizing
references/typography.md — Type scale, font selection, line length/height, alignment
references/color.md — HSL/oklch, palette building, shade definition, accessibility
references/depth-shadows.md — Light source, elevation system, two-part shadows, overlapping layers
references/finishing-touches.md — Accent borders, empty states, background decoration, images

如需详细的代码示例和边缘情况处理方法：

references/code-examples.md — 完整的组件示例（卡片、表单、导航、表格、模态框、Hero区域）
references/hierarchy.md — 强调、弱化、标签、字重/对比度平衡
references/spacing-layout.md — 空白、间距系统、网格、响应式尺寸
references/typography.md — 字体比例、字体选择、行长度/行高、对齐方式
references/color.md — HSL/oklch、调色板构建、色调定义、可访问性
references/depth-shadows.md — 光源、层级系统、双层阴影、重叠图层
references/finishing-touches.md — 彩色边框、空状态、背景装饰、图片处理