請僅在使用者明確選擇此風格、或確認的專案設定指定它時，才使用此技能。對於未經說明的全新 UI 請求，請改用樣式選擇器，而非在此代替使用者決定其品味。現有的品牌、無障礙和使用者覆寫規則，優先於下列所有範例。以下風格指南並非在樣式選擇之前就允許開始 UI 編碼。
風格套件：復古終端機 (Retro Terminal)
ID： retro-terminal
標誌： 真實的 CRT 開發者主控台視覺語言，螢光輝光、等寬表格結構，以及現代的鍵盤驅動實用性。
這是一個風格套件，並非強制性的預設值。請僅在明確選擇或確認適用的專案風格後，才載入它。專案指令可以覆寫個別選擇。請保留無障礙性、實用性和品牌限制。字型是建議，並非必需的依賴項目。單純的黑底綠字頁面不符合復古終端機的資格。
適用範圍與取捨
- 適用於： 開發者作品集、CLI 雲端儀表板、網路安全與 DevOps 工具、系統監控主控台，以及創意編碼體驗。
- 需謹慎處理： 非技術性的消費型受眾，他們可能對嚴格的等寬資料佈局或不熟悉的終端機隱喻感到困擾。
- 參考方向：
- 經典琥珀色 CRT： 黑曜石黑背景 (
#0C0D0E)，搭配暖色調螢光琥珀 (#FFB000)，微弱的掃描線，以及高對比度的奶油色標籤。 - 磷光矩陣綠： 深色石墨畫布 (
#0A0F0D)，搭配電光磷光綠 (#33FF33)，帶括號的視窗標題，以及清晰的日誌串流。 - 賽博藍 CRT： 高科技終端機，使用發光青色 (
#00F0FF)，清晰的畫框邊框 (┌─┐)，以及鍵盤快捷鍵標籤 ([ESC])。
- 經典琥珀色 CRT： 黑曜石黑背景 (
復古終端機真實度把關 — 強制性
在宣告復古終端機頁面完成之前，開啟的視埠必須明顯地看起來像一個真實的、正在運作的終端機主控台或命令面板。 如果使用者選擇了此風格，一個僅使用等寬字體的普通深色網站即為失敗，即使 CSS 類別包含 terminal。
一個成功的復古終端機實作必須展現所有下列特徵：
- 螢光輝光與高對比度亮度： 文字和活動指示器需展現微弱的磷光輻射效果 (
text-shadow: 0 0 6px currentColor)，主要輸出內容在黑曜石底色上需達到 WCAG AA 對比度。 - 微弱的 CRT 掃描線疊加： 表面需有一個受控制的、靜態的水平掃描線圖案 (
repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px))，在不影響字元可讀性的前提下，增加真實的顯示深度。 - 結構化 ASCII / 括號佈局框架： 視窗標題、面板框架和狀態列使用清晰的 1px 規則線、ASCII 方塊字元 (
┌─┐) 或括號徽章 ([SYS_OK]、[MODE: CLI])。 - 真實的命令提示字元與游標： 介面需包含一個活躍的 shell 提示行 (
visitor@terminal:~$)，搭配一個實心區塊游標 (█) 以及清晰的指令歷史樣式。 - 等寬表格對齊： 時間戳記、狀態碼、行程 ID 和資料讀取值等內容，必須嚴格沿著等寬字元的欄位對齊。
首視埠測試： 在桌面版螢幕截圖中，無需閱讀頁面標題，即能辨識出終端機提示符、螢光輝光、掃描線光柵和括號主控台框架。如果它看起來像一個普通的深色部落格，請添加掃描線疊加和終端機提示行結構。
明確的復古終端機掃描線例外 — 螢光輝光允許使用
復古終端機專屬覆寫： 針對裝飾性疊加或螢幕紋理的通用反劣化警告，絕對不能解釋為禁止使用微弱的掃描線、螢光輝光或 shell 提示行。這些是構成材質的屬性，是 CRT 主控台美學的必要元素。
- 允許的材質處理： 等寬方塊繪製邊框、磷光文字光暈 (
0 0 6px)、靜態掃描線光柵疊加、括號狀態藥丸，以及閃爍/實心的區塊游標。 - 反劣化界線： 每一行命令或動作都必須是可用的。請勿用不可讀的掉落矩陣字元、假的終端機啟動錯誤訊息，或偽裝成功能性 UI 的靜態裝飾性程式碼片段來淹沒畫面。
- 反劣化解讀： 評估終端機元素時，應以命令清晰度、可讀性和開發者生產力為標準，而非禁止使用等寬框架。為滿足一個通用的扁平啟發式規則而移除掃描線和提示行，是一種設計退步。
字體排版與打字機風格
高可讀性的等寬字型：JetBrains Mono、IBM Plex Mono、Fira Code 或系統等寬字型 (ui-monospace, monospace)。主要內文：14–15 px；標題：20–32 px，使用粗體 (700) 和大寫括弧樣式 (### [SYSTEM_OVERVIEW])。維持嚴格的字符網格對齊。
色彩方向
- 深色模式（黑曜石 CRT 磷光）：
- 畫布底色： 黑曜石黑 (
#0C0D0E或#080A08)。 - 表面面板： 深石板灰 (
#14171A或#111613)。 - 螢光強調色（選擇一種）：
- 經典琥珀色：
#FFB000（光暈：rgba(255, 176, 0, 0.45)） - 磷光綠：
#33FF33（光暈：rgba(51, 255, 51, 0.45)） - 賽博藍：
#00F0FF（光暈：rgba(0, 240, 255, 0.45)）
- 經典琥珀色：
- 邊框：
1px solid rgba(255, 176, 0, 0.25)或#2A2F35。 - 掃描線： 半透明深色光柵線 (
repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px))。
- 畫布底色： 黑曜石黑 (
- 淺色模式（復古羊皮紙電傳打字機）：
- 畫布底色： 暖色調紙張象牙白 (
#F4F1EA)。 - 表面面板： 暖色調燕麥色 (
#E8E4DA)。 - 磷光反轉色（選擇一種）：
- 深焦琥珀色：
#5C3A00 - 深終端機綠：
#0F4D19 - 碳墨色：
#111613
- 深焦琥珀色：
- 邊框：
1px solid #D5D0C3。 - 掃描線： 淡化或關閉 (
none或微弱的紙張紋理)。
- 畫布底色： 暖色調紙張象牙白 (
- 語義狀態： 錯誤紅 (
#FF5555深色 /#B91C1C淺色)、警告黃 (#FFCC00深色 /#B45309淺色)、成功薄荷綠 (#50FA7B深色 /#047857淺色)。 - 主題耦合與反衝突規則： 在淺色模式下，明亮的螢光強調色必須反轉為高對比度的碳色/深琥珀色墨水 (
#111613或#5C3A00)。將明亮的琥珀色#FFB000或霓虹綠#33FF33放在淺色紙張畫布上，將立即造成對比度衝突，並被嚴格禁止。
佈局與幾何
邊角為直角或極小 (0px–4px)；1px 實線終端機面板邊框；緊湊的垂直節奏（4px/8px 等寬線條網格）。面板模組化終端機多工器 (tmux/screen 風格)。
表面、深度、紋理
- 終端機螢幕： 深黑色背景，帶有靜態掃描線光柵疊加。
- 主控台面板： 1px 實線邊框 (
1px solid rgba(255, 176, 0, 0.3)或#2A2F35)，帶有微弱的內部陰影。 - 活動游標： 區塊游標，具有 1 秒脈衝或實心活動狀態。
元件結構與互動
- 命令列提示符：
user@system:~$ command --flag，具有功能性輸入和清晰的返回結果。 - 終端機按鈕 / 動作： 外框括號按鈕 (
[ EXECUTE ]或[ CANCEL ])，懸停時顏色反轉 (background: currentColor; color: #000;)。 - 資料日誌串流： 表格行，包含時間戳記、日誌級別標籤和訊息。
- 鍵盤快捷鍵： 括號內的按鍵指示器 (
[⌘+K]、[ENTER])，並有清晰的指標點擊備援。
動畫效果
預設為即時狀態變化 (0–80 ms)。可選的、可略過的字符打字效果僅用於英雄區開場。立即遵循 prefers-reduced-motion。
可選的 Anime.js v4 配方
- 動畫決策： 等寬字元打字揭示或終端機掃描條掃動；保持幀率穩定。
- 起始持續時間： 每個令牌區塊 100 毫秒（0 = 立即）；根據任務和使用者喜好調整。
- 避免： 畫面抖動、人為失真波、永久閃爍循環。
- 依賴性： 預設使用 CSS/原生。僅在請求的互動合理時才使用 Anime.js v4。遵循 Taste Engine 的
references/motion-engine.md（如有）；獨立技能則遵循上述的減少動畫和無裝飾循環原則。
UI 文案與微文案
精確、技術性、命令式。範例：deploy --prod、status: healthy、4 processes running。避免居高臨下的行銷用語。
入門令牌（建議，非完整主題）
| 令牌 | 深色模式預設值 | 淺色模式預設值 |
|---|---|---|
--taste-term-bg | #0c0d0e | #f4f1ea |
--taste-term-surface | #14171a | #e8e4da |
--taste-term-text | #ffb000 | #5c3a00 |
--taste-term-amber | #ffb000 | #5c3a00 |
--taste-term-glow | 0 0 6px rgba(255, 176, 0, 0.45) | none |
--taste-term-border | 1px solid rgba(255, 176, 0, 0.25) | 1px solid #d5d0c3 |
--taste-term-scanline | repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px) | none |
--taste-term-radius | 2px | 2px |
--taste-term-font-mono | JetBrains Mono, IBM Plex Mono, monospace | JetBrains Mono, IBM Plex Mono, monospace |
--taste-term-motion-duration | 80ms | 80ms |
令牌代表一個方向，並非保證對每個色板/平台都適用。在專案層級定義 --taste-term-*，確保色彩對比度，並透過主題令牌進行調整，而非散佈字面值。
英雄區構成（完整首視埠）
當面向公眾的作品集/登陸頁面/首頁具有英雄區時： 使用一個可見螢幕高度的頁首+英雄區構成。基礎高度為 min-height: 100svh，並以 100vh 作為備援，僅在頁首處於正常文件流中時才減去真實的頁首高度；讓英雄區可展開以確保無障礙性和短螢幕行動裝置。請勿將此應用於私有儀表板或其他任務畫面；直接的使用者覆寫優先。風格專屬方向： 將首視埠構建成一個真實的互動式主控台會話，包含歡迎 ASCII 橫幅、系統狀態摘要，以及一個可用的提示行。請勿模擬假的矩陣雨或不可讀的故障循環。請參閱路由器中的 references/hero-layout.md（如有）。獨立使用時遵循相同的響應式和反劣化原則。
風格專屬品質把關
- 應做： 驗證文字與畫布之間的高對比度（WCAG AA）；確保等寬對齊得以保留；為所有鍵盤快捷鍵提供點擊備援；測試掃描線的可讀性；驗證深色/淺色模式切換，使磷光顏色在淺色背景上反轉為高對比度的深色墨水。
- 不應做： 請勿將普通的深色主題視為復古終端機；避免不可讀的故障動畫；不要提供會誤導使用者的假非互動式主控台提示；避免淺色模式下的主題衝突，例如在羊皮紙上使用霓虹綠或淺琥珀色文字。
- 確認桌面版和行動版的一致性；可見的鍵盤焦點 (
:focus-visible)；載入、空白、禁用、錯誤和成功狀態；減少動畫行為 (prefers-reduced-motion)。 - 請勿將風格專屬的假設注入不相關的專案。合併風格時，明確命名主要風格和借用的功能。
通用反劣化把關（獨立）
每個元素都必須有其存在的價值。內容優先於裝飾。請勿裝飾不確定性。 請勿發明平衡、指標、見證、使用者、標誌、核准/驗證/上線/在線狀態、虛假活動或成功確認訊息；應使用誠實的空白/載入/錯誤狀態。僅在要求並明確標示時，才可接受示範資料。
請勿添加裝飾性的卡片內嵌卡片圖層：巢狀表面必須代表不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、虛假的英雄區聲明、無目的的圖表、徽章/籌碼/圖示濫用、不相關的裝飾性藝術，以及僅僅為了填滿視埠的隨機循環。優先使用字體排版、間距、對齊和分隔線進行分組。同等的項目需要刻意的視覺平衡。
反劣化文案： 禁止使用通用的「釋放你的潛能」、「體驗未來」、「提升你的工作流程」、「無縫」等聲明或其翻譯。標題必須傳達實際內容，CTA 必須命名動作，空白/錯誤/成功文字必須描述真實狀態和後續步驟。避免虛假的緊迫感、虛構的數字、模糊的 AI 炒作、無意義的表情符號，以及不可訪問的全大寫文字牆。根據此風格和使用者的語言調整措辭，同時不改變事實。
主題與模式對比度完整性： 當使用者要求深色模式或淺色模式（或建立主題切換器）時，背景和前景顏色必須在所有表面、文字、邊框、輸入框和語義徽章上以同步配對的方式翻轉。切勿將黑色文字留在深色背景上，白色文字留在白色背景上，或留下不可讀的低對比度狀態藥丸。所有狀態都必須符合 WCAG AA 對比度（正文/普通文字至少 4.5:1，大型標題和互動邊界至少 3:1）。
響應式與動畫： 有意識地為行動裝置進行設計，檢查長標籤、焦點狀態和可訪問的對比度；不要為了適應時髦的佈局而裁剪文字。預設為靜態；將動畫用於有意義的互動，尊重減少動畫的偏好，避免沒有真實狀態的彈跳/浮動/脈衝裝飾。
重大/高優先級發現會阻礙完成： 偽造的狀態/資料、失效的動作、無法訪問/被裁剪的控制項、誤導性的文案、主題對比度衝突或重大的行動裝置故障，都必須修復。報告實際驗證過的內容；請勿聲稱未執行的測試。
非美學否決權： 當表現性色彩、陰影、漸層、卡片佈局或裝飾性處理是所選美學的有意組成部分，並通過可用性檢查時，它們是合理的。請勿強制推行極簡主義。
反劣化：風格專屬
真實的 CLI 環境，而非駭客風格的桌布。
- 拒絕： 偽裝成終端機的普通深色卡片、裝飾性且無功能的主控台提示、刺眼的掃描線疊加、淺色紙張背景上的霓虹文字，以及不可讀的矩陣雨循環。
- 改為： 提供真實的等寬層級結構、可運作的命令列或標籤按鈕、功能性的終端機提示，以及可供閱讀的掃描線，其目的在於溝通的物流或監控資料。確保每個終端機元素都有用途或反映實際的 UI 狀態。
繼承、合併與獨立運作
此套件可獨立運作，或作為偏好風格存在於 ˙技能組合中。當與 UX 配方合併時，此風格設定視覺及部分互動期望，而配方則管理空間和使用者流程。此技能不會自動將不相關的頁面轉換為終端機佈局。