Feihong Design System

高奢品牌設計系統 · 工作流程手冊

本文件是設計系統的「作業系統」，定義了從需求到交付的完整流程。本文件是設計系統的「大腦」，規定了從需求到交付的完整工作流程。

使命：產出藝術性精緻、具有 Feihong 品牌辨識度、且無可置疑地人性化的作品——絕不看起來像 AI 生成。 核心目標：產出不像 AI 的、有 Feihong 品牌辨識度的、藝術且有品質的設計作品。

十大場景

所有 10 個場景皆為生產就緒，每個場景都包含完整的規範與模板。

編號	場景	規範	模板	核心特徵
01	作品集/個人主頁	`scenes/portfolio.md`	`assets/portfolio.html`	不對稱英雄區、Bento 網格、封蠟、編輯器風格
02	活動頁/落地頁	`scenes/landing.md`	`assets/landing.html`	轉換驅動、時間線、講者、CTA 表單
03	教程/長文/部落格	`scenes/tutorial.md`	`assets/tutorial.html`	首字下沉、閱讀進度、目錄、書籍級排版
04	簡報/Slides	`scenes/deck.md`	`assets/deck.html`	全螢幕、16:9、鍵盤導航、9 種版面、F 鍵全螢幕
05	案例研究/專案回顧	`scenes/case-study.md`	`assets/case-study.html`	敘事弧、資料視覺化、深色面板
06	後台控制台/儀表板	`scenes/console.md`	`assets/console.html`	管理儀表板、側邊欄導航、終端機綠、KPI 卡片、資料圖表
07	社交卡片/小紅書	`scenes/cards.md`	`assets/cards.html`	3:4 直式、分頁、html2canvas PNG 匯出
08	簡歷/CV	`scenes/resume.md`	`assets/resume.html`	A4 列印、單頁、無動畫、Ctrl+P PDF
09	公眾號/微信圖文	`scenes/wechat.md`	內嵌 HTML	微信內嵌樣式、無外部 CSS/JS
10	郵件行銷/EDM	`scenes/email.md`	`assets/email.html`	表格佈局、內嵌樣式、Outlook 相容

觸發條件

當請求符合以下情境時，系統會自動啟動：

觸發關鍵字	場景類型
個人主頁、個人網站、Portfolio、作品集、作品展示、專案展示	Portfolio
Landing Page、落地頁、活動頁、報名頁、課程頁、發佈會	Landing
教程、教學、科普、部落格、文章頁、長文、專欄	Tutorial
簡報、slides、幻燈片、deck、演講、分享會	Deck
案例研究、Case Study、專案回顧、設計過程	Case Study
後台控制台、功能頁、看板、儀表板、工具頁	Console
圖文卡片、小紅書圖文、社交卡片、朋友圈圖	Cards
簡歷、CV、履歷	Resume
郵件模板、EDM、Newsletter、訂閱郵件	Email
公眾號排版、微信圖文	WeChat

自適應判斷：對於簡單修改（例如「改變按鈕顏色」、「新增一個章節」），使用快速路徑。對於新頁面/完整設計，使用完整 8 步驟工作流程。 自適應判斷：需求簡單時走快速路徑；新建頁面/完整設計走完整 8 步工作流。

⚡ 快速路徑（簡單修改）

適用於：

對現有頁面的小幅修改
單一元件的調整、文字替換、顏色微調
回饋後的局部修改
單一章節的新增

流程：

讀取現有 HTML 檔案
依照 DNA.md 標準套用修改
快速驗證與變更相關的 P0 項目
若變更影響顏色/字體/佈局 → 檢查相關 P0 項目
交付

不適用於快速路徑：全新完整頁面、跨越 3 個以上章節的變更、色板調整、整體風格變更。

📋 Feihong 8 步驟工作流程

步驟 01 — 洞察需求（自適應分類）

在開始之前，快速評估從使用者輸入中已知的資訊：

類型明確嗎？（屬於哪個場景？）
受眾明確嗎？（為誰而做？）
規模已知嗎？（多少個畫面/頁面/卡片/投影片？）
素材可用嗎？（文案/圖片/資料/頭像/IP 角色）
限制明確嗎？（必須包含的要素、品牌合作夥伴、禁止元素）

決策規則：

4 項以上明確 → 跳到步驟 03
2-3 項明確 → 僅追問缺失的關鍵問題
0-1 項明確 → 進入步驟 02 進行完整確認

步驟 02 — 定調定向（必要時澄清）

不要機械式地詢問所有 5 個問題。基於步驟 01，僅追問缺失的關鍵問題。

需確認的核心問題（僅選擇缺失的部分）：

類型（不確定時）：提供 2-3 個最可能選項，非開放式
受眾（未提及時）：「主要受眾是誰？」
規模（未說明時）：「大約需要多少個畫面/頁面/卡片？」
素材（未提供文案時）：「您有準備好的文案、圖片或資料嗎？」
限制（有特殊需求時）：「有任何必須包含的元素或合作品牌的顏色嗎？」

溝通原則：像設計師與客戶溝通，不像填表。使用自然語言，一次最多問 2-3 個問題。 溝通原則：像設計師跟客戶溝通，不像填表。用自然語言，一次最多問 2-3 個問題。

步驟 03 — 品牌注入（讀取規範）

必讀（每個專案）：

DNA.md — 牢記以下要件：
- 🔴 精確顏色值：#0A2463（皇家藍 55%）、#F4D35E（復古金 30%）、#D8315B（酒紅 15%）
- 🔴 字體策略：Playfair Display（襯線標題）+ Inter（無襯線內文）+ Cormorant Garamond（斜體引言）+ JetBrains Mono（程式碼）
- 🔴 優先順序：反 AI 感 > 藝術品質 > 人文溫度 > 設計師眼光
- 🔴 暖奶油色背景 #FDFBF6、墨黑色文字 #0D1225
- 🔴 關鍵禁止事項
- 🔴 來自 MOTION.md 的動態語言（緩動、持續時間、原則）

選擇性閱讀（依場景類型）— 開始工作前讀取對應的場景規範：

編號	場景	規範	模板
01	作品集/個人主頁	`scenes/portfolio.md`	`assets/portfolio.html`
02	落地頁	`scenes/landing.md`	`assets/landing.html`
03	教程/長文	`scenes/tutorial.md`	`assets/tutorial.html`
04	簡報	`scenes/deck.md`	`assets/deck.html`
05	案例研究	`scenes/case-study.md`	`assets/case-study.html`
06	後台控制台	`scenes/console.md`	`assets/console.html`
07	社交卡片	`scenes/cards.md`	`assets/cards.html`
08	簡歷/CV	`scenes/resume.md`	`assets/resume.html`
09	微信圖文	`scenes/wechat.md`	內嵌 HTML
10	郵件/EDM	`scenes/email.md`	`assets/email.html`

讀取後，你必須清楚 5 件事：

此場景的典型結構/節奏是什麼？
有技術限制嗎？（郵件表格、微信內嵌樣式、簡報全螢幕）
三個品牌色在此場景中的角色是什麼？
核心情緒基調是什麼？（莊重？動感？專業？藝術？）
是否有任何場景特定的禁忌？

步驟 04 — 架構搭建（選擇起點）

預設策略：從模板開始改，從不從零寫。 預設策略：從模板開始改，不從零寫。

所有 10 個場景模板 — 從適當的模板開始，絕不從零起步：

編號	場景	模板	特別說明
01	作品集	`assets/portfolio.html`	專案網格、視覺優先、不對稱英雄區、封蠟
02	落地頁	`assets/landing.html`	CTA 驅動、視覺衝擊、時間線、表單互動
03	教程	`assets/tutorial.html`	長文閱讀、目錄導航、進度條、首字下沉
04	簡報	`assets/deck.html`	全螢幕投影片、鍵盤導航、16:9、F 全螢幕
05	案例研究	`assets/case-study.html`	情境→挑戰→過程→結果敘事、資料視覺化
06	後台控制台	`assets/console.html`	管理儀表板、側邊欄導航、終端機綠、KPI 卡片、資料圖表
07	社交卡片	`assets/cards.html`	3:4 直式分頁、html2canvas PNG 匯出
08	簡歷	`assets/resume.html`	A4 單頁、適合列印、Ctrl+P PDF
09	微信	內嵌 HTML	微信相容、內嵌樣式、無外部 CSS/JS
10	郵件	`assets/email.html`	表格佈局、內嵌樣式、Outlook 相容

何時偏離模板：

模板結構真的不適用（但 CSS 變數、字體匯入、基本重置必須保留）
使用者明確要求獨特的設計方法
品牌權杖（:root CSS 變數）、字體匯入、基本重置樣式必須始終保留

模板修改原則：

保留模板的 :root CSS 變數
保留字體的 <link> 標籤
替換內容區域、調整佈局結構
不要移除基本樣式重置

步驟 05 — 元件編排（方向設定與佈局）

這是對抗 AI 通用輸出最關鍵的步驟——AI 沒有「方向判斷」，它直接組裝。這一步決定了產出是「設計」還是「組裝」。 這是最容易被跳過但最重要的步驟——AI 沒有「方向判斷」，它直接組裝。這一步決定了產出是「設計」還是「組裝」。

在填入元件之前，定義 4 個方向決策：

5a. 情緒基調（選擇 1-2 個主要）

沉穩權威：大量留白、皇家藍主導、金色點綴、襯線標題、極簡動畫
活力創意：金色與酒紅更活躍、不對稱佈局、元素突破容器、稍多動畫
藝術畫冊：大圖、文字作為視覺元素、圖片溢出容器、大量留白、深色面板
溫暖人文：更多 Cormorant 斜體、稍高酒紅比例、暖色調、出現 IP 角色
專業極簡：克制用色、大量留白、較高 Inter 比例、幾何精準

5b. 英雄區策略（選擇 1 個）

視覺主導：大圖 / IP / 抽象視覺為主、極簡文字
字體主導：大標題 + 引文為主、視覺元素為輔
肖像主導：頭像 / IP 角色為中心、文字在旁
資料/成就主導：大數字 + 標籤為主、建立信任

5c. 簽名元素（選擇 1-2 個貫穿頁面）

金色裝飾線（標題下方）
大型裝飾數字 / 英文（低透明度背景）
襯線斜體引用
IP 角色 / 頭像穿插
金色圓點作為列表 / 時間線標記
圖片溢出容器
深藍色面板打破節奏
Feihong 簽名系列元素（封蠟、相片角、花飾 ❦、首字下沉、大型引言）

5d. 節奏規劃

總畫面/頁數：___
密度節奏：密集→稀疏→密集→稀疏？或強→弱→強？
視覺驚喜畫面放在哪裡？
深色面板？在哪裡？

方向輸出：你不需要寫下來，但它必須在你的腦中非常清晰。後續的佈局和元件選擇都服務於這個方向。

然後從 components/14-layouts.md 為每個章節/頁面選擇佈局模式。

核心原則：每個章節必須使用不同的佈局。佈局選擇服務於 5a-5d 設定的方向。

步驟 06 — 簽名點睛（元件填入）

從 components/ 檔案中選擇適當的元件。

🔴 硬規則（P0 層級）：禁止使用任何 HTML 預設樣式。 🔴 硬規則（P0 級別）：禁止使用任何 HTML 預設樣式。

具體的零預設樣式要求：

❌ 預設 <blockquote>（左邊框是 Notion/Feishu 通用）
❌ 預設 border-left 引言區塊
❌ 無樣式的 <ul>/<ol>（必須自訂——金色圓點、襯線數字、自訂圖示）
❌ 預設 <table> 邊框
❌ 預設藍色底線連結
❌ 預設按鈕樣式（灰色、3D 效果、預設邊框）
❌ 預設輸入框樣式
❌ 預設表單控制樣式
✅ 所有元件從元件庫選擇
✅ 不在元件庫中的元件：設計與 DNA.md 一致，絕不使用瀏覽器預設

品牌注入檢查點：

連結：皇家藍 #0A2463，懸停時金色底線/背景色調
按鈕：主要為皇家藍、CTA 為酒紅、次要為金色外框/填滿
引言區塊：大型金色襯線引言 + Cormorant 斜體 + 金色裝飾線
列表標記：金色圓點或 Playfair Display 襯線數字
標籤/徽章：金色填滿（次要）、酒紅填滿（強調）、皇家藍淺背景（分類）
標題：Playfair Display 襯線，可選金色裝飾短線在下方
分隔線：不是簡單的 border-bottom；使用金色細線 + 漸變淡出或金色圓點分隔符
動畫（如果有）：輕、慢、克制、cubic-bezier(0.16, 1, 0.3, 1)、無彈跳

Feihong 簽名系列 — 強烈建議用於所有場景：

首字下沉（教程的首段）
邊欄註記（教程側邊註釋）
封蠟（作品集/認證感）
相片角（作品集/編輯器感）
金色簽名（文章結尾/關於頁面）
花飾 ❦（章節分隔線）
N° 序列徽章（編號項目、限量版感）

步驟 07 — 精工細作（品質自檢）

這是最關鍵的步驟。不能跳過。 這是關鍵的一步，不能跳過。

對照 QUALITY.md + DNA.md 品質閘門標準逐一檢查。

🔴 P0 — 必過（一條不過就必須改）

[此處後續內容因原文截斷而省略]

ifeihong/feihong-design-system

feihong-design-system 是什麼？

在你喜歡的 AI 中提問

說明文件