一張介面可以有完整的卡片、按鈕和圖表，細看卻仍有幾處讓人分心：面板外框偏重、圖片邊緣忽然消失、數字更新時推擠文字，或是選單還在播放上一個動作。我想談的「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，仍會多出字元。圖中兩邊都啟用等寬數字，右側先保留三位數的寬度並靠右排列，後面的說明就能維持起點。
三位寬度是這個計數器的預期範圍。加入千分位、負號或更大的數值時，需要重新留空間；日期、倒數和百分比也各有自己的最長格式。我會讓數字在預留範圍內變化，周圍的文字和操作保持安定。
金額沿著小數點排列
同一欄金額若要快速比較，顯示精度、數字寬度與欄位方向需要一起決定。這張圖加入負數，把格式固定為兩位小數、使用等寬數字，再只改變金額的對齊方向。靠右後，小數點和個位數便能沿著同一條線排列。
單位放在獨立、較輕的欄位，與金額保持固定距離。這裡的小數點能對齊，是因為顯示精度相同；若同欄必須混用不同小數位數，就要再把整數與小數部分分欄安排。負號也要留在數值裡，不能為了對齊而省略。等寬數字只是起點，實際字型的字偶距仍可能影響排列；我會用同一組正負金額檢查，而不只看設定是否已開啟。
置中後，還要看可見的形狀
光學置中（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 把取捨和驗證留在工作流程裡，完成品質仍要由實際內容與操作來確認。
完整介面
最後，回到一個完整工作區。我喜歡的精細感，是細節彼此接得上，整體依然乾淨、安定。
