joyeking/redesigned-portfolio

tasteskill：反套路前端技能

登陸頁面、作品集與重新設計。不處理儀表板、資料表格或多步驟產品 UI。 以下所有規則都是視情況而定。沒有一個規則會自動觸發。請先閱讀需求摘要，然後只選取符合的部分。

---

0. 需求摘要推論（先看清楚狀況）

在接觸程式碼或調整參數之前，請推論使用者真正想要的是什麼。大多數 LLM 的設計輸出之所以糟糕，是因為模型直接跳到了預設美學，而不是先看清楚狀況。

0.A 先讀取這些信號

1. 頁面類型 - 登陸頁（SaaS / 消費者 / 代理商 / 活動）、作品集（開發者 / 設計師 / 創意工作室）、重新設計（保留 vs 徹底翻新）、社論 / 部落格。
2. 使用者使用的氛圍詞彙 - 「極簡」、「平靜」、「Linear 風格」、「Awwwards」、「粗獷主義」、「高端消費者」、「Apple 風格」、「活潑」、「嚴肅 B2B」、「社論」、「代理商風格」、「玻璃擬態」、「暗色科技」。
3. 參考信號 - 他們提供的網址、貼上的截圖、提到的產品、競爭的品牌。
4. 目標受眾 - B2B 採購小組 vs. 注重設計的消費者 vs. 瀏覽作品集的招募人員。受眾決定美學，而不是你的個人品味。
5. 已存在的品牌資產 - 標誌、顏色、字體、攝影。在重新設計時，這些是起點材料，不是可選輸入（請參閱第 11 節）。
6. 隱含限制 - 無障礙優先的受眾、公共部門、受監管行業、信任優先的商業模式、兒童產品。這些限制凌駕於美學偏好之上。

0.B 在產生程式碼前，先輸出一行「設計解讀」

在任何程式碼之前，用一句話說明：「解讀為：<頁面類型> 給 <目標受眾>，使用 <氛圍> 語言，傾向於 <設計系統或美學家族>。」

範例解讀：

• 「解讀為：B2B SaaS 登陸頁給技術買家，使用 Linear 風格的極簡語言，傾向於 Tailwind 工具類 + Geist + 克制的動畫。」
• 「解讀為：獨立設計師作品集給招募經理，使用社論 / 動態字體語言，傾向於原生 CSS + 滾動驅動動畫 + 自訂排版。」
• 「解讀為：公共部門服務網站重新設計，使用信任優先語言，傾向於 GOV.UK Frontend 或 USWDS。」

0.C 如果需求摘要不明確，問一個問題，不要猜測

只問一個釐清問題 - 絕對不要一次問一堆問題 - 而且只有在設計解讀確實出現分歧時才問。範例：「這個應該更接近 Linear 的乾淨風格還是 Awwwards 的實驗性風格？」

如果你能從上下文自信地推斷出來，就不要問。直接宣告設計解讀並繼續進行。

0.D 反預設原則

不要預設使用：AI 紫色漸層、暗色網格上的置中英雄區、三個相同的功能卡片、通用的玻璃擬態效果、無處不在的無限循環微動畫、Inter 字型 + slate-900 顏色。這些都是 LLM 的預設值。請根據設計解讀，有意識地繞過它們。

---

1. 三個旋鈕（核心配置）

在設計解讀之後，設定三個旋鈕。以下所有佈局、動畫和密度決策都受這些旋鈕的約束。

• DESIGN_VARIANCE：8 - 1 = 完美對稱，10 = 藝術混亂
• MOTION_INTENSITY：6 - 1 = 靜態，10 = 電影級 / 物理
• VISUAL_DENSITY：4 - 1 = 美術館 / 通風，10 = 駕駛艙 / 充滿資料

基準值： 8 / 6 / 4。除非設計解讀覆蓋了它們，否則使用這些值。不要要求使用者編輯這個檔案 - 覆蓋動作應在對話中進行。

1.A 旋鈕推論（設計解讀 → 旋鈕值）

信號	VARIANCE	MOTION	DENSITY
「極簡 / 乾淨 / 平靜 / 社論 / Linear 風格」	5-6	3-4	2-3
「高端消費者 / Apple 風格 / 奢華 / 品牌」	7-8	5-7	3-4
「活潑 / 狂野 / Dribbble / Awwwards / 實驗性 / 代理商」	9-10	8-10	3-4
「登陸頁 / 作品集 / 行銷網站（預設）」	7-9	6-8	3-5
「信任優先 / 公共部門 / 受監管 / 無障礙關鍵」	3-4	2-3	4-5
「重新設計 - 保留」	符合現有	+1	符合現有
「重新設計 - 徹底翻新」	+2	+2	符合現有

1.B 使用案例預設值

使用案例	VARIANCE	MOTION	DENSITY
登陸頁（SaaS，主流）	7	6	4
登陸頁（代理商 / 創意）	9	8	3
登陸頁（高端消費者）	7	6	3
作品集（設計師 / 工作室）	8	7	3
作品集（開發者）	6	5	4
社論 / 部落格	6	4	3
公共部門服務	3	2	5
重新設計 - 保留	符合現有	符合現有+1	符合現有
重新設計 - 徹底翻新	+2	+2	符合現有

1.C 旋鈕如何驅動輸出

將這些值（或使用者覆蓋的值）用作全域變數。本文檔中的交叉引用都指向這些確切的變數名稱 - 決不要發明別名，例如 LAYOUT_VARIANCE 或 ANIM_LEVEL。

---

2. 需求摘要 → 設計系統對應表

一旦你有了設計解讀（第 0 節）和旋鈕（第 1 節），選擇正確的基礎。不要為那些已有官方套件的東西發明 CSS。不要假裝一個美學趨勢是一個官方系統。

2.A 何時該使用真正的設計系統（使用官方套件）

需求解讀為…	選擇	原因
Microsoft / 企業 SaaS / 儀表板	@fluentui/react-components 或 @fluentui/web-components	官方 Fluent UI，Microsoft 標記，內建無障礙
Google 風格 UI，Material 風格的產品	@material/web + Material 3 標記	官方，可透過 Material Theming 設定主題
IBM 風格 B2B / 企業分析	@carbon/react + @carbon/styles	官方 Carbon，成熟的資料密度模式
Shopify 應用程式介面	polaris.js Web Components / Polaris React	Shopify 管理 UI 必須使用
Atlassian / Jira 風格產品	@atlaskit/* + @atlaskit/tokens	官方 Atlassian 設計系統
GitHub 風格開發工具 / 社群頁面	@primer/css 或 @primer/react-brand	官方 Primer；Brand 變體用於行銷
英國公共部門服務	govuk-frontend	法律 / 法規上期望使用
美國公共部門 / 信任優先	uswds	同上
快速本地商家 / 代理商 MVP	Bootstrap 5.3	無聊、快速、有效
現代無障礙 React 基礎	@radix-ui/themes	基本元件 + 精美主題
現代 SaaS，你擁有元件	shadcn/ui（npx shadcn@latest add ...）	你擁有程式碼，易於自訂；絕不運送預設狀態
基於 Tailwind 的現代 SaaS / 人工智慧行銷	Tailwind v4 工具類 + dark: 變體	獨立開發者和小團隊建構的預設選擇

誠實規則： 如果需求解讀屬於上述系統之一，請安裝並使用官方套件。不要手動重現其 CSS。不要導入系統的標記但又覆蓋掉 90%。

每個專案只用一個系統。 不要在同一個專案樹中混用 Fluent React 和 Carbon。不要將 shadcn/ui 元件導入 Material 3 應用程式中。

2.B 當需求摘要是一種美學，而非系統時

對於這些方向，沒有單一官方套件。使用原生 CSS + Tailwind + 一個維護良好的元件庫來建構。在程式碼註解中誠實說明什麼是借用靈感，什麼是官方材料。

美學	誠實實作
玻璃擬態 / 「磨砂玻璃」	backdrop-filter，分層邊框，高光疊層。為 prefers-reduced-transparency 提供純色填充後備方案。
Bento（Apple 風格的方塊網格）	CSS Grid 搭配混合單元格尺寸。沒有單一函式庫擁有它。
粗獷主義	原生 CSS，等寬字體，原始邊框。沒有函式庫。
社論 / 雜誌	襯線字體，不對稱網格，充足的留白。沒有函式庫。
暗色科技 / 駭客	等寬字體 + 強調霓虹色，終端機主題。沒有函式庫。
極光 / 網格漸層	SVG 或分層放射狀漸層。沒有函式庫。
動態排版	原生 CSS 動畫，滾動驅動動畫，GSAP 用於進階控制。沒有函式庫。
Apple 液態玻璃	Apple 僅在 Apple 平台上記錄此效果。沒有官方的 liquid-glass.css。 Web 實作是使用 backdrop-filter + 分層邊框 + 高光的近似方案。清楚標示為近似方案。

---

3. 預設架構與慣例

除非設計解讀選擇了真正的設計系統（第 2.A 節），否則使用以下預設值：

3.A 技術棧

• 框架： React 或 Next.js。預設使用伺服器元件（RSC）。
  • RSC 安全： 全域狀態只能在用戶端元件中運作。在 Next.js 中，將提供者包裹在一個 "use client" 元件中。
  • 互動隔離： 任何使用 Motion、滾動監聽器或指針物理的元件，必須是隔離的葉子元件，並在頂部加上 'use client'。伺服器元件僅渲染靜態佈局。
• 樣式： Tailwind v4（預設）。僅在現有專案要求時才使用 Tailwind v3。
  • 對於 v4：不要在 postcss.config.js 中使用 tailwindcss 外掛。使用 @tailwindcss/postcss 或 Vite 外掛。
• 動畫： Motion（前身為 Framer Motion 的函式庫）。從 motion/react 導入（import { motion } from "motion/react"）。framer-motion 套件仍可作為舊版別名使用 - 在新程式碼中偏好使用 motion/react。
• 字型： 始終使用 next/font（Next.js）或透過 @font-face + font-display: swap 自行託管。在生產環境中，決不透過 <link> 連結 Google Fonts。

3.B 狀態

• 使用 useState / useReducer 處理隔離的 UI 狀態。
• 僅在需要避免深度 prop drilling 時使用全域狀態 - 可選用 Zustand、Jotai 或 React context。
• 絕對不要使用 useState 來追蹤由使用者輸入驅動的連續值（滑鼠位置、滾動進度、指針物理、磁吸懸停）。請使用 Motion 的 useMotionValue / useTransform / useScroll。useState 會在每次變化時重新渲染整個 React 樹，並在行動裝置上崩潰。

3.C 圖示

• 允許的函式庫（優先順序）： @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。
• 不鼓勵： lucide-react。僅在使用者明確要求或專案已經依賴它時才可接受。
• 絕對不要手寫 SVG 圖示。 如果缺少某個字形，請安裝第二個函式庫或從基礎元件組合 - 不要從頭繪製圖示路徑。
• 每個專案只用一個系列。 不要在同一個元件樹中混用 Phosphor 和 Lucide。
• 全域統一 strokeWidth（例如 1.5 或 2.0）。

3.D Emoji 政策

在程式碼、標記和可見文字中，預設不鼓勵使用 Emoji。請用圖示庫的字形來取代符號。覆蓋規則： 僅在使用者明確要求活潑 / 聊天風格 / 社群原生氛圍時才允許使用 Emoji - 即使是這種情況，也要有目的地謹慎使用。

3.E 響應式與佈局機制

• 統一斷點（sm 640，md 768，lg 1024，xl 1280，2xl 1536）。
• 使用 max-w-[1400px] mx-auto 或 max-w-7xl 來限制頁面佈局。
• 視口穩定性： 對於全高英雄區，絕對不要使用 h-screen。始終使用 min-h-[100dvh] 以防止在行動裝置（iOS Safari 網址列）上出現佈局跳動。
• 網格優先於 Flex 計算： 絕對不要使用複雜的 flexbox 百分比數學（w-[calc(33%-1rem)]）。始終使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）。

3.F 相依性驗證（強制性）

在導入任何第三方函式庫之前，請檢查 package.json。如果缺少該套件，請先輸出安裝命令。決不要假設某個函式庫存在。

---

4. 設計工程指令（偏差修正）

LLM 預設使用陳腔濫調。請主動覆蓋這些預設值。每個規則都有一個根據情境的覆蓋路徑。

4.1 字型排版

• 標題 / 主標題： 預設 text-4xl md:text-6xl tracking-tighter leading-none。

• 內文 / 段落： 預設 text-base text-gray-600 leading-relaxed max-w-[65ch]。

• 無襯線字體選擇：

  • 不鼓勵作為預設： Inter。請先選擇 Geist、Outfit、Cabinet Grotesk、Satoshi 或適合品牌的襯線字體。
  • 覆蓋： 當使用者明確要求中性 / 標準 / Linear 風格的感覺，或需求是公共部門 / 無障礙優先的網站時，可以使用 Inter。

• 需要知道的字體配對： Geist + Geist Mono、Satoshi + JetBrains Mono、Cabinet Grotesk + Inter Tight、GT America + IBM Plex Mono。

• 襯線字體紀律（非常不鼓勵作為預設）：

  • 對於任何專案，非常不鼓勵將襯線字體作為預設字體。「它感覺很有創意 / 高級 / 社論風格」不是使用襯線字體的理由。代理預設認為「創意需求 = 襯線字體」的思維模型，是生產環境中反覆測試出的最常見的人工智慧標誌。
  • 僅在以下情況之一明確成立時，才可接受使用襯線字體：
    • 品牌需求中明確提到了某個襯線字體名稱，或者
    • 美學家族確實是社論 / 奢華 / 出版 / 手稿 / 傳統 / 復古風格，並且你能清楚說明為什麼這個特定的襯線字體適合這個特定的品牌
  • 對於所有其他情況（創意代理商、設計工作室、現代品牌、高端消費者、作品集、生活方式），預設使用無襯線標題字體（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）。無襯線標題字體並不是「無聊」的——它們是預設選擇，就像黑色是時尚界的預設選擇一樣。
  • 強調規則（相關）： 當你想在標題中強調某個詞（例如動態的「and spatial design」這種手法）時，請使用同一字體的斜體或粗體。不要為了增加視覺趣味，就在一個無襯線標題中隨意插入一個襯線字體單詞（反之亦然）。混合字體家族的強調是業餘的做法。同一家族內使用斜體/粗體才是正確做法。
  • 特別禁止作為預設： Fraunces 和 Instrument_Serif（兩個 LLM 最喜歡的標題襯線字體）。
  • 如果使用襯線字體是合理的（根據以上準則，這種情況很少見），請從以下列表中輪換選擇，不要在不同專案中重複使用同一個襯線字體：PP Editorial New、GT Sectra Display、Cardinal Grotesque、Reckless Neue、Tiempos Headline、Recoleta、Cormorant Garamond、Playfair Display、EB Garamond、IvyPresto、Migra、Editorial Old、Saol Display、Söhne Breit Kursiv、Domaine Display、Canela、Schnyder、Tobias、NB Architekt、I

…

[為翻譯而截斷]