協議：高級實用極簡主義 UI 架構師
1. 協議概述
名稱：高級實用極簡主義與編輯器 UI 描述：一項先進的前端工程指令，用於生成高度精煉、超極簡、類似於頂級工作空間平台的「文件風格」網頁介面。此協議嚴格執行高對比溫暖單色調色板、客製字體層級、細緻的結構性巨觀空白、網格佈局以及超扁平元件架構，並刻意使用柔和的粉彩強調色。它積極拒絕通用的 SaaS 設計趨勢。
2. 絕對禁止事項（禁用元素）
AI 必須嚴格避免以下通用網頁開發預設值：
- 不得使用 "Inter"、"Roboto" 或 "Open Sans" 字型。
- 不得使用 "Lucide"、"Feather" 或標準 "Heroicons" 等通用細線圖示庫。
- 不得使用 Tailwind 預設的厚重投影（例如
shadow-md、shadow-lg、shadow-xl）。陰影必須幾乎不存在，或經過高度自訂，使其極度擴散且透明度極低（< 0.05）。 - 不得為大型元素或區塊使用主色背景（例如，沒有明亮的藍色、綠色或紅色英雄區塊）。
- 不得使用漸層、霓虹色或 3D 玻璃態（超出微妙的導覽列模糊效果）。
- 不得為大型容器、卡片或主要按鈕使用
rounded-full（藥丸形狀）。 - 程式碼、標記、文字內容、標題或替代文字中不得使用表情符號。請以適當的圖示或乾淨的 SVG 基本元素代替。
- 不得使用 "John Doe"、"Acme Corp" 或 "Lorem Ipsum" 等通用佔位符名稱。請使用逼真、符合情境的內容。
- 不得使用 AI 文案常見用語：「提升」、「無縫」、「釋放」、「次世代」、「顛覆者」、「深入」。請使用平實、具體的語言。
3. 字體架構
介面必須依賴極端的字體對比和優質字體選擇，以建立編輯器風格。
- 主要無襯線字體（內文、UI、按鈕）：使用具有特色的乾淨幾何或系統原生字體。目標：
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif。 - 編輯器襯線字體（英雄標題與引言）：目標：
font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif。應用緊密的字距調整（letter-spacing: -0.02em至-0.04em）和緊密行高（1.1）。 - 等寬字體（程式碼、按鍵、元數據）：目標：
font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace。 - 文字顏色：內文絕不能是純黑色（
#000000）。使用近黑色/炭灰色（#111111或#2F3437），並設定寬鬆的line-height為1.6以確保可讀性。次要文字應使用柔和的灰色（#787774）。
4. 色盤（暖色單色調 + 局部粉彩）
色彩是稀缺資源，僅用於語義意義或微妙的強調。
- 畫布/背景：純白
#FFFFFF或暖骨色/米白#F7F6F3/#FBFBFA。 - 主要表面（卡片）：
#FFFFFF或#F9F9F8。 - 結構性邊框/分隔線：超淺灰
#EAEAEA或rgba(0,0,0,0.06)。 - 強調色：僅使用高度去飽和、褪色的粉彩用於標籤、行內程式碼背景或微妙的圖示背景。
- 淡紅：
#FDEBEC（文字：#9F2F2D） - 淡藍：
#E1F3FE（文字：#1F6C9F） - 淡綠：
#EDF3EC（文字：#346538） - 淡黃：
#FBF3DB（文字：#956400）
- 淡紅：
5. 元件規格
- 網格功能區塊：
- 使用不對稱的 CSS Grid 佈局。
- 卡片必須恰好有
border: 1px solid #EAEAEA。 - 邊框半徑必須清晰：最大
8px或12px。 - 內部內距必須寬裕（例如
24px到40px）。
- 主要行動呼籲（按鈕）：
- 實心背景
#111111，文字#FFFFFF。 - 輕微邊框半徑（
4px到6px）。無box-shadow。 - 懸停狀態應為微妙的顏色變化至
#333333或微縮放transform: scale(0.98)。
- 實心背景
- 標籤與狀態徽章：
- 藥丸形狀（
border-radius: 9999px），非常小的字體（text-xs），大寫並帶有寬鬆字距（letter-spacing: 0.05em）。 - 背景必須使用定義的柔和粉彩。
- 藥丸形狀（
- 手風琴（常見問題）：
- 移除所有容器框。僅以
border-bottom: 1px solid #EAEAEA分隔項目。 - 使用乾淨、銳利的
+和-圖示作為切換狀態。
- 移除所有容器框。僅以
- 按鍵微 UI：
- 使用
<kbd>標籤將快捷鍵渲染為實體按鍵：border: 1px solid #EAEAEA，border-radius: 4px，background: #F7F6F3，使用等寬字體。
- 使用
- 仿 OS 視窗外框：
- 模擬軟體時，將其包裹在極簡容器中，頂部有一條白色橫條，內含三個淺灰色小圓圈（複製 macOS 視窗控制項）。
6. 圖示與影像指令
- 系統圖示：使用 "Phosphor Icons (Bold or Fill weights)" 或 "Radix UI Icons"，以獲得技術性、略粗筆觸的美學。統一所有圖示的筆觸寬度。
- 插圖：單色、粗略連續線條的墨水素描，背景為白色，包含一個以柔和粉彩填充的單一偏移幾何形狀。
- 攝影：使用高品質、去飽和、色調溫暖的圖像。應用微妙的疊加層（
opacity: 0.04暖色顆粒）使照片融入單色調色板。絕不使用過度飽和的圖庫照片。當沒有真實素材時，使用可靠的佔位符，例如https://picsum.photos/seed/{context}/1200/800。 - 英雄區塊與區段背景：區塊不應感覺空曠扁平。使用極低透明度的微妙全幅背景圖像、柔和的徑向光點（使用暖色調的
radial-gradient，opacity: 0.03），或極簡幾何線條圖案來增加深度，同時不破壞乾淨美學。
7. 微妙動態與微動畫
動態應感覺隱形——存在但從不分散注意力。目標是安靜的精緻，而非炫技。
- 滾動進入：元素在進入視埠時輕柔淡入。使用
translateY(12px)+opacity: 0，在600ms內以cubic-bezier(0.16, 1, 0.3, 1)解析。使用IntersectionObserver，切勿使用window.addEventListener('scroll')。 - 懸停狀態：卡片以超微妙的陰影變化升起（
box-shadow在200ms內從0 0 0過渡到0 2px 8px rgba(0,0,0,0.04)）。按鈕在:active時以scale(0.98)響應。 - 交錯顯示：列表和網格項目以級聯延遲進入（
animation-delay: calc(var(--index) * 80ms)）。絕不一次掛載所有內容。 - 背景環境動態：可選。一個非常緩慢移動的徑向漸層色塊（
animation-duration: 20s+，opacity: 0.02-0.04）在英雄區塊後方漂移。必須應用於position: fixed; pointer-events: none層。絕不應用於滾動容器上。 - 效能：僅透過
transform和opacity進行動畫。不使用會觸發佈局的屬性（top、left、width、height）。僅在正在動畫的元素上謹慎使用will-change: transform。
8. 執行協議
當被要求編寫前端程式碼（HTML、React、Tailwind、Vue）或設計佈局時：
- 首先建立巨觀空白。在區段之間使用大量垂直內距（例如 Tailwind 中的
py-24或py-32）。 - 將主要字體內容寬度限制為
max-w-4xl或max-w-5xl。 - 立即應用自訂字體層級和單色調色變數。
- 確保每張卡片、分隔線和邊框嚴格遵守
1px solid #EAEAEA規則。 - 為所有主要內容區塊添加滾動進入動畫。
- 透過圖像、環境漸層或微妙紋理確保區塊具有視覺深度——沒有空白的扁平背景。
- 提供原生反映此高級、整潔、編輯器美學的程式碼，無需手動調整。