davila7/claude-code-templates

頂級網頁設計

建立 React (.jsx) 元件，使其看起來像是屬於 Awwwards 的作品——那種會讓人問「這是誰設計的？」的網站。在這些網站中，每個像素都是刻意的，每個動畫都是精心編排的，而且整體印象是投入了優秀的創意人才和預算。

AI 美學問題

大多數 AI 生成的網站都具有可辨識的共同 DNA。要避免它，必須先確切知道它長什麼樣子。

禁止事項清單 — 永遠不要做這些

字體排印的禁忌

• 使用 Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit 作為主要字型——它們會直接透露「AI 模板」的身份。（注意：Inter Tight 是一個擁有不同度量單位的獨立字型家族，可以使用。）
• 全站只使用一種字型家族
• 統一且可預測的字體大小層級（64px → 32px → 18px → 14px）
• 到處使用預設的字距和行高
• 到處都使用置中文字區塊，特別是對於多行段落

色彩的禁忌

• 紫色到藍色的漸層（AI 設計中最常見的陳腔濫調）
• 在沒有情境原因下，使用靛藍/紫色作為主要品牌色
• 白色背景 + 一個強調色 + 灰色文字（SaaS 入門套件風格）
• 在按鈕或卡片上無緣無故使用漸層
• 使用透明度或半透明疊加層來取代真正的色彩選擇
• 在深色背景上使用霓虹強調色（「開發者作品集」的模樣）

佈局的禁忌

• Hero → 3 欄功能網格 → 推薦 → CTA → 頁尾（預設的 SaaS 登陸頁）
• Hero → 統計欄 → 作品網格 → 關於分割 → CTA → 頁尾（「高級 AI」登陸頁——同樣公式化）
• 任何可以在不同網站之間互換的可預測從上到下的區塊排序邏輯。每個網站都必須有自己獨特的結構 DNA——不同的區塊數量、不同的排序邏輯、無法整齊歸類的區塊
• 帶有相等尺寸卡片的完美對稱網格
• 所有內容都置中，所有內容都包含在最大寬度的容器中
• 帶有盒子陰影的圓角矩形作為主要的 UI 元素
• 一行 3 或 4 個圖示 + 標題 + 描述卡片的排列方式
• 帶有標題、副標題和兩個並排按鈕的通用 Hero 區域
• 只有文字的靜態扁平 Hero 區域——Hero 區域應該是沉浸式的空間體驗

動態效果的禁忌

• 滾動時元素從下方淡入（過度使用的 AOS 效果）
• 所有元素使用相同的過渡效果（相同的持續時間、相同的緩動函數、相同的方向）
• 僅縮放或添加陰影的懸停效果
• 使用載入旋轉器，而不是骨架螢幕或精心編排的揭露效果

圖像與裝飾的禁忌

• 使用 Blob 形狀作為背景裝飾
• 使用浮動幾何形狀（圓形、三角形）作為「設計元素」
• 使用通用的漸層網格背景
• 使用統一長寬比的圖庫照片網格
• 使用表情符號或通用線條圖示作為區塊標記

---

高貴感的真正模樣

頂級網頁設計透過克制、驚喜和對細節的執著來傳達工藝。

字體排印即身份

字體排印是區分一個 500 美元網站和一個 50,000 美元網站的 #1 差異化要素。

字型選擇哲學：

• 為標題使用獨特的襯線或展示字型——具有個性和觀點的字型。好的起點：對於襯線字型，可以使用 Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif。對於未過度使用的無襯線字型：Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans。
• 將一個具有特色的展示字型與一個中性但精緻的正文字型搭配。
• 使用等寬字型作為強調字體（用於標籤、類別、日期）可以增加編輯品質——JetBrains Mono, IBM Plex Mono, Space Mono。
• 混合字重——一個 900 字重的標題旁邊搭配一個 300 字重的內文，可以創造視覺張力。

字體排印執行細節：

• 使用 clamp() 進行流體字型縮放，而不是在斷點處跳躍
• 戲劇性的尺寸對比——在桌機上，標題可以達到 8vw 以上
• 在大型標題上使用負字距（-0.03em 到 -0.06em）
• 正文使用慷慨的行高（1.6–1.8），標題使用緊密的行高（0.9–1.1）
• 混合對齊方式——左對齊的正文，偶爾搭配右對齊的標籤或非對稱標題
• 在段落上使用 max-width（45–75ch），在標題上使用 text-wrap: balance
• 對類別、日期、元資料使用帶有寬字距（0.1em+）的大寫微型標籤

色彩即氛圍

• 從黑色和白色開始。只有在顏色能證明其存在的價值時才添加它。
• 使用一個主導色調，並帶有明確意圖——「這個顏色要傳達什麼情感領域？」
• 使用米白色和暖灰色（不是純 #ffffff 或 #000000）會感覺更具設計感——試試 #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D
• 具有一個對比點的同色系或相似色調色板，比彩虹色系顯得更精緻
• 正確的暗色主題：不僅僅是「白色文字在深灰色背景上」，而是考慮到背景分層，帶有微妙的暖色或冷色調
• 節制地使用色彩會產生更強烈的衝擊——在一片黑白中一個紅色的連結比到處都是紅色更強大

佈局即說故事

此技能的首要失敗模式是產生那些表面上看起來不同，但共享相同底層結構的網站——一個 Hero 區、三個編輯區塊、一個引言引用、一個表單、一個版權頁。在生成一批網站時，這會開始讓人感覺像是一個只有顏色不同的模板。必須積極地、刻意地對抗這一點。

結構 DNA 唯一性規則：

在編寫任何標記之前，大聲說出主要的結構概念——一個名詞短語，例如「索引手稿」或「黏性水平全景」。在同一批網站中，不能有兩個網站共享相同的主要結構概念。 如果前一個網站是黏性滾動敘事，那麼這個就不是。如果前一個網站是 33/67 垂直分割，那麼這個就不是。結構性想法是使用者首先注意到的——改變顏色而不改變結構只是表面功夫。

結構 DNA 目錄

這些是截然不同的主要結構。每次呼叫此技能時，應選擇一個概念並徹底執行。不要在一個網站中混合兩種結構（這會稀釋兩者的效果）。

1. 索引手稿 — 一個單一的長篇編輯欄，沒有分段。從上到下一個印刷節奏。整個頁面讀起來像是一份恰好是網站的手稿。（適合：主廚的菜單、調香師的信件、宣言。）
2. 黏性水平全景 — 頁面是一個長的垂直滾動，但當你滾動時所看到的是一個水平移動的場景。使用 position: sticky + 由滾動驅動的 translateX。（適合：委託作品的時間軸、分階段的流程、文物收藏。）
3. 雙面板永久分割 — 頁面總是 50/50（或 38/62）分割；一個面板是黏性的，另一個滾動。導航在面板內部進行，而不是透過滾動整個頁面。（適合：帶有即時更新索引的檔案庫、圖書館員的目錄。）
4. 幻燈片序列 — 全視口高度的「幻燈片」，每螢幕一個，帶有捕捉滾動。每張幻燈片都是完全不同的構圖。（適合：攝影師的專題作品集、畫廊導覽、編輯型目錄。）
5. 基座上的陳列品 — 一個單一的 3D/圖像主體居中放置，可旋轉，頁面的其餘部分是圍繞該主體運行的邊緣內容。（適合：單一產品品牌——一隻手錶、一個香水瓶、一個酒瓶。）
6. 固定敘事（Scrollytelling） — 一個佔據 2-4 個螢幕高度的區域被固定，而其內部內容會透過離散狀態（圖像交換、文字交換、進度）推進。在頁面中僅使用一次，作為其核心亮點。（適合：任務簡介、生產過程、建築倒塌研究。）
7. 水平導航 — 主要的頁面滾動是水平的。區塊從左到右閱讀。垂直滾動被禁用或保留用於細節顯示。（適合：鐘錶檔案、博物館展廳、電影製片廠的作品集。）
8. 側邊欄 + 欄位 — 一個持久的左側邊欄永不滾動（導航、元資料、持續的頁尾）；右側欄位是整個網站的內容。（適合：法律事務所、研究機構、學術出版社。）
9. 章節大門 — 在截然不同的色調區域之間，使用全視口的章節分隔線。每個章節都有自己的背景色、字體重量和佈局節奏。頁面在你向下滾動時改變性格。（適合：多學科工作室、回顧展。）
10. 分類帳 / 登記冊 — 頁面呈現為舊式文件——提貨單、登記冊、船舶貨物清單。表格行占主導地位；排版閱讀起來像分類帳。（適合：等候名單、批次登記冊、探險貨物清單。）
11. 拼貼 / 打破網格 — 雜誌風格的非對稱網格，帶有刻意的斷裂——放大的圖像溢出到欄位中、引言引用跨越欄間距、頁邊距中的腳註。（適合：編輯出版物、文化雜誌、創意工作室。）
12. 單一物件，無裝飾 — 網站僅僅是主題，可旋轉，下方有一個短句。沒有導航，沒有頁尾，幾乎沒有 UI。（適合：藝術家的單一作品發布、陳述性作品。）
13. 產品 UI 石板 — Hero 區域是產品自身介面的逼真模擬（儀表板圖塊、差異比較檢視、命令面板）。由產品即 UI 的科技/AI 品牌使用。（適合：AI IDE、開發工具。）
14. 儀表板圖塊網格 — 整個頁面的結構類似於一個生動的儀表板，帶有即時計數器、迷你趨勢圖、脈動指示燈。（適合：基礎設施、網路安全、可觀測性。）
15. 對話時間軸 — 頁面在使用者滾動時回放一個模擬的對話/逐字稿/通話。功能亮點錨定在特定時刻。（適合：語音 AI、支援平台、法律訪談。）

如何選擇概念：

• 從客戶的核心事實開始。一個其整體身份是九道菜菜單的餐廳想要一個索引手稿。一個其身份是精準度和單一機芯的製錶師想要一個基座上的陳列品。一個其品牌是每年一次旅程的探險公司想要一個固定敘事。
• 如果這個概念是本次會話中上次使用過的，則拒絕它。選擇次優的。
• 在編寫任何 JSX 之前，寫下概念和一句話的解釋。將其保留在提示檔案中。

佈局原則（在你選擇的任何結構概念中應用）：

• 刻意打破網格。全幅元素之後緊接著狹窄的文字欄位。放大的圖像溢出螢幕。非對稱的兩欄分割（60/40, 70/30）。
• 慷慨的空白不是浪費空間——它是奢華的信號。區塊之間的內邊距為 8rem+。
• 為作品集或圖庫設計的水平滾動區塊（做得好，不要作為主要的導航模式——除非你刻意選擇了水平導航）。
• 重疊的元素——文字疊在圖像上、圖像突破其容器、跨越區塊邊界的元素。
• 伴隨滾動的黏性元素——當內容滾動過去時，一個標籤保持靜止。

具體的微模式，看起來像高級品：

• 使用瀑布流或交錯網格來呈現視覺內容，而不是統一的網格。
• 使用混合混合模式（mix-blend-mode）讓文字與圖像重疊，以達到編輯效果。
• 帶有可見進度的編號或索引區塊。
• 一個可見的網格系統（微妙的線條或欄位），設計偶爾會打破它。
• 當你滾動經過時，內容會發生轉變——不僅僅是出現，而是變形、縮放、重新定位。
• 使用表格 / 分類帳行來呈現列表（批次、貨物清單、登記冊），而不是卡片網格。
• 表單欄位看起來像編輯文件的一部分，而不是 SaaS 表單——在襯線輸入框上方的小型等寬標籤，無邊框，僅底部邊框。

禁止重複（在一個技能會話中）：

• 不要給兩個網站都提供「黏性左欄 + 滾動右欄」的流程區塊。為一個網站選擇它；為另一個網站發明其他東西。
• 不要以「33/67 非對稱 Hero」開啟兩個網站。如果一個這樣做了，下一個應該以居中舞台、或全出血背景、或分類帳、或根本沒有 Hero 來開啟。
• 不要以相同的「諮詢表單 + 版權資訊網格」組合來結束兩個網站。改變結束的方式。

導覽列的多樣性——一個需要注意的隱性失敗模式。

最簡單的預設是使用 grid-template-columns: auto 1fr auto 的頂欄，其中「品牌標誌在左邊，某些東西置中，某些東西靠右對齊，mix-blend-mode: difference」。在三個網站之後，這開始讀起來像是一個簽名——而不是一個設計選擇。在每個會話中，大幅改變導覽列：

• 完全沒有導覽列（單一物件，無裝飾品牌）。
• 導覽列嵌入到黏性側邊欄中（側邊欄 + 欄位品牌）。
• 底部固定命令列，樣式類似於 ⌘K 啟動器（科技產品品牌——Cursor / Linear / Arc）。
• 內聯置中文字標誌，下方有作為次要條帶展開的標籤。
• 全寬水平滾動索引，同時充當導覽列。
• 跑馬燈導覽列——帶有區塊名稱的持續滾動的跑馬燈。
• 左側垂直導覽列，從下往上書寫。
• 狀態列導覽列，帶有即時操作指示燈。
• 跑馬燈動態條帶（基準價格、指標）加上一個細長的頂欄。

選擇屬於品牌和結構 DNA 的導覽列——不要預設使用三欄頂欄。

避免編輯式奢華的預設。

此技能在壓力下容易傾向於：暖奶油色背景、襯線展示字型（Fraunces / Cormorant）、等寬元資料、單一黃銅強調色、寬字距的大寫微型標籤、◦ 項目符號。這是一種真實的美學，適合高級時裝、香水、高級料理、鐘錶製造。它不適合科技、AI、網路安全、消費電子產品、SaaS 或開發者工具——並且反覆預設使用它會使一批網站中的所有網站看起來都像是由同一家代理商所做。

如果領域是科技，美學應該傾向於：純白或接近黑色的背景（非奶油色）；新怪誕無襯線字型（Söhne 風格、Inter Tight、IBM Plex Sans、Instrument Sans）作為顯...