僅在使用者明確選擇或已確認的專案配置指定此風格後，才使用此技能。對於未經解釋的新 UI 請求，請改用樣式選擇器（例如「選擇風格」），而非替使用者決定其品味。現有的品牌、無障礙規範與使用者覆寫設定的優先級高於以下所有範例。以下風格指南並不代表在風格選擇前即可開始 UI 編碼。
風格套件：瑞士／編輯排版
ID： swiss-editorial
特徵： 嚴謹的網格驅動字體階層、強烈的比例對比、結構性的細線分隔、編號索引，以及有意的留白。
這是一個風格套件，非強制預設值。僅在明確選擇或已確認的適用專案風格後才載入。專案指令可覆寫個別選項。保留無障礙性、實用性與品牌限制。字型為建議，非必要依賴。僅有黑色無襯線文字的樸素頁面不符合瑞士編輯排版風格。
適用情況與取捨
- 適用於： 高端設計工作室、建築刊物、編輯作品集、文化雜誌、年報、精品品牌敘事。
- 需謹慎： 快速步調的交易型操作工具，其中大量的顯示字體會拖慢重複的資料輸入。
- 參考方向：
- 經典蘇黎世國際風格： 清晰的紙白色背景（
#FFFFFF或#F7F7F7）、強烈的墨黑字體（#111111）、1px 結構性分隔線、編號索引（01、02）、以及單一的瑞士紅（#E3000F）點綴。 - 現代編輯克萊茵藍： 超潔淨的單色畫布，搭配國際克萊茵藍（
#002FA7）做為導航與主要操作上的高精度焦點強調色。
- 經典蘇黎世國際風格： 清晰的紙白色背景（
瑞士編輯保真度閘門 — 必做
在將 swiss-editorial 頁面標記為完成前，開啟的視窗必須明顯呈現為嚴謹、網格對齊的字體編輯作品。 若使用者選擇了此風格，而頁面僅為一般極簡風，缺乏戲劇性的比例對比與結構性線條，則為失敗。
成功的 swiss-editorial 實作需同時展現以下所有特徵：
- 極端的字體比例對比： 巨大的 grotesk 顯示級標題（桌面 48px–72px / 手機 32px–44px，緊湊字距）與有紀律的內文（16px，行高 1.55），以及追蹤處理的大寫區段標籤（
letter-spacing: 0.08em）之間存在果斷、不妥協的對比。 - 結構性的水平細線規則： 內容區塊、欄位邊界與中繼資料標題由清晰的 1px 實線規則（
border-top: 1px solid #111111）劃分，建立清晰的視覺層架。 - 編號區段階層： 在主要文章區塊上方或旁邊放置明確的編輯索引編號（
01、02、03），建立可快速掃視的視覺錨點。 - 嚴謹的多欄網格對齊： 佈局嚴格遵循桌面版 12 欄網格，並帶有寬敞的不對稱留白與邊距。內容絕不脫離網格錨定而鬆散浮動。
- 單色基底 + 1 個高衝擊信號強調色： 佈局嚴格保持單色（黑、米白、紙灰），並僅使用一個精心挑選的信號強調色（瑞士紅
#E3000F或克萊茵藍#002FA7），節制地應用於活躍連結、索引標籤或主要行動呼籲按鈕。
首次視窗測試： 在桌面截圖中，無需閱讀頁面標題，即能辨識出巨大的標題比例、1px 結構性分隔線、編號區段標記以及刻意的不對稱網格。若它看起來像標準的部落格模板，請提升字體比例與網格規則。
明確的瑞士編輯字體例外 — 必須有戲劇性比例
Swiss-editorial 特定覆寫： 針對「過大字型或空白」的通用反鬆散警告，在此不得被解釋為禁止使用大型顯示標題（48px–72px）或寬敞留白。在瑞士字體設計（Josef Müller-Brockmann、Max Bill）中，積極的留白與大膽的比例對比是主要的結構材料，用以取代裝飾性圖形或陰影。
- 允許的字體處理： 巨大顯示比例（最高 72px）、編號索引字體、細線結構邊框、大寫追蹤中繼資料、高衝擊單一強調色連結。
- 反鬆散邊界： 請勿在無編輯脈絡的情況下隨意貼上漂浮的引言，不要使用虛假的刊物期號，也不要使用會擠壓實際可讀內容的超大標題。
- 反鬆散解釋： 評估瑞士佈局時，應基於網格紀律、字體韻律與資訊清晰度，而非試圖用卡片填滿每個角落。能引導焦點的留白是正統的設計。
字型與字體
客觀的 grotesk 無襯線字體：Helvetica Neue、Neue Haas Grotesk、Arial、Inter 或系統無襯線字體。標題：桌面 48–72 px（字重 700–800，letter-spacing: -0.03em）；副標題：24–32 px；內文：16–18 px（行高 1.55–1.65）；索引數字與圖說：12–14 px 大寫（letter-spacing: 0.08em）。
色彩方向
- 淺色模式（清晰畫廊白紙）：
- 畫布底色： 紙白色（
#FFFFFF）或暖畫廊白（#FBFBFA）。 - 墨色／字體： 深黑曜石黑（
#111111）。 - 分隔線： 實色細線筆觸（
#111111或#D1D5DB）。 - 次要灰色： 編輯中性色（
#6B7280）。
- 畫布底色： 紙白色（
- 深色模式（戲劇性深色獨石）：
- 畫布底色： 黑曜石畫布（
#0D0D0D）。 - 墨色／字體： 骨白色顯示字體（
#F5F5F5）。 - 分隔線： 半透明白色細線規則（
rgba(255, 255, 255, 0.20)或#2A2A2A）。 - 次要灰色： 石灰色（
#9CA3AF）。
- 畫布底色： 黑曜石畫布（
- 單一信號強調色： 瑞士紅（淺色
#E3000F/ 深色#EF4444）或國際克萊茵藍（淺色#002FA7/ 深色#3B82F6）。 - 主題反轉規則： 在瑞士編輯風格中，深色／淺色模式是一種權威性的字體極性翻轉。在深色模式下，畫布為
#0D0D0D，字體為#F5F5F5。主要按鈕應乾淨地反轉（淺色模式：實心黑色區塊配白色文字；深色模式：實心白色區塊配黑色文字）。嚴格禁止在深色畫布上使用黑色文字，或在白色畫布上使用白色文字。
佈局與幾何
邊角為銳利直角（預設 0px 邊框半徑，最多 2px）；寬敞的外邊距；嚴格的 12 欄網格對齊。結構性的 1px 水平規則圍繞內容區塊。
表面、深度、紋理
表面完全平坦、無裝飾、墨色清晰。零陰影、零背景漸層、零模糊。深度完全透過字體比例、字重與空間並置來傳達。
元件結構與互動
- 編輯主要行動呼籲： 清晰的實心黑色區塊搭配白色字體，或帶有 2px 筆觸偏移的乾淨底線文字連結。
- 編號索引標籤： 小寫大寫標籤：
[ 01 / 建築 ]。 - 分隔線：
border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;。 - 表格化中繼資料： 由細線分隔符號分隔的兩欄式鍵值對。
動態
極簡、即時或 120–160 ms 的乾淨線性轉場。無彈簧彈跳、無浮動視差。專注於清晰的狀態變化。
可選 Anime.js v4 配方
- 動態決策： 滾動時的乾淨文字透明度淡入或水平規則展開。
- 起始持續時間： 140ms（0 = 立即）；根據任務與使用者偏好調整。
- 避免： 彈性動態、3D 旋轉、俏皮的搖晃。
- 依賴項： 預設使用 CSS／原生。僅在請求的互動合理時才使用 Anime.js v4。當有 Taste Engine
references/motion-engine.md時遵循之；獨立技能則遵循上述的減少動態與無裝飾循環原則。
UI 文案與微複製
有教養、簡潔且表達清晰。範例：「精選作品 2026」、「索引」、「閱讀文件」、「01 / 概覽」。避免口語俚語或熱情的銷售話術。
入門 Token（建議，非完整主題）
| Token | 淺色模式預設值 | 深色模式預設值 |
|---|---|---|
--taste-swiss-bg | #ffffff | #0d0d0d |
--taste-swiss-ink | #111111 | #f5f5f5 |
--taste-swiss-accent | #e3000f | #ef4444 |
--taste-swiss-muted | #6b7280 | #9ca3af |
--taste-swiss-rule | 1px solid #111111 | 1px solid rgba(255, 255, 255, 0.20) |
--taste-swiss-radius | 0px | 0px |
--taste-swiss-font-heading | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-font-body | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-motion-duration | 120ms | 120ms |
Token 代表一個方向，並非保證適用於每個調色板／平台的複製貼上。在專案層級定義 --taste-swiss-*，確保色彩對比，並透過主題 token 而非散落文字值來適應。
英雄區塊構成（完整首次視窗）
當有公開的作品集／登陸頁面／首頁／頁面包含英雄區塊時： 使用一個可見螢幕的頁首+英雄區塊組合。基準高度為 min-height: 100svh，並以 100vh 作為備用，僅在頁首處於正常文件流中時才減去實際頁首；讓英雄區塊能為無障礙性與短螢幕手機而展開。不要將此應用於私人儀表板或其他任務螢幕；使用者的直接覆寫設定優先。風格特定方向： 用一個權威的、巨大的顯示標題錨定開啟螢幕，配合清晰的區段編號，以及英雄敘述與主要導航之間的不對稱網格分割。留白必須感覺是刻意的且經過構圖，而非空無一物。若存在路由器的 references/hero-layout.md，請參考。獨立使用時遵循相同的響應式與反鬆散原則。
風格特定品質關卡
- 要： 驗證嚴格的 12 欄網格對齊；維持戲劇性的標題與內文比例；確保 1px 細線規則乾淨分隔區塊；保持強調色嚴格單一；驗證深色／淺色模式切換，使字體、畫布、細線規則與主要行動能乾淨翻轉且無色彩衝突（至少 4.5:1 對比）。
- 不要： 不要添加陰影、圓形泡泡或裝飾性漸層；不要用無意義的徽章晶片雜亂堆疊留白；避免在小標籤上使用低對比灰色文字；不要在深色黑曜石畫布上留下黑色字體。
- 確認桌面與手機的一致性；可見的鍵盤焦點（
:focus-visible）；載入、空白、禁用、錯誤與成功狀態；減少動態行為（prefers-reduced-motion）。 - 請勿將風格特定的假設注入不相關的專案中。當合併風格時，明確命名主要風格與借用的特徵。
通用反鬆散閘門（獨立）
每個元素都必須有其存在的價值。內容先於裝飾。不確定時不要裝飾。 不要發明餘額、指標、見證、使用者、標誌、核准／驗證／線上狀態、虛假活動或成功確認；改用誠實的空白／載入／錯誤狀態。僅在要求並明確標示時才可接受示範資料。
不要添加裝飾性的卡片內嵌卡片層級：巢狀表面必須代表不同的互動或資訊邊界。避免自動產生的 3 特徵網格、4 統計儀表板、虛假的英雄區塊聲明、無目的的圖表、徽章／晶片／圖示垃圾內容、不相關的裝飾藝術，以及僅為填滿視窗而存在的隨機循環。偏好使用字體、間距、對齊與分隔線進行分組。同等層級的項目需要有意的視覺平衡。
反鬆散文案寫作： 不使用通用的「釋放你的潛力」、「體驗未來」、「超載你的工作流程」、「無縫」等宣稱，或其翻譯版本。標題必須傳達實際內容，行動呼籲必須命名該行動，而空／錯誤／成功文字必須描述真實狀態與下一步。避免虛假緊迫感、捏造的數字、模糊的 AI 炒作、無謂的表情符號、以及無法存取的連續大寫區塊。應根據此風格與使用者的語言調整措辭，同時不改變事實。
主題與模式對比完整性： 當使用者要求深色或淺色模式（或建立主題切換器）時，背景與前景顏色必須在所有表面、文字、邊框、輸入欄位與語義徽章上同步翻轉。切勿在深色背景上留下黑色文字、在白色背景上留下白色文字，或使用難以閱讀的低對比狀態膠囊。所有狀態必須符合 WCAG AA 對比（內文／一般文字至少 4.5:1，大型標題與互動邊界至少 3:1）。
響應式與動態： 有目的地為行動裝置設計，檢查長標籤、焦點狀態與可存取的對比；不要為了時髦的佈局而裁剪文字。預設為靜態；使用動態來傳達有意義的互動，尊重減少動態的偏好，避免在沒有真實狀態的情況下使用彈跳／浮動／脈衝裝飾。
關鍵／高優先級問題會阻擋完成： 偽造的狀態／資料、損壞的動作、無法存取／被裁剪的控制項、誤導性的文案、主題對比衝突或嚴重的行動裝置失敗必須修正。報告實際驗證的內容；不要聲稱未執行的測試。
非美學否決權： 表達性的顏色、陰影、漸層、卡片佈局或裝飾性處理，當它們是所選美學的有意部分且通過可用性檢查時，都是合法的。不要默默地強制推行極簡主義。
反鬆散：風格特定
字體權威性，非通用極簡主義。
- 拒絕： 薄弱的標題、圍繞文字的裝飾性卡片包裝、多個競爭的強調色、低對比的小圖說、以及主題衝突（例如黑色字體停留在深色編輯畫布上）。
- 取而代之： 依賴比例對比、精確的欄位對齊、單一強調信號、以及同步的深淺極性反轉。
- 文案檢查： 文字必須讀起來像編輯出版物 — 表達清晰、結構化且有目的。
- 審計： 執行通用反鬆散的目的、真實性、巢狀表面、文案寫作、響應式…
…[已截斷翻譯]