深度与打磨（阴影 / 圆角 / 精修）

页面骨架对了之后，差的是这一层：阴影让元素浮起来、图片不糊、收尾干净。这张卡里每一招都真实渲染出来。你不用懂代码，照着对比就能告诉 Agent 该往哪调，也能看出它做得到不到位。

1. 制造深度（Creating Depth）

模拟一个光源

所有"立体"的错觉，都来自假装光从上方照下来：

• 凸起的元素（raised）：顶边更亮（被光照到），底边更暗（下面有阴影），下方有投影。
• 凹陷的元素（recessed / inset）：顶边有阴影（光被挡住），底边更亮，和凸起正好相反。
• 手法：顶部高光用 box-shadow: inset 0 1px 0 rgba(255,255,255,.1)，底部暗边用 box-shadow: inset 0 -1px 0 rgba(0,0,0,.1)。
• 幅度别太大。细微才自然，目标是"像被光照到"，不是"像 3D 渲染出来的"。

用阴影表达"高度"（Elevation）

阴影告诉用户这个元素离自己多近。元素越高，阴影越大、越散。

开工前定一套 5 级阴影系统（从轻到重），之后从里面挑：

随交互变化的阴影：元素被拖起来时阴影变大（升高了），被按下去时阴影变小（往下压）。

一个阴影，可以分两层

只用一个阴影，常常显得平、假。两层叠加会真实得多：

• 环境光阴影（ambient）：大、软、很散、很淡，0 10px 40px rgba(0,0,0,.06)
• 直接光阴影（direct）：小、利落、几乎不糊，0 2px 4px rgba(0,0,0,.12)

扁平设计也能有深度

扁平（flat）不等于没有层次。不用模糊的阴影，也能分出前后：

• 靠颜色：浅色显得往前飘，深色往后退。浅底上放一块稍深的面板。
• 实心硬阴影：短、边缘清晰、不模糊，保留扁平味，box-shadow: 2px 2px 0 rgba(0,0,0,.1)
• 背景分层：叠几块明度略不同的底色，不用任何阴影也有层次。

用"重叠"制造层次

一个简单的手法：让元素跨越区块边界。

• 让卡片 / 图片压在两个区块的交界上（一半在深色区、一半在浅色区）。
• 故意让某个元素"探出"它的容器。
• 重叠图片时，加一圈和背景同色的"隐形边框"（其实就是 padding），让它和后面的东西分得清。

2. 用好图片（Working with Images）

用好照片

差照片会拖垮再好的布局。

• 拍不出专业照片，就用高质量图库（如 Unsplash、Pexels（链接以课程资源页为准，注意核对授权））。
• 别用占位图先凑、想着"以后再换"，很可能一直没换。
• 一张好插画，好过一张平庸的照片。
• 图片是主角的产品（电商、作品集、落地页），值得在摄影上花钱。

图片上的文字，要保证对比一致

照片明暗不均，文字盖上去时好时坏。五种常用做法：

1. 半透明遮罩：文字下面压一层深色或品牌色，background: rgba(0,0,0,.4)
2. 降低图片对比度，让文字跳出来。
3. 给图片上色：用品牌色做混合，统一明暗。
4. 文字加阴影：text-shadow: 0 2px 4px rgba(0,0,0,.5)
5. 渐变蒙版（scrim）：底部从透明渐变到深色，文字放进深色区。

每样东西都有"它本来的尺寸"

• 别放大小图标：会糊、会毛边。用对应尺寸的图标，或把小图标放进一个带底色的大容器里。
• 别缩小截图：里面的字会看不清。该裁出相关那一块，而不是整张缩。
• 别把大插画塞成缩略图：细节会丢光。小尺寸就换更简单的图形。
• 网站图标（favicon）、App 图标、大展示图，各自单独设计。

当心"用户自己上传的内容"

用户传的图没法预测，尺寸、清晰度、长宽比各不相同：

• 用固定尺寸容器 + object-fit: cover，保证布局整齐。
• 居中裁切，而不是拉伸变形。
• 加一圈淡淡的内阴影或边框，免得浅色图和白底糊成一片，box-shadow: inset 0 0 0 1px rgba(0,0,0,.1)
• 给"没有图"准备兜底状态：彩色首字母、默认头像、占位插画。

3. 收尾打磨（Finishing Touches & Polish）

改造浏览器默认样式

对浏览器默认元素做点小改造，整体就显得用心：

• 圆点改语境图标：功能项用"对勾"、安全项用"锁"、步骤用"箭头"，替掉千篇一律的小圆点。
• 引用块改设计过的引用：放大引号、给颜色、换字体风格。
• 链接改设计过的下划线：用更粗的彩色下划线，略微压在文字底部。
• 表单改品牌化输入：勾选框、单选钮用品牌色自定义，别用浏览器默认样子。

链接下划线对照：

用"强调色边框"加色彩

最省力的提色手法之一，几乎没有设计门槛：

• 卡片顶部：3 到 4px 的彩色顶边，能让一个普通矩形显眼起来。
• 当前导航：给选中项加左边或底边的彩色边。
• 提示 / 通知：彩色左边框区分信息（蓝）、成功（绿）、警告（黄）、错误（红）。
• 页面顶条：页面最顶上一条细细的彩色条。

给背景加层次

大片纯色背景容易显闷。几个快速改法（前提：不压过文字可读性）：

• 渐变背景：用两种相近的颜色（别差太多），做出微妙深浅。
• 重复图案：低透明度的细几何纹理（可试 Hero Patterns（链接以课程资源页为准，注意核对授权））。
• 简单几何形：圆、色块、抽象形状，用稍不同的色调。
• 品牌插画元素：地图、地形、产品相关插画，淡淡地铺在背景里。

别忽略"空状态"（Empty States）

"你还没有任何订单"这种空页面，也是用户会看到的真实界面：

• 别直接摆一张空表格或空列表，看起来像坏了。
• 放一个插画或图标，传达"这里暂时还没东西"。
• 给一个明确的下一步按钮："创建第一个订单"。
• 把此刻没意义的控件藏起来（比如没数据时别显示筛选下拉）。

少用边框（Use Fewer Borders）

边框常被用得过多，用多了会显得乱。更好的分隔方式：

1. 用阴影：一道淡阴影分隔得比硬边框温柔，box-shadow: 0 1px 3px rgba(0,0,0,.1)
2. 用背景色差：相邻区块用略不同的底色。
3. 用留白：足够的空白本身就是清晰的分隔。

只有别的招都不够时才用边框（比如挤在一起的表格单元格之间）。

重做标准组件

标准组件常常可以换个做法，别每次都用最朴素的那一版：

• 下拉框改带说明的卡片：把选项做成带图标、标题、描述的卡片。
• 单选钮改可选卡片：用视觉卡片当单选，靠颜色或边框表示"选中"。
• 表格改卡片列表：手机上或数据量小时，卡片比表格更好扫读。
• 朴素列表改视觉网格：加缩略图、状态标签、进度条，让列表更好看也更好读。

卡住或拿不准，就把页面截图发给你的 AI 老师（你的 Agent，默认 OpenCode + DeepSeek），问"按'深度与打磨'原则，这页还差哪一步？"