SKILL：工業野獸派與戰術遙測 UI
1. 技能元資料
名稱： 工業野獸派與戰術遙測介面工程 描述： 精通於架構融合中世紀瑞士印刷設計、工業製造手冊與復古未來主義航太/軍事終端介面的網頁介面。這項學科需要對剛性模組化網格、極端字體比例對比、純粹功利主義的色彩調色板以及類比退化（半色調、CRT 掃描線、位元圖抖動）的程式化模擬具備絕對的掌握。目標是建構出能夠投射原始功能、機械精準度與高數據密度的數位環境，刻意拋棄傳統消費性 UI 模式。
2. 視覺原型
此設計系統透過融合兩種截然不同但高度相容的視覺範式來運作。每個專案選擇 ONE 種並嚴格執行。請勿在同一個介面中交替或混合兩種模式。
2.1 瑞士工業印刷
源自 1960 年代的企業識別系統與重型機械藍圖。
- 特徵： 高對比亮色模式（新聞紙/米白底色）。依賴整體、厚重的無襯線字體。由可見分隔線勾勒出的嚴苛結構網格。大範圍的計算後留白空間，並穿插著超大、溢出視口的數字或字母形式。大量使用原色紅作為警報/強調色。
2.2 戰術遙測與 CRT 終端
源自機密軍事資料庫、遺留大型主機與航太抬頭顯示器 (HUD)。
- 特徵： 獨家暗色模式。高密度表格資料呈現。等寬字體的絕對主導地位。整合技術性框架元素（ASCII 括號、十字準線）。應用模擬的硬體限制（磷光輝光、掃描線、低位元深度渲染）。
3. 字體排版架構
字體排版是主要的結構性和裝飾性基礎設施。圖像則是次要的。系統要求尺度、粗細和間距的極端變化。
3.1 鉅觀字體排版（結構性標題）
- 分類： 新無襯線 / 重型無襯線。
- 最佳網路字體： Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended。
- 實作參數：
- 尺度： 使用流體排版以巨大規模部署（例如
clamp(4rem, 10vw, 15rem)）。 - 字距（字母間距）： 極度緊湊，通常為負值（
-0.03em至-0.06em），迫使字形形成堅實的建築區塊。 - 行距（行高）： 高度壓縮（
0.85至0.95）。 - 大小寫： 為結構性衝擊，獨家使用大寫。
- 尺度： 使用流體排版以巨大規模部署（例如
3.2 微觀字體排版（數據與遙測）
- 分類： 等寬 / 技術無襯線。
- 最佳網路字體： JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime。
- 實作參數：
- 尺度： 固定且較小（
10px至14px/0.7rem至0.875rem）。 - 字距： 寬鬆（
0.05em至0.1em）以模擬機械打字機間距或終端矩陣。 - 行距： 標準至緊湊（
1.2至1.4）。 - 大小寫： 獨家使用大寫。用於所有元資料、導航、單元ID 和座標。
- 尺度： 固定且較小（
3.3 紋理對比（藝術性干擾）
- 分類： 高對比襯線。
- 最佳網路字體： Playfair Display, EB Garamond, Times New Roman。
- 實作參數： 極度節制使用。必須經過大量後處理（半色調濾鏡、1 位元抖動）以退化向量完美性，並針對乾淨的無襯線字體創造紋理並置。
4. 色彩系統
色彩架構毫不妥協。嚴格禁止漸層、柔和的投影和現代半透明效果。色彩模擬實體媒材或原始發光顯示器。
關鍵：每個專案選擇 ONE 種底色調色板並一致使用。切勿在同一個介面中混合亮色和暗色底色。
若為瑞士工業印刷（亮色）：
- 背景：
#F4F4F0或#EAE8E3（消光、未漂白的文件紙）。 - 前景：
#050505至#111111（碳墨）。 - 強調色：
#E61919或#FF2A2A（航空/危險紅）。這是唯一的強調色。用於刪除線、厚的結構分隔線或重要數據高亮。
若為戰術遙測（暗色）：
- 背景：
#0A0A0A或#121212（已關閉的 CRT。避免純#000000）。 - 前景：
#EAEAEA（白色磷光）。這是主要文字顏色。 - 強調色：
#E61919或#FF2A2A（航空/危險紅）。相同的紅色，相同的規則。 - 終端綠（
#4AF626）： 可選。僅用於單一特定 UI 元素（例如，一個狀態指示器或一個數據讀數）——絕不作為一般文字顏色。如果沒有明確目的，請完全省略。
5. 佈局與空間工程
佈局必須看起來是經過數學計算的。它拒絕傳統的網頁內邊距，轉而採用可見的分區化。
- 藍圖網格： 嚴格遵循 CSS Grid 架構。元素不會浮動；它們被精確地錨定到網格軌道和交叉點。
- 可見分區化： 大量使用實心邊框（
1px或2px solid）來界定不同的資訊區域。水平線（<hr>）經常橫跨整個容器寬度，以分隔操作單元。 - 雙模密度： 佈局在極端數據密度（緊密排列的等寬元資料聚集在一起）與包圍著鉅觀字體排版的大片計算後留白空間之間擺盪。
- 幾何形狀： 絕對拒絕使用
border-radius。所有角必須恰好為 90 度，以強制機械剛性。
6. UI 元件與符號系統
標準的網頁 UI 慣例被實用主義的工業圖形元素所取代。
- 語法裝飾： 使用 ASCII 字元來框定數據點。
- 框架：
[ 傳輸系統 ]、< 重啟 > - 方向性：
>>>、///、\\
- 框架：
- 工業標記： 大量整合註冊（
®）、版權（©）和商標（™）符號，這些符號作為結構性幾何元素，而非法律文字。 - 技術資產： 在網格交叉點整合十字準線（
+）、重複垂直線（條碼）、粗的水平警告條紋以及隨機字串數據（例如REV 2.6、UNIT / D-01），以模擬活躍的機械過程。
7. 紋理與後處理效果
為防止設計看起來純粹數位化，透過 CSS 和 SVG 濾鏡在前端工程化模擬的類比退化效果。
- 半色調與 1 位元抖動： 將連續色調圖像或大型襯線字體轉換為網點矩陣圖案。透過預處理，或結合 SVG 徑向點圖案的 CSS
mix-blend-mode: multiply覆蓋層來達成。 - CRT 掃描線： 對於終端介面，在背景上應用
repeating-linear-gradient以模擬水平電子束掃描（例如repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。 - 機械噪點： 一個全域、低透明度的 SVG 靜態/噪點濾鏡應用於 DOM 根節點，以在暗色和亮色模式中引入統一的物理顆粒感。
8. 網頁工程指令
- 網格決定論： 使用
display: grid; gap: 1px;搭配對比的父/子背景顏色，以產生數學上完美、極細的分隔線，無需複雜的邊框宣告。 - 語意嚴謹性： 使用精確的語意標籤（
<data>、<samp>、<kbd>、<output>、<dl>）來建構 DOM，以準確反映遙測的技術性質。 - 字體尺度限制： 僅對鉅觀字體排版實作 CSS
clamp()函式，以確保大文字尺度能夠積極地根據視口縮放，同時保持結構完整性。