frontend-design

此技能引導您打造獨特且可投入生產的前端介面。實作真正可運作的程式碼，並特別注重美學細節。

範例提示

• 「根據需求建構英雄區塊」
• 「建立一個斯堪地納維亞風格的卡片元件」
• 「我希望這感覺像日本雜誌。建構版面。」
• 「建構設定頁面。使用任何適合的風格。」

在撰寫任何程式碼之前

1. 先探索現有程式碼庫。 特別掃描：

   • 元件目錄：components/、ui/、shared/，列出每個元件的名稱及其 props/API
   • CSS 變數 / tokens：名為 tokens.css、variables.css、theme.css 的檔案，或帶有自訂屬性的 :root 宣告
   • Tailwind 設定：tailwind.config.js 或 tailwind.config.ts，檢查 theme.extend 中的自訂值
   • UI 框架主題：Material UI 的 createTheme、Chakra 的 extendTheme、shadcn 的 globals.css 和 components.json
   • Storybook：.storybook/ 目錄或 *.stories.* 檔案，表示已記錄的元件
   • 字型載入：Google Fonts 連結、@font-face 宣告、字型匯入
   • 版面模式：現有頁面如何處理網格、容器、斷點和間距
   • Package.json UI 依賴：tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion 等
   • 如果存在與您需要建構的元件相符或部分相符的元件，請擴充或組合它們。不要建立重複的元件。

2. 了解上下文：

   • 這個介面解決什麼問題？誰在使用它？
   • 預期的情感基調是什麼？
   • 有哪些硬性限制（框架、裝置、效能、無障礙性）？

3. 確定美學方向。 使用者可以指定一個（見下方美學理念），或者您選擇一個符合上下文的。在撰寫程式碼之前，說明您的選擇及其原因。

美學理念

當使用者指定一個理念或描述一種氛圍時，請將這些作為具體的實作指南。每個理念定義了字體、顏色、版面、間距、動畫和細節處理方式。

Dieter Rams（功能主義）

少而精。每個元素都必須有其存在的理由。沒有無功能的裝飾。

• 字體：乾淨的無襯線字體（Helvetica Neue、Suisse Intl、Akkurat）。標題字母間距緊湊。內文行高寬裕。嚴格使用一種字級比例。
• 顏色：克制。單色搭配一個功能性強調色。白色或淺灰色背景。顏色是資訊，不是裝飾。
• 版面：嚴格的網格。清晰的功能層級。元件對齊空間系統。不為對稱而對稱。
• 間距：一致、數學化的比例（4px/8px 為基礎）。寬敞的內距。元素之間有呼吸空間。
• 動畫：極簡。僅有目的性的轉場（狀態變化、揭示）。無裝飾性動畫。
• 細節：使用細邊框和分隔線而非陰影。精確對齊。圓角使用節制且一致。

瑞士 / 國際字體風格

透過結構達到客觀。網格是神聖的。內容為王。

• 字體：強烈的無襯線字體（Neue Haas Grotesk、Univers、Aktiv Grotesk）。標題與內文之間有戲劇性的字級對比。全大寫副標題搭配寬鬆字母間距。
• 顏色：高對比。黑色、白色和一種主色。大膽的色塊作為構圖元素。
• 版面：嚴格的多欄網格。不對稱平衡。文字與圖像對話。元素之間的對齊不容妥協。
• 間距：由網格模組定義。欄間距是設計的一部分，而非事後添加。
• 動畫：頁面轉場和滾動觸發的揭示，尊重網格。無俏皮的彈跳。
• 細節：水平線作為結構元素。無漸層。無陰影。扁平是重點。

日本極簡主義（間）

負空間就是內容。克制傳達精緻。安靜勝過喧囂。

• 字體：細體無襯線或優雅襯線字體（Noto Sans、Cormorant）。寬裕的行高（1.8-2.0）。小內文字體搭配大留白邊距。
• 顏色：柔和自然色（暖灰、石色、鼠尾草色、和紙色）。微妙的色調變化而非強烈對比。接近單色。
• 版面：不對稱但平衡。偏離中心的内容。大片空白區域是刻意的。內容漂浮在空間中。
• 間距：極端留白。內距和外距是「正常」感覺的 2-3 倍。元素有呼吸空間。
• 動畫：緩慢、溫和的淡入（400-600ms）。無彈跳、無超調。使用透明度變化而非位置移動。
• 細節：極細邊框。微妙的紋理（紙張紋理、亞麻）。無銳利陰影。柔和、擴散的效果。

粗獷主義 / 原始

結構可見。未經修飾。反美學就是美學。

• 字體：系統字型、等寬字型（JetBrains Mono、IBM Plex Mono、Courier）或強烈的展示字型。混合字級。文字作為紋理。
• 顏色：主要為黑色和白色。如果有顏色，則是原始且衝突的（工程黃、警示橘、終端綠）。無漸層。
• 版面：可見邊框。盒模型暴露。堆疊區塊。刻意粗糙。內容優先，美感從不。
• 間距：緊湊或刻意不均。感覺壓縮的內距。
• 動畫：無，或刺耳（即時狀態變化、硬切）。無緩動。
• 細節：可見輪廓。預設瀏覽器表單元素可以是刻意的。純文字介面。除非有功能，否則無圖示。

斯堪地納維亞

溫暖加上克制。功能性美感。預設即可及。

• 字體：圓潤、友善的無襯線字體（Nunito、Poppins、Circular、Cera Pro）。中等字重。舒適的閱讀尺寸。
• 顏色：自然色調。暖白、柔和藍、柔和綠、陶土色。粉彩強調色。不使用純黑（使用炭灰色）。
• 版面：乾淨開放。卡片式。圓角（8-12px）。舒適寬敞的版面。
• 間距：寬敞但不極端。一切感覺平易近人且不雜亂。
• 動畫：溫和、自然的緩動。微妙的懸浮抬起。內容安穩就位。
• 細節：柔和陰影（大模糊、低透明度）。圓角元素。灰色中的暖色調。適合插圖。

裝飾藝術 / 幾何

大膽對稱。裝飾精確。宣言與奢華。

• 字體：幾何展示字型（Futura、Poiret One、Josefin Sans）。全大寫標題搭配極端字母間距。襯線內文以形成對比。
• 顏色：豐富深沉。金色/香檳色、祖母綠、海軍藍、酒紅、黑色。金屬強調色（金色漸層、閃爍效果）。
• 版面：對稱且置中。強烈的垂直軸。裝飾性邊框。層疊深度。
• 間距：結構化且正式。內距是建築性的。
• 動畫：優雅的揭示。交錯進場動畫。視差深度。
• 細節：幾何圖案（人字形、放射狀、扇形）。裝飾性邊框。紋理（大理石、拉絲金屬）。英雄級別的宣言字體。

新孟菲斯

俏皮混亂。反企業。形狀如角色。

• 字體：混合字重和風格。衝突字型是刻意的。超大標題。傾斜文字。
• 顏色：大膽原色和螢光色。衝突組合（粉紅和黃、藍和橘）。無柔和色調。純色，無漸層。
• 版面：破壞網格。重疊元素。形狀（圓形、三角形、波浪線）作為構圖元素。刻意不對稱。
• 間距：某些區域密集，某些區域空白。節奏不規則。
• 動畫：彈跳、俏皮。誇張的懸浮效果。元素搖晃、旋轉或彈出。
• 細節：粗邊框。幾何形狀作為裝飾。圖案（點、虛線、鋸齒）。帶有硬邊和亮色的投影。

編輯 / 雜誌風格

內容主導的設計。字體承擔主要工作。每一頁都是一個跨頁。

• 字體：展示襯線字體用於標題（Playfair Display、Fraunces、Instrument Serif）。乾淨無襯線用於內文（DM Sans、Source Sans）。戲劇性字級（英雄標題 72-120px）。引文。首字放大。
• 顏色：極簡。黑色和白色搭配一個強調色。顏色用於編輯目的（強調而非裝飾）。
• 版面：強烈的欄網格（3-5 欄）。滿版圖片。文字環繞。混合欄寬。垂直韻律。
• 間距：寬裕邊距。標題行距緊湊，內文行距開放。留白作為構圖工具。
• 動畫：滾動觸發的揭示。圖片視差。流暢的頁面轉場。
• 細節：細線作為分隔線。說明文字字體。期號/日期元資料。印刷靈感細節（頁碼、頁眉）。

實作指南

• 字體：選擇透過 Google Fonts 或 CDN 載入的獨特字型。避免通用預設字型（Inter、Roboto、Arial、系統字型）。將展示字型與內文字型配對。
• 顏色：使用 CSS 變數以保持一致性。主色搭配鮮明強調色勝過安全、均勻分佈的色板。
• 動畫：HTML 使用 CSS 轉場。React 使用 Framer Motion / Motion 庫。專注於高影響時刻（頁面載入揭示、狀態變化），而非分散的微互動。
• 空間構成：出乎意料的版面能吸引注意力。不對稱、重疊、對角線流動、打破網格的元素。或者，如果理念要求，則精確執行嚴格的網格。
• 背景與深度：營造氛圍。漸層網格、噪點紋理、幾何圖案、分層透明度、顆粒覆蓋。符合所選理念。

絕對不要產生通用的 AI 美學：白色背景上的紫色漸層、Inter 字型、可預測的卡片網格、千篇一律的元件版面。每個輸出都應感覺是為其特定上下文設計的。

將實作複雜度與美學願景相匹配。Dieter Rams 介面是 50 行精確的 CSS。新孟菲斯介面是 300 行創意混亂。兩者都是正確的。

行動優先

先建構行動版版面，再放大。這是不可妥協的。

• 從 375px 寬度的單欄版面開始。
• 在每個斷點增加複雜度（使用 min-width 媒體查詢，而非 max-width）。
• 觸控目標在行動版上必須至少 44x44px。
• 行動版內文至少 16px（防止 iOS 在輸入焦點時縮放）。
• 導航必須有行動版專用模式（漢堡選單、底部標籤或抽屜）。不要依賴會溢出的水平導航列。
• 測試每個斷點的行長是否舒適（45-75 個字元）。

深色模式

如果存在設計 tokens 檔案（來自 /design-tokens），請使用其深色模式色板。如果沒有，請在淺色主題之外同時產生深色模式支援。

• 使用 CSS 自訂屬性，以便切換主題只需改變變數值，而非重寫元件。
• 同時支援 prefers-color-scheme 媒體查詢（系統偏好）和 [data-theme="dark"] 屬性（手動切換）。
• 不要只是反轉顏色。深色背景應為暖色或冷色以符合理念（斯堪地納維亞用暖炭灰，瑞士用冷石板灰，粗獷主義用近黑色）。
• 將純白文字改為米白色（例如 #E5E5E5 或 rgba(255,255,255,0.87)）以減少眼睛疲勞。
• 深色模式中的陰影應更暗且更透明，而非與淺色模式相同的值。
• 強調色可能需要調整亮度，以維持在深色背景上的 WCAG 對比度。
• 包含 prefers-reduced-motion 媒體查詢，以滿足需要它的使用者。在該查詢中停用或簡化所有動畫和轉場。