TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
毛玻璃、視差、輪播怎麼跟 AI 說？名稱後面要補的官方條件
跟 AI 指定網頁效果時，說對名稱只拿到外觀草稿：毛玻璃的文字要跨背景清楚、輪播要停得下來、跑馬燈對應的 marquee 元素已被 MDN 標為棄用。五種常見效果的機制與官方文件底線，整理成對照表與四步規格流程，AI 交回來的元件逐條驗收。
用 AI 摘要這篇文章：
「跑馬燈」大概是一般人最會講、也最容易出事的一個網頁效果名稱。容易出事的原因很具體：HTML 裡真的有一個叫 marquee 的元素，而 MDN 文件把它標為棄用（deprecated），明文寫著不建議使用，要做捲動文字應改用 CSS 動畫與 transform。你跟 AI 說「加個跑馬燈」而沒有補條件，成品會走哪條路，要打開原始碼才知道。
毛玻璃、視差捲動、輪播、新粗野主義面對的是同一種結構問題，只是沒這麼戲劇化。這五個名稱各對應一組真實的網頁機制，也各自綁著一份官方文件寫定的底線：自動輪播要有停止鈕、會動的東西要能暫停、毛玻璃的文字要跨背景都清楚、視差要留靜態版本。名稱讓 AI 知道你要哪一種外觀；條件才決定交回來的東西能不能上線。
這篇先把五個名稱的機制與官方底線整理成對照表，再走一遍把名稱升級成規格的流程。走完之後，你交給 AI 的是一段可以逐條驗收的指示，AI 交回來的是能對照檢查的元件。
先講清楚成功畫面：只動視覺層，其他原封不動
把效果名稱交給 AI 之前，先定義這次任務的成功畫面。具體來說是四件事：文案一個字都沒被改、排列順序沒被動、控制按鈕可以用鍵盤操作、動畫停得掉。缺任何一件，交回來的都只是看起來像的草稿，不是能放進網站的元件。
指示的格式固定成一個句子就夠：「區塊＋效果名稱（附英文）＋保留條件＋行為條件」。例如「只修改首頁的案例區塊，套用輪播（carousel），保留三則案例的文字與順序，提供上一張與下一張按鈕，不自動切換」。後面四節會把每個名稱的行為條件來源講清楚。
動手前有兩個前置。其一，一次只改一個區塊、套一種效果；整頁多種效果一起改，出問題時你分不清是哪一層造成的。其二，先把這個區塊現在做一份 HTML 與 CSS 複本（放進版本控制或另存檔案都行），效果改壞時退得回來。這份複本就是這次任務的退路。
常見的疑問是五種效果能不能一起用。跨區塊可以：案例區用輪播、導覽列用毛玻璃，兩邊互不干擾，驗收也各自獨立。同一個區塊就不要：內容又持續移動、又自動切換、表面又半透明，等於三種干擾疊在一起，出問題時你說不清是哪一個條件沒寫。
五種效果各在改什麼：機制與官方底線對照
| 名稱 | 改的維度 | 底層機制 | 官方文件寫定的底線 |
|---|---|---|---|
| 毛玻璃（glassmorphism） | 材質 | 半透明表面加背景模糊 | 文字會落在多種背景色上，對比要跨背景成立（NN/g） |
| 視差捲動（parallax scrolling） | 移動方式 | 前景與背景以不同速度捲動 | 載入與可讀性優先（NN/g）；開啟減少動態時提供靜態或降階版本（MDN） |
| 輪播（carousel） | 內容切換 | 一個區塊依序顯示多張投影片 | 自動旋轉必須可停，焦點進入即停（W3C） |
| 跑馬燈（marquee） | 持續移動 | 名稱對應已棄用的 marquee 元素 | 不用 marquee 元素，改 CSS 動畫並可暫停（MDN、WCAG） |
| 新粗野主義（neobrutalism） | 整體風格 | 高對比、方塊版面、粗框硬陰影 | 留白與層級撐住可用性，粗框只是表面（NN/g） |
挑名稱時看「改的維度」這一欄。毛玻璃和視差都可能讓畫面「有質感」，但一個改的是表面材質，一個改的是捲動時的移動方式；想改的維度不同，名稱就該換。拿實際場景套一次更清楚：首頁頂端的導覽列想壓在照片上又不擋閱讀，那是材質問題，答案是毛玻璃；首頁的宣傳大圖想讓遠山與標題以不同速度滑動，那是移動方式的問題，答案是視差。反過來，只跟 AI 說「來點復古感」或「框線要有個性」，拿到什麼都算它對，因為這種描述沒有對到任何一個可查文件的名稱。接著逐個看機制與底線。
毛玻璃由兩個旋鈕組成：透明度與背景模糊，對應的 CSS 是 backdrop-filter 這個屬性，它把元素後方的區域做模糊或變色處理，而元素本身要半透明才看得到效果（MDN）。NN/g 的整理點出最顯著的陷阱之一：半透明元件上的文字會落在多種背景色上，對比常常只在部分區域成立。它的三個實務建議直接可以抄進規格：文字與圖形要滿足對比要求、背景越複雜模糊要越強、並且要照顧「減少透明度」與「增加對比」這類系統設定，前者會把模糊最小化甚至移除，後者會直接把玻璃換成實色。文中推薦的檢查工具是在 Figma 用 WillowTree 的 Contrast 外掛，直接對漸層或複雜背景取樣算對比值；不裝外掛的話，瀏覽器開發工具看得到前景與背景色的落差，是替代方案。
視差捲動讓前景與背景以不同速度移動，製造深度感。它的底線最反直覺：NN/g 的實測報告發現，視差常伴隨載入變慢與難讀；使用者常常完全沒注意到效果，因為動的東西容易被聯想成廣告，手機上也可能被自己的手擋住；報告下了一個很不客氣的結論，最欣賞視差效果的往往就是設計師與開發者自己。被忽略本身未必有害，前提是內容不會跟著消失，但「花力氣做、沒人看見」這筆帳在規格階段就該算。同一篇也提醒，iOS 7 的工作切換動畫曾讓不少人出現暈眩與噁心，系統才加入「減少動態」設定。所以視差的規格要限定只有背景層移動、正文不跟著晃，並且在使用者開啟減少動態時給靜態版本。
輪播在一個區塊裡依序顯示多張投影片。W3C 的無障礙設計模式把義務寫得很死：要有上一張與下一張按鈕；會自動旋轉的輪播，必須有停止與重啟旋轉的按鈕；鍵盤焦點進入輪播時立即停止旋轉，而且不會自己恢復；滑鼠停留在輪播上時也要停止。還有一個容易漏的細節：停止鈕必須是輪播內第一個鍵盤停留點，讓需要的人一進區塊就找得到。常見的小圓點投影片選擇器是選配，上面的按鈕與停止鈕才是必要項。
跑馬燈的底線前面提過：marquee 元素已棄用，現代做法是用 CSS 動畫。另外兩條來自規範層：WCAG 2.2.2（A 級）要求自動開始、持續超過五秒、且與其他內容並行出現的移動、閃爍、捲動或自動更新資訊，都要能讓使用者暫停、停止或隱藏（動態本身是必要內容的場合除外）；MDN 對 prefers-reduced-motion 的說明則指出，放大與平移大物件的動畫可能是前庭失調者的誘發因素。所以跑馬燈的規格除了「不要用 marquee 元素」，還要加「可用暫停」與「減少動態時靜止」兩條。
新粗野主義是五個裡唯一整頁層級的風格：高對比、方塊版面、粗框、硬陰影、看起來刻意不修邊幅。NN/g 的定義說它是粗獸主義（brutalism）加上九零年代平面設計元素的演化；兩者的差別值得知道：粗獸主義網站像上個世紀的 Drudge Report，用最簡陋的 HTML 結構、等寬字標題與表格排版，追的是 CSS 出現之前的原始樣貌，新粗野主義則通常比它多彩而且整齊。值得注意的是它的最佳實踐沒有一條在講粗框：留白要足（邊距約 24 到 32px）、互動元素要能辨識（hover 底線、按下變色這類回饋）、層級要用字級與色彩強度保留，標題大約是內文兩倍。換句話說，這個風格能不能用，取決於約束它的條件，不是粗框下得多重。
把名稱寫成規格：從指定到驗收的四個動作
流程本身不複雜，難度在於每一步都要留下可核對的東西。
指定區塊與名稱。寫下「只修改某個具名區塊，套用某效果（附英文名）」。中英並列不是儀式：英文名是這些效果在文件與元件庫裡的通稱，寫了它，要找官方底線的人（或模型）都更容易指到同一份規格。驗證方式是把名稱拿回對照表，看「改的維度」欄位是不是你想動的那一個。
把官方條件抄成提示詞句子。上一節每個效果後面的文件底線，直接翻成白話條件。輪播抄 W3C 那四條；跑馬燈寫「不要使用 marquee 元素，以 CSS 動畫實作，提供暫停控制，使用者開啟減少動態時內容靜止」；毛玻璃寫「文字顏色要在最淺與最深兩段背景上都清楚可讀，做不到就加半透明底色」；視差寫「只有背景圖層移動，內文不隨捲動位移，並提供減少動態的靜態版本」；新粗野主義寫「只套用在列出的元素上，保留標題與內文的字級層級，互動元件要有 hover 與按下狀態」。驗證方式是每個條件句都要能指回一條文件或規範，指不回去的就是個人口味，標明是口味或刪掉。
寫下不能被動到的東西。「保留這個區塊的全部文字與排列順序，字級層級不變」，再列出具體不可動的元素（按鈕文字、圖說、連結網址）。這一步的驗收不在 AI 交付當下，而在之後：逐字比對，不是看起來像就算數。
交付後三輪驗收。手機寬度先看三件事：文字有沒有被裁掉、控制鈕能不能點、停掉動畫之後資訊是否完整。再用鍵盤走一次：Tab 進輪播應立即停止旋轉、按鈕都到得了。最後打開系統的減少動態設定看一次：會動的東西應該靜止，資訊一樣完整。三輪都過，這次修改才算完成；任何一輪不過，退回留存的複本，補條件再來。
拿兩個完整例子示範句子的長相。輪播版：「把首頁的三則案例排成輪播（carousel），一次顯示一則，不自動播放；提供有文字標籤的上一張與下一張按鈕；整個輪播可以用鍵盤操作完成，停止控制在鍵盤停留順序裡排最前面；三則案例的文字與圖說保持原樣。」毛玻璃版：「只調整導覽列的材質，套用毛玻璃（glassmorphism），以 backdrop-filter 實作背景模糊；連結文字與順序全部保留，文字顏色在頁面最淺與最深兩段背景上都要可讀，做不到就加一層半透明底色；使用者開啟減少透明度或增加對比時，改用實色背景。」
交付出問題時：六種症狀與對應修法
原始碼裡出現 marquee 標籤。表示規格漏了攔截條件，名稱被直譯成舊元素。補上「不要使用 marquee 元素」與暫停、減少動態兩條再出一次。
輪播滑鼠移上去不會停，Tab 進去還一直跳。表示 W3C 那組條件沒抄齊。把停止鈕、焦點即停、懸停即停三條補進規格，重新驗收鍵盤那輪。
毛玻璃卡片滑到深色照片上，文字就糊掉。表示對比只在一種背景上驗過。加深背景模糊，或加半透明底色與實色替代，然後在最淺與最深兩段背景各驗一次。
視差做完，手機捲動卡頓、內文跟著晃。表示沒限定移動層。規格改寫成只有背景圖層移動，並補上減少動態時的靜態版本；如果載入時間因此明顯變長，先問這個效果值不值得，NN/g 那篇報告會站在你這邊。
新粗野主義套完，按鈕看不出能不能點。表示風格條件壓過了互動條件。補 hover 底線或按下變色，並檢查標題與內文的字級差距還在。
文案被改寫了。表示保留條件沒寫，或寫了但沒逐字比對。退回複本，把「文字與排列順序不改」寫進規格，交付後逐字對照。
能不能上線，交給檢查清單回答
名稱加官方條件的組合，把「看起來像不像」換成「過不過」：每一次交付都可以對著清單打勾，而不是憑感覺決定要不要重來。
一次一個區塊、一種效果，通過手機與鍵盤兩輪驗收再換下一個，是這整套流程裡最值得守住的紀律。效果名稱的家譜還很長：新擬態（neumorphism）有線上產生器可以直接調參數；捲動驅動的進場動畫，交給 AI 前先定好動畫時間軸的規格寫法同樣適用；不想自己寫輪播，現成元件庫複製貼上也是一條路。共通的檢查法都一樣：它停得下來嗎？鍵盤走得到嗎？字還清楚嗎？
