一张界面可以有完整的卡片、按钮和图表，细看却仍有几处让人分心：面板外框偏重、图片边缘忽然消失、数字更新时推挤文字，或菜单还在播放上一个动作。我想谈的“AI 感”，就落在这些尚未打磨的关系里。
我偏好洁白、收敛，靠近才看得出层次的界面。轮廓要足以辨认，阴影贴近表面；文字、图标与留白有共同的节奏，操作反馈也能跟上手上的动作。精细感来自这些选择一起成立。
下面用原创图例逐项拆开。灰白是这组试样的配色，数值也只代表这次的取舍；图内尺寸以原始 CSS 像素为准，局部放大另标倍率。点击图片可以查看完整输出图，判断线条和文字分量时，仍要回到实际显示尺寸。
边界与厚度
让同一道轮廓变窄
我最在意的是：看得出面板从哪里开始，边缘却不要像一圈生硬的外框。这组试样把外轮廓交给 ring：用零模糊的外侧阴影沿着表面画一圈，再由其他阴影处理深度。它仍有利落的边，只是宽度与透明度可以独立调整，也不占布局空间。
这里的 hairline 指同一道 ring 的细化。第一张只把扩散值（spread）由 1 px 改成 0.5 px，暗色、12% 不透明度、底色与尺寸全部不变，也不加入深度阴影。窄了一半的轮廓，留下的重量跟着减少。
变窄之后，再决定要多清楚
线变窄后，可以稍微提高不透明度，补回辨识度。第二张固定 0.5 px，只比较 12% 与 18%；形状、填色与阴影保持一致。右边比较清楚，仍保留窄轮廓的特征。
我把 0.5 px、12% 的中性暗色 ring 当成这组实心表面的起点。18% 用来观察透明度补偿，不会直接套到所有组件；大面板、白色选中面与玻璃跨过的背景不同，需要的边界强度也不同。线宽减半，不代表透明度必须固定乘上某个倍数。
0.5 px 也要看用在哪里。border-width 会依设备像素对齐；box-shadow 的小数 spread 则可能通过部分像素覆盖呈现，两者不能当成同一种画法。这组试样的 WebKit 1× 检查里，0.25 px ring 在直边处没有画出可辨识的边，0.5 px 也有左右分量不均的情况。细化后仍要连同原尺寸、像素密度与缩放一起看。
沿着轮廓分配明暗
轮廓的分量也可以沿着形状改变。前面的 ring 整圈保持同样深浅，这里则把边缘对比（edge contrast）沿着形状分配，让某些位置稍微退后，另一些位置收得清楚。我偏好把这种差异留在窄边里，中央的表面仍然安静。
这组试样把边界宽度固定在 0.5 px。左侧整圈使用 12% 不透明度，右侧在 6% 到 18% 之间分布；表面填色、尺寸与背后图形都相同。浅色用暗轮廓，左上较淡、右下稍重，变化沿着直边与转角一起走。
这里用遮罩合成（mask compositing）挖空中央，只留下外侧窄环，让渐变沿着这个范围绘制。它承接前面 ring 确定外形的工作，并把明暗的分布交给渐变。背后斜向灰带仍以同样方式透过表面，边缘处理没有顺带把整张卡片盖深。
暗色试样改用亮轮廓，明暗方向也跟着反转：左上稍亮，往右下退淡，维持相同的进光暗示。我会连同底面一起看，让轮廓刚好交代形状，不沿整圈堆上一样重的亮线。
固定内容面仍可用均匀的淡 ring 稳住外形。方向性的变化比较适合少数需要材质暗示的浮动片；若每张卡片都强调同一个转角，边缘就会抢走内容的注意力。
轮廓确定形状，柔影交代距离
Ring 已经收住外形，深度阴影（depth shadow）就可以退后一点。这里另外放两层：近影偏移 1 px、模糊 2 px，以 −1 px 扩散值收窄；远影偏移 3 px、模糊 8 px，以 −3 px 扩散值限制范围。不透明度分别是 4% 与 2%。
近影交代接触，远影让暗部柔和退回底面。这段衰减（falloff）需要和 ring 一起看：如果下缘堆成一条深线，通常要调整近影的重量或范围；整圈发灰，则要检查远影有没有扩得太满。我偏好表面贴得住，边缘外侧很快恢复干净。
实心表面不再默认加一圈内缘光（inner light）。近白面板已经够亮，稍深的底槽若再叠白光，容易显出硬亮边。我会先用轮廓、底色和阴影把层次做好，把亮缘留给确实需要交代材质的局部。
暗色表面先靠明度站出来
换到暗色时，我会先把上层表面稍微提亮。图中的底面是 #171717，卡片是 #242424，再加 0.5 px、12% 白色 ring；黑色深度阴影独立放在下方。卡片的存在感先来自表面差异，细线再补出轮廓。
表面与包覆
相近的白，各有工作
表面层级（surface hierarchy）可以先从明度分工。这组亮色试样的画布是 #F7F7F7，外壳是几乎中性的 #F1F1F2，内容面是 #FCFCFC，白色留给部分操作面。色偏很少，差别也要连同露出的面积一起看：窄窄一圈灰和大片灰底，分量并不相同。
文字仍要有清楚的主次。名称、数字与当前选项用深色站稳，说明再退后一级。我喜欢表面安静，但不希望读取信息也需要仔细寻找。
让渐变慢慢接回平面
有些表面需要一点明暗过渡，我会看渐变如何开始、又如何回到底色。缓动渐变（eased gradient）调整的是空间里的变化速度：接近平面时慢一些，中间再加快，让起止的位置不那么容易被察觉。画面本身保持静止。
这组对照使用相同中性色，最大不透明度都是 16%，渐变范围都在面板的 20% 到 80% 之间。左侧以固定速度退到零，右侧采用缓动分布；两边都用 33 个色标，不透明度的积分也相同。差异来自明暗如何分布，整体分量没有一起减少。
图中的线性渐变接到平面时，变化速度突然停下；缓动分布则在附近逐渐放慢。暗色对照沿用相同关系，让微弱的亮度慢慢退回深灰。
这里用中间色标近似平滑函数，实际 CSS 仍在相邻色标之间线性插值。16% 是方便观察差异的试样取值；放回洁白界面，我会按面积降低分量，把它留给窄小的遮罩退场或材质过渡。这组比较只说明衰减的接点，没有把色标数量当成解决所有色带问题的方法。
窄缝与内容留白分开量
包覆感有两种内边距（padding）：外壳到面板的窄缝，以及面板到内容的留白。这里分别是 8 px 与 24 px。前者决定接缝有多紧，后者让标题和信息行舒展地排列。
外侧 ring 不占布局空间。面板仍放在 8 px 的布局内边距上，0.5 px ring 向外画进窄缝，所以直边处实际露出的外壳约为 7.5 px；内容的 24 px 则从面板表面边界起算，没有再扣一层实体边框。
圆角跟着同一圈距离走
这个等距例子的嵌套圆角（nested radii）是 R24、8 px 内边距与 R16。两个表面的圆心重合，窄缝转过角落时便能维持连续。这个相减关系限于图中的等距、没有实体边框的几何，不必当成所有容器的固定公式。
面板向外画 0.5 px ring，绘制外缘的半径是 R16.5；表面本身仍是 R16，内容也从原本的表面边界起算。测量布局与查看绘制范围时，要分清楚正在看哪一条边。
让弯曲程度也接回直边
半径决定转角占多大，接点还有另一件事值得看：直边进入曲线时，弯曲程度如何改变。圆弧可以与直线相切（tangent continuity），方向接得上，但直边的曲率是零，一进入圆弧就换成固定的弯曲程度。
曲率连续（curvature continuity）进一步处理这个变化。图右的三次贝塞尔曲线在接点把曲率降到零，让弯曲程度接回直边。两边固定相同外接尺寸、填色、笔画与 32 px 角落范围，观察的只有转角曲线。
这个 32 px 在两边代表的意义不同：左侧是 R32 圆弧，右侧只表示曲线从哪里开始转弯，没有单一圆心与固定半径。右侧是本试样的简化贝塞尔模型，若要放进嵌套容器，内外曲线之间的窄缝需要重新检查，不能直接沿用圆形半径相减的关系。
我会把它放回整个轮廓看。这组右侧虽然接得连续，弯曲也更集中，外观比圆弧更方；是否合适，仍要配合比例、留白和相邻组件判断。这里用它拆解接点，最后的完整工作区仍保留原本的圆弧转角。
图片的内缘收边
把一道淡轮廓覆在图片里
图片靠近外缘的内容，可能一边接近白色，另一边又很深。放进面板时，亮部容易与底色融在一起，暗部则自己形成一条强边。我喜欢用一道内缩轮廓（inset outline）把这些不同分量的边缘稍微收住。
这里把 1 px、10% 不透明度的纯黑轮廓叠在图片内侧，尺寸、裁切与圆角都不变。轮廓会与原本的像素叠合，亮部的变化比较容易看见；它交代的是图片的收口，外面仍可另外安排容器。
换到暗色容器，试样改用相同宽度与透明度的纯白轮廓，让靠边暗部有很薄的交界。两张图里使用相同的原创图像，方便把注意力留在边缘。
图片本身用 R12，周围 8 px 的底由 R20 容器包住。内缩轮廓画在已经裁好的图片里，不占额外空间；外部容器的间距则照原来的排版计算。这种处理比较适合有完整矩形边界的照片、截图和图像。透明标志与不规则插画，可以让原有轮廓保留呼吸空间。
头像重叠，先看省下多少空间
多位参与者放在一起，可以排开，也可以局部重叠。头像群组（avatar group）交代有哪些人，头像堆叠（avatar stack）则用重叠缩短整组占用的宽度。我会在紧密的信息行里使用堆叠；需要逐一辨认每张脸时，分开排列与姓名可以留更多空间。
这组用三张原创虚构人像比较：圆形框体都是 32 px，左侧相邻间距 6 px，右侧重叠 8 px。照片、裁切、图片内缘与 2 px 外侧分隔圈全部固定，两组也从展示区域里的相同位置开始，垂直中心一致。
三颗的布局宽度因此从 108 px 缩到 80 px。外侧分隔圈不占布局空间，但会在左右两端各多画 2 px，所以绘制范围分别是 112 px 与 84 px。这些数字限于本图的三颗等尺寸圆形与无实体边框配置，放进容器时仍要留意外圈是否被裁掉。
暗色版本沿用相同排列，只让边缘配合所在表面。这是用来拆解排列的概念对照；最后工作区本来就使用堆叠，仍维持 22 px 头像与 5 px 重叠，没有为了示范把整列撑大。
外侧分隔与图片内缘，各做一件事
重叠之后，两张照片容易在交界处黏成一块。外侧的分隔圈（separation ring）用所在表面的不透明颜色，遮开交叠的位置，留出可辨认的空隙。它不负责垫高头像；我会让这圈空隙融回承载面，交叠处仍看得出各自的圆弧。
这也是分隔圈需要跟着状态改变的原因。白色卡片、已选中的数据行与暗色表面，底色各不相同；固定白圈放到暗面，就会多出一圈不属于背景的亮边。碰到透明或图案背景，单一颜色无法还原下面的内容，需要真正的遮罩挖空，或改成不重叠排列。这组操作试样在图案底选择排开。
照片内侧则沿用前面的内缩轮廓，用图片内缘线（image inner stroke）修整照片本身。下方两组固定同样的堆叠与外圈，亮色只比较有无 1 px、10% 纯黑内缘。细线覆在已裁好的照片上方，没有缩小图片，也没有把外圈加粗。
暗色的内缘对照改用 1 px、8% 白色。这里用圆形容器上的装饰层覆到照片前方；直接把内阴影放在不透明图片背后，未必能看到同样的效果。我喜欢让这条线只在靠近边缘时被察觉，中央的脸和裁切维持原样。
人数多时，留下可用的入口
可见头像和真实人数也要分开安排。这组原型预留四个位置，七人时显示三颗加 +4，四人时就是四颗；照片加载失败，缩写或默认图形仍占相同尺寸。数字与图片都不应让圆形忽然变大。
需要查看完整名单时，我会让整组头像开启参与者清单，让姓名在有空间的地方读清楚。重叠的小圆形若各自扩成点击范围，容易盖住彼此；清单里再安排分开的操作行，键盘开启、关闭与焦点返回也比较明确。可以在操作试样切换表面、排列、人数与图片失败状态，分别观察外圈和内缘的工作。
文字、数字与光学对齐
让换行也参与构图
标题的最后一行只留下很短的词，下面的留白就容易偏向一边。平衡换行（balanced wrapping）会在既定宽度里重新分配文字，让几行的分量更接近。这组对照固定 220 px 行宽、文案、字号与字距，只改变换行方式。
短说明的问题稍有不同：我会保留自然的阅读长短，同时留意末行是否过于孤单。优化换行（pretty wrapping）让浏览器有机会重新安排断点，减少只剩一小段的尾行。图中的文字和行宽也完全相同。
这些选择需要连同实际文案一起看。标题有自己的语意停顿，短文也有适合的阅读宽度；英文单字与繁体中文标点的断行条件不同，浏览器的结果也可能不同。我会先让容器有合理的伸缩空间，再检查窄屏幕和较长译文，最后决定是否采用平衡或优化换行。
数字更新时，每一位先站稳
计时器从 11:11 换成 08:08，如果字形宽度不同，整串数字就会改变分量。等宽数字（tabular figures）让每一位占相同宽度，适合用在会更新的数值、计数器与需要扫读的数字列。
这里两边都用 Geist，字号和内容相同，只有数字功能从比例宽度换成等宽。图内的小字标注使用另一套等宽字体，主要数字则保持同一字体比较。
位数会增加，空间也要先安排
等宽数字稳住了每一位，从 9 到 99、再到 100，仍会多出字符。图中两边都启用等宽数字，右侧先保留三位数的宽度并靠右排列，后面的说明就能维持起点。
三位宽度是这个计数器的预期范围。加入千分位、负号或更大的数值时，需要重新留空间；日期、倒数和百分比也各有自己的最长格式。我会让数字在预留范围内变化，周围的文字和操作保持安定。
金额沿着小数点排列
同一列金额若要快速比较，显示精度、数字宽度与对齐方向需要一起决定。这张图加入负数，把格式固定为两位小数、使用等宽数字，再只改变金额的对齐方向。靠右后，小数点和个位数便能沿着同一条线排列。
单位放在独立、视觉分量较轻的一列，与金额保持固定距离。这里的小数点能对齐，是因为显示精度相同；若同一列必须混用不同小数位数，就要再把整数与小数部分分列安排。负号也要留在数值里，不能为了对齐而省略。等宽数字只是起点，实际字体的字偶距（kerning）仍可能影响排列；我会用同一组正负金额检查，而不只看设置是否已开启。
居中后，还要看可见的形状
光学居中（optical centering）处理的是可见形状的重量。右指三角形的面积偏向左侧，即使外接框居中，仍可能看起来偏左。这里固定按钮，只把同一个图形向右移 1 px；这个取值属于图中的三角形，其他图标需要重新看。
文本框居中后，再看字面高低
文字的布局范围包含字体预留的上下空间，可见的字面只占其中一部分。按钮用弹性布局居中后，文字仍可能看起来略高或略低。图中同样的 Save、同样的字体与行高，左侧保留文本框，右侧沿大写字母高度与基线修整上下边缘，再放入同样高的按钮。
文本框修剪（text-box trimming）让这种空间可以按字体边缘处理。图里的细角标与中线用来看清差异；实际选择仍要检查字母的上伸、下伸和旁边的图标。繁体中文、假名与韩文需要按各自字体的字面重新判断，英文的 cap／baseline 取值不能直接代替所有语言的光学居中。不支持修整的环境仍保留原来的文本框布局。
图标侧的留白，按可见分量微调
文字加上一个箭头后，箭头周围的空白也会参与整组内容的分量。这里固定文字、图形、间隔与上下内边距，只把图标侧的水平内边距从 16 px 改为 14 px，让组合稍微收紧。
2 px 是这个箭头与字样的调整量。换成填满的图标、另一套字体，或把图标移到文字前面，都要回到整组外形看。图标若在自己的画布里已经偏移，先修正图稿本身，按钮就能少一层补偿。
小图标重新判断线宽
笔画粗细（stroke weight）也不能只跟着整个图标缩小。这个 14 px 文件夹，左侧将 24 px 源稿的 1.5 px 线宽按比例缩成 0.875 px，右侧校正为 1.25 px。图形尺寸不变，调的是最终笔画。
我会在实际尺寸下，把线帽、转角、内部留白和旁边的文字一起看。这个图标需要的分量，未必适用另一个更密的形状。
小标签也有自己的字距
全大写英文标签常和数字、标题贴得很近。字母挤在一起时，小字可能变成偏重的一整块形状；略微拉开字距（tracking），则能让它保持清楚的节奏。
这组固定 10 px、500 字重、同一条大写标签，只比较 0 与 0.05 em 字距。下方内容、标签与内容的间距都不变。
我会连同字号、字重、文字长度一起判断。这里的大写标签适合留一点空气，繁体中文小标题与普通正文则有不同的字面密度；每个角色都需要自己的分量，整篇文字的层级仍要维持简单。
间距、组件与状态
让信息沿着共同起点排列
间距节奏（spacing rhythm）来自重复的关系。图中行高 64 px、图标与文字间距 12 px、面板内边距 24 px；名称、说明与分隔线共用文字起点，图标留在自己的区域。表头则先对齐整组内容的起点，交代列范围。
组内靠近，组间留出停顿
共同起点让内容整齐，接近性（proximity）则让人看出关系。这里两组导航保留相同的文字、行高与组内 8 px 间距，只把组间距离由 8 px 拉到 24 px。Workspace 和 Personal 的分组因此更容易读出来。
24 px 是这组内容的停顿，没有必要套到每一段导航。工作区可以紧密，组别仍要辨认得出；分隔线若需要出现，也应沿着内容起点安排。我会先让间距承担关系，再决定哪里还需要一条线。
底槽与选中面一起成立
分段控制器（segmented control）的底槽保持连续，白色选中面则用自己的 ring 与短影指出当前位置。这组试样让底槽只有很淡的内阴影，白片沿用前面的轮廓与两层深度，不再另加内缘光。
底槽 R14、内边距 4 px，选中面 R10。和大面板一样，4 px 是布局距离，0.5 px ring 向外画后，直边处露出的灰底约为 3.5 px。我喜欢这种装入零件的感觉，但不需要把选中面垫得很高。
同一组操作，只留一道接缝
共用接缝（shared seam）用一个外形包住日期与箭头，内部只放一道 1 px 分隔线，避免两个独立轮廓在相接处叠深。这条线从框体上下各退 8 px，端点略圆；它只分开操作区，不必一路顶到外框。
按下时，内容不跟着跳
持续的选中状态与短暂的按压状态（pressed state）有不同工作。选中指出当前位置，按压回应当下的动作。图中按下时把外侧深度换成淡内影，白色略降到 #F5F5F5；ring、图标、文字和整个组件的尺寸都不变。
进度槽也有包覆关系
浅槽（recessed track）把同样的关系缩小：高 6 px、R3 的外槽，留 1 px 内边距，放入高 4 px、R2 的填色。75% 依扣除内边距后的可用宽度计算，端点周围仍保留一圈底色。
这里只在槽的内侧上缘留短暗影，填色上缘保留很弱的材质亮度。它的作用局限在几个像素的零件里，不沿用成所有实心面板的白色内光。
小图标保留容易操作的范围
可见图标的大小，和点击范围（hit area）可以分开安排。图中的关闭符号维持 16 × 16 px，按钮范围则是 44 × 44 px，让手指与指针都有足够的落点。辅助框只在图解里显示。
44 px 是这个试样的选择。放进密集工具栏时，还要一起检查相邻操作的距离与点击范围，避免互相重叠。图标可以小，周围仍要有合理的操作空间。
焦点要能从安静的表面里站出来
键盘焦点（keyboard focus）指出现在操作哪个组件，分量要足以辨认。这组按钮维持同样的 ring、填色与尺寸，右侧另加 2 px 轮廓，与按钮相隔 3 px。表面的细边继续交代形状，焦点则清楚标出位置。
我喜欢低调的表面，也希望操作位置一眼可见。焦点轮廓需要连同周围的底色检查，并留意面板裁切与相邻控制器；选中、按压和焦点各有工作，可以同时成立。
动态反馈
状态切换时，让图标轻柔衔接
从保存变成已保存，图标与文字一起交代结果。这个交叉淡化（cross-fade）只改变两个图标的透明度，两者放在同一格里，按钮宽度与文字位置都保持固定。左侧直接替换，右侧用 150 ms 的 ease-out 衔接；按下任一示范按钮，两边会切到同一状态。
我偏好把这种小动态留给偶尔发生的状态转换。频繁切换的标签页、逐行出现的操作，需要更直接的反应；文字或图标本身也要能清楚表示当前状态。按压反馈沿用前面的表面明暗与阴影，内容留在原位。
动作还没走完，也能接住下一次操作
面板还没展开，手上就可能已经按下收起。可中断的过渡（interruptible transition）能从当下的位置转向新状态，连续操作时就比较连贯。下面两边的距离、200 ms 时长和缓动相同；左侧每次从指定起点重新播放，右侧由当下的位置接往新的终点。
可以在过程中快速切换，观察面板有没有突然换位。这组用 CSS transition 跟随状态；时间轴动画也能通过额外的播放控制处理中断，重点在实际操作能否接续。示范停用动态时仍保留状态文字与静态前后对照。
让进退场符合使用时机
首次呈现可以按标题、说明与操作分组，让阅读顺序稍微展开。退出时则降低位移与时间的分量，把注意力交给接下来的内容。我会把这种节奏留给适合停下来看的时刻，日常开关与重复操作保持直接。
减少动态偏好开启时，位移会收起，状态依然清楚。这两组互动都由操作触发，首次加载就停在初始状态，阅读时可以自行决定何时比较。
材质交界
让玻璃有具体的位置
我把少量玻璃感留给浮动工具：72% 不透明度的近白填色、10 px 背景模糊（backdrop blur），加上清楚的前景文字与图标。工具栏跨过容器下缘，底下的明暗才能透出；位置避开主要数据行，材质也有了实际的交界。
玻璃用 0.5 px、6% 中性暗色 ring 收住轮廓，内侧只留柔化的微光。下方三层淡影从接触处接到 24 px 模糊的外围，让悬浮感向外散开。这里的 ring 比实心组件更淡，透明表面已经会借用背景明暗，不需要再加一圈深边。
我会用它真正跨过的背景检查：全白底可能只剩轮廓，底下太繁杂又可能干扰文字。这组示意只呈现透光与柔化，不模拟真正的折射。
把这套做法整理成 Master Design
我把文中这些讲究整理成了 Master Design，一个可以安装到 AI 编辑工具的设计 skill。边界、几何、图片、文字、间距、状态、动态与材质按主题加载；每项都交代可见问题、处理机制、适用条件和检查方式。Repo 也保留原创图解的制图源文件与可操作示例，方便对照实际效果。
使用时，默认延续项目原有的品牌、字体、框架与密度。想沿用这篇洁白、收敛的处理，可以明确指定 Aron preferences；半像素轮廓和阴影取值仍是试样，需要回到实际画面判断。
npx skills add master-co/design --skill master-design安装后，可以请工具“使用 $master-design 精修这个界面，保留现有品牌与密度，实现并检查受影响的状态”。Skill 把取舍和验证留在工作流程里，完成质量仍要由实际内容与操作来确认。
完整界面
最后，回到一个完整工作区。我喜欢的精细感，是细节彼此接得上，整体依然干净、安定。
