hakushiidev/claude-skills

此技能引導創造獨特、生產級的前端介面。實作真正可運作的程式碼，並對美學細節給予極高的關注。

提示範例

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

撰寫任何程式碼之前

1. 先探索現有的程式碼庫。 特別掃描以下項目：

   • 元件目錄：components/、ui/、shared/，並列出每個元件的名稱及其 props/API
   • CSS 變數 / Token：名為 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）。標題與內文之間的尺寸對比強烈。全大寫的副標題搭配寬敞字距。
• 色彩：高對比。黑色、白色與一種主要顏色。大膽的色塊作為構圖元素。
• 版面：剛性的多欄網格。不對稱的平衡。文字與圖像對話。元素間的對齊無可妥協。
• 間距：由網格模組定義。欄距是設計的一部分，而非事後才考慮。
• 動態：頁面轉場和滾動觸發的揭示效果，須尊重網格。沒有俏皮的彈跳。
• 細節：水平線條作為結構元素。無漸層。無陰影。扁平化是重點。

日本極簡主義（Ma）

留白也是內容。節制傳達精緻感。安靜勝於喧鬧。

• 排版：細字重的無襯線或優雅襯線字體（Noto Sans、Cormorant）。寬鬆的行高（1.8-2.0）。較小的內文字級搭配大面積的留白邊距。
• 色彩：柔和的大地色系（暖灰色、石色、鼠尾草色、和紙色）。微妙的色調變化取代強烈對比。近乎單色。
• 版面：不對稱但平衡。內容偏離中心。大片空白區域是刻意的。內容在空間中漂浮。
• 間距：極端的留白。內邊距和外邊距是「正常」感覺的 2-3 倍。元素需要呼吸。
• 動態：緩慢、溫和的淡入效果（400-600 毫秒）。無彈跳，無 overshoot。使用透明度變化而非位移。
• 細節：極細邊框。微妙的紋理（紙張紋理、亞麻布）。無銳利陰影。柔和、漫射的效果。

粗獷主義 / 原始

結構清晰可見。不修邊幅。反美學即是美學。

• 排版：系統字體、等寬字體（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 個字元）。

深色模式

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

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