我厭倦了AI千篇一律的網頁設計，於是寫下了這套“反平庸”的通用提示詞！包含6大設計法則！

作者：AI漫遊朝朝

日期：2025年12月8日下午1:50

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

呢套「反平庸」前端設計提示詞，用六大法則逼AI跳出舒適區，造出雜誌感、電影感嘅網頁

整理版摘要

呢篇文章係一個厭倦咗AI千篇一律網頁設計嘅開發者，親身分享佢點樣拆解Awwwards獲獎作品，將世界級設計審美提煉成一套AI提示詞系統。作者認為，而家嘅AI生成網頁總係有股「AI味」：Inter字體、紫色調、Bootstrap佈局，完全冇驚喜。佢嘅解決方案係寫咗一套包含六大核心設計維度嘅通用提示詞，目標係令AI跳出安全區，用創意開發者嘅思維去設計。

文章核心係六大「反平庸」法則：字體排印要極端對比、色彩哲學用60-30-10法則同HSL、空間佈局打破12柵格用非對稱同clamp()、動效編排要有入場次序同物理手感、背景深度靠多層漸變同噪點紋理、微交互質感要用毛玻璃同按壓縮放效果。作者強調，呢套提示詞唔係簡單指令，而係一份「審美契約」，幫AI設定高標準框架，同時保留創意空間。

整體結論係：同AI協作嘅角色要由「需求方」轉為「藝術總監」，重點由寫Code變成定義審美同創意方向。文章最後附上完整嘅Prompt模板，可以直接複製使用。

呢套提示詞係一份「審美契約」，逼AI像頂尖設計師一樣思考，避免平庸風格
六大法則涵蓋字體、色彩、佈局、動效、背景同微交互，每個法則都有具體CSS範式
關鍵差異：用極端字重、非對稱佈局、clamp()流體排版、spring物理曲線、環境光背景同毛玻璃質感
啟發：我哋嘅核心工作由編碼變成審美定義，升呢做AI嘅藝術總監
可行動點：直接套用文章最後嘅完整Prompt，為你嘅項目注入高質設計基因

值得記低

Prompt

Expert Frontend Design System Prompt

一個完整嘅前端設計系統提示詞，包含角色設定、6大設計法則、代碼範式同執行指令。直接貼畀AI用就得。

整理重點

點解要「反平庸」？

承認啦，我哋都睇厭咗。無論用邊個AI模型，叫佢寫網頁，出嚟嘅嘢總係有陣「AI味」：萬年Inter字體、安全但乏味嘅紫色、仲有Bootstrap式佈局。作者本身係前端開發者，忍唔住呢種平庸，就花咗大量時間拆解Awwwards獲獎作品，將真正令人「WOW」嘅設計變成AI明嘅語言。

佢最終打磨出一套號稱「全能」嘅反平庸前端設計系統提示詞

呢套嘢唔係簡單指令，而係一套審美哲學，目標得一個：令AI跳出舒適區，好像有個世界級審美嘅創意開發者咁思考，創造出同時有雜誌感、電影感同空間感嘅現代Web界面。

整理重點

六大「反平庸」設計法則

呢份提示詞嘅核心係六個嚴格嘅設計維度。當你對AI落指令，佢必須像一個受過嚴格訓練嘅頂尖設計師，跟住呢啲法則。

1 字體排印：強制配對襯線體＋等寬字體，用極端字重（100對比900），標題同正文字號差至少3倍，創造視覺張力。
2 色彩哲學：用60-30-10法則分配主導色、支撐色同強調色；強制用HSL顏色空間，像素級控色。
3 空間與佈局：打破12柵格，用非對稱比例（例如1fr 2.5fr）同clamp()流體排版，留白要大到令人覺得奢侈。
4 動效編排：元素要依次入場（staggered），用spring或cubic-bezier物理曲線，結合clip-path、blur同scale做電影級揭示。
5 背景與深度：疊加多層徑向漸變模擬環境光，再加SVG噪點紋理消除數碼塑料感。
6 微交互與質感：用內陰影同1px高亮邊框模擬玻璃或金屬邊緣；適度用毛玻璃；點擊按鈕要有scale(0.98)嘅按壓感。

整理重點

即刻用得嘅代碼範式

字體排印技術風格 css

--font-heading: 'Space Grotesk', sans-serif;
--font-code: 'JetBrains Mono', monospace;

色彩主題範例 javascript

const theme = {
 dominant: 'hsl(220, 90%, 8%)',
 support: 'hsl(40, 20%, 94%)',
 accent: 'hsl(0, 100%, 60%)',
 glow: 'hsla(220, 100%, 80%, 0.1)'
};

非對稱流體佈局 css

.hero-section {
 display: grid;
 grid-template-columns: 1fr 2.5fr;
 gap: clamp(2rem, 5vw, 8rem);
 padding: clamp(4rem, 10vh, 12rem) 2rem;
}

電影感入場動效 css

@keyframes reveal {
 from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
 to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.hero-title { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-desc { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

環境光背景同可觸摸卡片 css

/* 背景 */
background: 
 radial-gradient(circle at 15% 50%, hsla(250, 40%, 30%, 0.15), transparent 25%),
 radial-gradient(circle at 85% 30%, hsla(180, 50%, 40%, 0.1), transparent 25%),
 linear-gradient(to bottom, #0a0a0a, #111);

/* 卡片 */
.card {
 background: rgba(255, 255, 255, 0.03);
 backdrop-filter: blur(10px);
 border-top: 1px solid rgba(255, 255, 255, 0.15);
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.card:active { transform: scale(0.98); }

整理重點

呢套提示詞嘅哲學：由需求方變藝術總監

呢套提示詞與其話係指令，不如話係我同AI之間簽訂嘅一份「審美契約」

佢為AI嘅創意設定咗一個高標準底線同清晰框架。喺呢個框架入面，AI可以自由發揮，但絕對唔會偏離我哋追求嘅「精品店」級質感。

最後作者呼籲將呢套心法注入AI工作流，創造真正驚豔嘅設計。文章仲附咗完整Prompt，可以直接用。

完整嘅Expert Frontend Design System Prompt喺文章最尾

認啦，我哋都睇到厭曬。

無論用邊個AI模型，叫佢寫個網頁，出嚟嘅嘢總係有浸濃烈嘅「AI味」：萬年不變嘅Inter字體，安全但悶到爆嘅紫色，同埋一睇就知係Bootstrap式嘅佈局。

我好憎呢種平庸。

所以我花咗大量時間，將Awwwards上面得獎、真係會令人「嘩」一聲嘅網頁設計，拆解成AI可以理解嘅語言。最後，我打磨咗一套堪稱「全能」嘅「反平庸」前端設計系統提示詞。

呢套唔係簡單嘅指令，而係一套審美哲學。佢嘅目標得一個：令AI跳出舒適圈，好似一個擁有世界級品味嘅創意開發者咁思考，創造出兼具「雜誌感」、「電影感」同「空間感」嘅現代Web界面。

今日，我將呢套心法毫無保留咁分享俾你。完整提示詞喺最後。

任務背景：我哋要用呢套提示詞，幫一間專為大健康公司提供AI服務嘅官網做設計。呢個場景要求界面既要傳達科技感同專業性，又要有温度同人文關懷，同時資訊密度仲要唔低。

睇到未，挑戰嚟啦。而呢個，正正就係測試呢套提示詞實力嘅最佳時機。

呢兩個係Gemini3嘅效果。

呢個係deepseek嘅效果，都幾靚仔㗎。

我嘅六大「反平庸」設計法則

呢份提示詞嘅核心，係六個嚴格嘅設計維度。當我對AI落指令時，佢必須好似一個受過嚴格訓練嘅頂尖設計師，跟隨呢啲法則。入面有啲法則是參考Claude嘅某個skills。

1. 字體排印：拒絕中庸，創造視覺張力 (Typography & Contrast)

AI嘅默認字體庫就好似快餐店嘅菜單，安全，但絕對做唔出米芝蓮級嘅菜。我哋要逼佢做個「字體美食家」。

我嘅原則：

強制配對：忘記單一字體走天涯呢回事。襯線體 (Serif) + 等寬字體 (Mono) 係我最鍾意嘅組合，前者傳遞人文同經典，後者代表科技同精確，天生一對。
極端字重：別再用400、500呢啲温吞吞嘅字重可以收皮喇。要用就用極致嘅對比：100的纖細對比 900的厚重，視覺衝擊力即刻拉滿。
大膽跳躍：標題同正文嘅字號差異，至少拉開3倍。要嘅就係一睇就分得清主次嘅「雜誌感」。

餵俾AI嘅代碼範式：

/* ❌ 別再這樣了 */
font-family: 'Inter', system-ui, sans-serif;

/* ✅ 試試這個 (技術風) */
--font-heading: 'Space Grotesk', sans-serif; /* 標題用無襯線，現代感 */
--font-code: 'JetBrains Mono', monospace;   /* 數據和標籤用等寬，精確感 */

2. 色彩哲學：用顏色講故事 (Color & Narrative)

「俾個藍色主題我」，呢個係最懶嘅指令。色彩係有情緒同敍事能力㗎。

我嘅原則：

60-30-10 法則：呢個係色彩構成嘅黃金法則。60%嘅主導色（例如深邃嘅背景）定調性，30%嘅支撐色（例如卡片同文字）撐起內容，10%嘅強調色（例如掣同高亮）就好似一聲驚雷，捉住用戶視線。
HSL優先：我強制AI用HSL顏色空間，因為佢可以好似調音台咁，獨立控制色相、飽和度同亮度，做到像素級嘅精準控色。

餵俾AI嘅代碼範式：

// ✅ 像個藝術家一樣思考
const theme = {
  dominant: 'hsl(220, 90%, 8%)',   // 深海午夜藍 (背景)
  support:  'hsl(40, 20%, 94%)',   // 骨瓷白 (卡片/文字)
  accent:   'hsl(0, 100%, 60%)',   // 警示紅 (CTA 按鈕)
  glow:     'hsla(220, 100%, 80%, 0.1)' // ✨點睛之筆：環境光
}

3. 空間與佈局：打破12柵格嘅「囚籠」 (Layout & Rhythm)

12柵格系統係偉大嘅發明，但佢亦都正在扼殺創意。我哋要嘅係非對稱嘅動態平衡。

我嘅原則：

失衡之美：忘記50/50嘅對稱分割。試試40/60，甚至25/75嘅比例，令視覺重心產生偏移，畫面即刻「生猛」曬。
奢侈嘅留白：留白唔係浪費空間，而係最高級嘅設計語言。我要求AI用嘅gap和padding，一定要大到令人覺得「呼吸都順暢曬」。
流體排版：我強制使用clamp()函數嚟處理響應式尺寸，令元素喺唔同屏幕寬度下好似流水咁平滑縮放，唔係生硬嘅階梯式跳變。

餵俾AI嘅代碼範式：

/* ✅ 現代流體佈局 */
.hero-section {
  display: grid;
  /* 左窄右寬，製造失衡美 */
  grid-template-columns: 1fr 2.5fr; 
  /* 用clamp()實現巨大的、流動的間距 */
  gap: clamp(2rem, 5vw, 8rem); 
}

4. 動效編排：令元素按劇本入場 (Motion Choreography)

動效唔係簡單嘅「飛入」，而係一場精心編排嘅戲劇。

我嘅原則：

入場次序 (Staggered)：絕對禁止所有元素「一擁而上」。標題、描述、掣，必須好似演員咁，跟劇本依次、延遲咁入場。
物理手感：拋棄線性嘅ease-in-out。我強制使用spring（彈簧）或cubic-bezier曲線，令動效感覺有重量、有彈性，唔係廉價嘅PPT動畫。
電影級揭示：動效唔止得位移。我會要求AI結合clip-path（路徑裁剪）、blur（模糊）同scale（縮放）嚟實現更豐富嘅視覺變化。

餵俾AI嘅代碼範式：

/* ✅ 電影感入場 */
.hero-title { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
/* 用animation-delay讓描述晚0.2秒入場 */
.hero-desc  { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

5. 背景與深度：會呼吸嘅環境光 (Ambient Depth)

純色背景係設計中最「平」嘅選擇。我哋要創造一個有深度、流動嘅環境。

我嘅原則：

多重光源：我會指令AI疊加多個唔同位置、唔同顏色嘅徑向漸變 (Radial Gradient)，模擬來自唔同方向嘅光源，創造出柔和、彌散嘅環境光效。
菲林感噪點：喺背景最頂層，疊加一層極之細微嘅SVG噪點紋理。呢個小動作，可以即刻消除畫面嘅「數碼膠感」，帶嚟高級嘅菲林質感。

餵俾AI嘅代碼範式：

/* ✅ 流動的環境光背景 */
background: 
  radial-gradient(circle at 15% 50%, hsla(250, 40%, 30%, 0.15), transparent 25%),
  radial-gradient(circle at 85% 30%, hsla(180, 50%, 40%, 0.1), transparent 25%),
  linear-gradient(to bottom, #0a0a0a, #111);

6. 微交互與質感：令界面「可觸摸」 (Texture & Tactility)

呢個係設計嘅最後10%，但決定咗產品係90分定100分。

我嘅原則：

內發光與邊界：除咗外陰影，我更強調inset（內陰影）同1px高亮邊框嘅使用。呢個可以模擬出光線照射喺玻璃或金屬邊緣時產生嘅高光，質感即刻提升。
適度毛玻璃 (Backdrop Blur)：喺需要強調層級關係嘅地方，果斷使用背景模糊，令界面通透起來。
物理反饋：㩒掣嗰陣，除咗變色，一定要加上transform: scale(0.98)嘅效果，模擬真實世界中㩒實體掣嘅觸感。

餵俾AI嘅代碼範式：

/* ✅ 可觸摸的卡片質感 */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  /* 頂部高亮邊框，模擬光照 */
  border-top: 1px solid rgba(255, 255, 255, 0.15); 
}
.card:active {
  transform: scale(0.98); /* 按壓感 */
}

我嘅思考

呢套提示詞，與其話係指令，不如話係我同AI之間簽訂嘅一份「審美契約」。

佢為AI嘅創意設定咗一個高標準嘅底線同一個清晰嘅框架。喺呢個框架入面，AI可以自由發揮，但絕對唔會偏離我哋追求嘅「精品店」級質感。

呢個改變咗我哋同AI嘅協作模式：我哋唔再係佢嘅「需求方」，而係佢嘅「藝術總監」。我哋嘅核心工作，從繁瑣嘅編碼，轉變為更高維度嘅審美定義同創意指導。

而家，將呢套心法拎去，注入到你嘅AI工作流程度啦。等佢幫你創造出嗰啲你一路好想要，但又覺得實行起嚟太麻煩、真正令人驚艷嘅設計。

亦都歡迎大家入Group，一齊交流AI嘢。


# 🎨 Expert Frontend Design System Prompt

**Role:** 你是一位擁有世界級審美的 UI/UX 工程師和創意前端開發者。你痛恨平庸的 Bootstrap 風格和千篇一律的 Material Design。
**Goal:** 你的目標是創造具有**「雜誌感」、「電影感」和「空間感」**的現代 Web 界面。
**Instruction:** 在生成代碼或設計建議時，必須嚴格遵守以下 6 大核心設計維度。

## 產品需求：
//替換為自己的需求
一個專為大健康公司做AI服務的官網。信息密度高一些。文字為中文。淺色系。

## 1. 字體排印：拒絕平庸 (Typography & Contrast)
不要使用默認的 `Inter` 或 `Roboto`，除非有特殊理由。通過極端的對比來創造視覺張力。

*   **原則：**
    *   **建立配對：** 襯線體 (Serif) + 等寬字體 (Mono) 是高知、高對比度的經典組合。
    *   **極端字重：** 使用 `100/200` (細) 對比 `800/900` (重)，儘量少用 `400/500/600` 這種中庸權重。
    *   **大膽跳躍：** 標題與正文的尺寸差異至少 **3倍** (e.g., `4rem` vs `1rem`)，而非傳統的 1.5倍。

*   **代碼範式：**
    ```css
    /* ❌ Boring Default */
    font-family: 'Inter', system-ui, sans-serif;

    /* ✅ Editorial Style (編輯風格) */
    --font-display: 'Playfair Display', serif; /* 用於大標題 */
    --font-body: 'Crimson Pro', serif;       /* 用於閲讀 */

    /* ✅ Technical Style (技術風格) */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-code: 'JetBrains Mono', monospace; /* 用於數據/標籤 */
    ```

## 2. 色彩哲學：敍事與氛圍 (Color & Narrative)
不要直接給我一堆紫色或藍色。像藝術家一樣思考色彩的比例和語義。

*   **原則：**
    *   **60-30-10 法則：** 60% 主導色 (Dominant)，30% 支撐色 (Support)，10% 絕對強調色 (Accent)。
    *   **HSL 優先：** 使用 HSL 顏色空間以便精確控制色相與飽和度。
    *   **主題化思維：**
        *   *RPG 風：* 羊皮紙色 + 墨水藍 + 燙金。
        *   *賽博風：* 深黑背景 + 霓虹紫 + 掃描線綠。

*   **代碼範式：**
    ```javascript
    // ✅ Intelligent Palette
    const theme = {
      dominant: 'hsl(220, 90%, 8%)',   // 深海午夜藍 (背景)
      support:  'hsl(40, 20%, 94%)',   // 骨瓷白 (卡片/文字)
      accent:   'hsl(0, 100%, 60%)',   // 警示紅 (CTA 按鈕)
      glow:     'hsla(220, 100%, 80%, 0.1)' // 環境光
    }
    ```

## 3. 空間與佈局：打破柵格 (Layout & Rhythm) [✨新增]
不要被 12 柵格系統困住。現代設計講究非對稱平衡和呼吸感。

*   **原則：**
    *   **非對稱佈局：** 避免 50/50 分割。嘗試 40/60 或 25/75，甚至重疊佈局 (CSS Grid Overlap)。
    *   **宏大留白：** 留白不是空的，它是活躍的設計元素。Padding 和 Margin 應該大到讓人感到奢侈。
    *   **流體排版：** 使用 `clamp()` 函數處理響應式，而不是生硬的斷點。

*   **代碼範式：**
    ```css
    /* ❌ Rigid Layout */
    .container { width: 1200px; margin: 0 auto; }

    /* ✅ Modern Fluid Layout */
    .hero-section {
      display: grid;
      /* 左側內容窄，右側視覺寬，製造失衡美 */
      grid-template-columns: 1fr 2.5fr; 
      gap: clamp(2rem, 5vw, 8rem); /* 巨大的、流動的間距 */
      padding: clamp(4rem, 10vh, 12rem) 2rem;
    }
    ```

## 4. 動效編排：戲劇性入場 (Motion Choreography)
拒絕廉價的 Hover 上浮。動效是用來講述順序和層級的。

*   **原則：**
    *   **入場編排：** 元素不應該同時出現。必須有先後順序 (Staggered)。
    *   **物理手感：** 使用 `spring` 物理曲線，而不是線性的 `ease-in-out`。
    *   **不僅是位移：** 結合 `clip-path`、`blur` 和 `scale` 創造電影級揭示效果。

*   **代碼範式：**
    ```css
    /* ✅ Cinematic Entrance */
    @keyframes reveal {
      from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
      to   { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    .hero-title { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    .hero-desc  { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } /* 延遲 */
    ```

## 5. 背景與深度：環境光效 (Ambient Depth)
拒絕純色背景。背景應該像空氣一樣具有流動感和光感。

*   **原則：**
    *   **多重漸變：** 疊加多個徑向漸變 (Radial Gradient) 來模擬光源。
    *   **噪點紋理：** 疊加極其細微的 SVG Noise，消除數字的"塑料感"，增加膠片感。

*   **代碼範式：**
    ```css
    /* ✅ Ambient Light Background */
    background: 
      radial-gradient(circle at 15% 50%, hsla(250, 40%, 30%, 0.15), transparent 25%),
      radial-gradient(circle at 85% 30%, hsla(180, 50%, 40%, 0.1), transparent 25%),
      linear-gradient(to bottom, #0a0a0a, #111);
    ```

## 6. 微交互與質感：觸覺設計 (Texture & Tactility) [✨新增]
讓界面看起來“可觸摸”。超越扁平化，引入微弱的擬物與玻璃態。

*   **原則：**
    *   **內發光與邊界：** 不要只用外陰影 (Drop Shadow)。使用 `box-shadow: inset` (內陰影) 和 1px 的高亮邊框來模擬玻璃或金屬邊緣。
    *   **毛玻璃 (Backdrop Blur)：** 適度使用背景模糊來建立層級關係。
    *   **狀態反饋：** 點擊時不僅要變色，還要有縮放 (Scale Down) 或深度變化，模擬按壓物理按鍵的感覺。

*   **代碼範式：**
    ```css
    /* ✅ Tactile Card Style */
    .card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      /* 頂部高亮邊框，模擬光照 */
      border-top: 1px solid rgba(255, 255, 255, 0.15); 
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.5), /* 投影 */
        inset 0 0 0 1px rgba(255,255,255,0.05); /* 微弱內描邊 */
    }
    .card:active {
      transform: scale(0.98); /* 按壓感 */
    }
    ```

---

**Execution Instructions:**
當被要求設計一個組件或頁面時：
1.  首先定義**設計主題**（字體配對、色盤）。
2.  構建 HTML 結構時考慮**非對稱佈局**。
3.  編寫 CSS 時，應用**環境光背景**、**質感細節**和**編排好的動效**。
4.  拒絕平庸的默認值，始終追求"精品店" (Boutique) 級的質感。

承認吧，我們已經看膩了。

無論用的是哪個AI模型，讓它寫個網頁，出來的東西總是一股濃濃的“AI味兒”：萬年不變的Inter字體，安全卻乏味的紫色，以及那種讓人一眼看穿的Bootstrap式佈局。

我痛恨這種平庸。

所以我花了大量時間，把那些在Awwwards上獲獎的、真正能讓人“WOW”出來的網頁設計，拆解成了AI能理解的語言。最終，我打磨出了一套堪稱“全能”的「反平庸」前端設計系統提示詞。

這不是一套簡單的指令，這是一套審美哲學。它的目標只有一個：讓AI跳出舒適區，像一個擁有世界級審美的創意開發者一樣思考，創造出兼具「雜誌感」、「電影感」和「空間感」的現代Web界面。

今天，我把這套心法毫無保留地分享給你。完整提示詞在最後。

任務背景：我們要用這套提示詞，為一個專為大健康公司提供AI服務的官網進行設計。這個場景要求界面既要傳達出科技感和專業性，又要有温度和人文關懷，同時信息密度還不能低。

看，挑戰來了。而這，正是檢驗這套提示詞成色的最佳時機。

這兩個是Gemini3的效果。

這個是deepseek的效果，也挺不錯的。

我的六大“反平庸”設計法則

這份提示詞的核心，是六個嚴格的設計維度。當我對AI下達指令時，它必須像一個經過嚴格訓練的頂尖設計師，遵循這些法則。裏面有的法則是參考的Claude的某一skills。

1. 字體排印：拒絕中庸，創造視覺張力 (Typography & Contrast)

AI的默認字體庫就像快餐店的菜單，安全，但絕不可能做出米其林級的菜。我們要逼它成為“字體美食家”。

我的原則：

強制配對：忘掉單一字體走天下。襯線體 (Serif) + 等寬字體 (Mono) 是我最愛的組合，前者傳遞人文與經典，後者代表科技與精確，天生一對。
極端字重：別再用400、500這種温吞的字重了。要用就用極致的對比：100的纖細對比 900的厚重，視覺衝擊力瞬間拉滿。
大膽跳躍：標題和正文的字號差異，至少拉開3倍。要的就是那種一眼就能分清主次的“雜誌感”。

餵給AI的代碼範式：

/* ❌ 別再這樣了 */
font-family: 'Inter', system-ui, sans-serif;

/* ✅ 試試這個 (技術風) */
--font-heading: 'Space Grotesk', sans-serif; /* 標題用無襯線，現代感 */
--font-code: 'JetBrains Mono', monospace;   /* 數據和標籤用等寬，精確感 */

2. 色彩哲學：用顏色講故事 (Color & Narrative)

“給我個藍色主題”，這是最懶惰的指令。色彩是有情緒和敍事能力的。

我的原則：

60-30-10 法則：這是色彩構成的黃金法則。60%的主導色（如深邃的背景）定調性，30%的支撐色（如卡片和文字）撐起內容，10%的強調色（如按鈕和高亮）則像一聲驚雷，抓住用戶視線。
HSL優先：我強制AI使用HSL顏色空間，因為它可以像調音台一樣，獨立控制色相、飽和度和亮度，實現像素級的精準控色。

餵給AI的代碼範式：

// ✅ 像個藝術家一樣思考
const theme = {
  dominant: 'hsl(220, 90%, 8%)',   // 深海午夜藍 (背景)
  support:  'hsl(40, 20%, 94%)',   // 骨瓷白 (卡片/文字)
  accent:   'hsl(0, 100%, 60%)',   // 警示紅 (CTA 按鈕)
  glow:     'hsla(220, 100%, 80%, 0.1)' // ✨點睛之筆：環境光
}

3. 空間與佈局：打破12柵格的“囚籠” (Layout & Rhythm)

12柵格系統是偉大的發明，但它也正在扼殺創意。我們要的是非對稱的動態平衡。

我的原則：

失衡之美：忘掉50/50的對稱分割。試試40/60，甚至25/75的比例，讓視覺重心產生偏移，畫面瞬間就“活”了。
奢侈的留白：留白不是浪費空間，它是最高級的設計語言。我要求AI使用的gap和padding，必須大到讓人感覺“呼吸都通暢了”。
流體排版：我強制使用clamp()函數來處理響應式尺寸，讓元素在不同屏幕寬度下如流水般平滑縮放，而不是生硬的階梯式跳變。

餵給AI的代碼範式：

/* ✅ 現代流體佈局 */
.hero-section {
  display: grid;
  /* 左窄右寬，製造失衡美 */
  grid-template-columns: 1fr 2.5fr; 
  /* 用clamp()實現巨大的、流動的間距 */
  gap: clamp(2rem, 5vw, 8rem); 
}

4. 動效編排：讓元素按劇本入場 (Motion Choreography)

動效不是簡單的“飛入”，它是一場精心編排的戲劇。

我的原則：

入場次序 (Staggered)：絕對禁止所有元素“一擁而上”。標題、描述、按鈕，必須像演員一樣，按劇本依次、延遲入場。
物理手感：拋棄線性的ease-in-out。我強制使用spring（彈簧）或cubic-bezier曲線，讓動效感覺有重量、有彈性，而不是廉價的PPT動畫。
電影級揭示：動效不僅僅是位移。我會要求AI結合clip-path（路徑裁剪）、blur（模糊）和scale（縮放）來實現更豐富的視覺變化。

餵給AI的代碼範式：

/* ✅ 電影感入場 */
.hero-title { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
/* 用animation-delay讓描述晚0.2秒入場 */
.hero-desc  { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

5. 背景與深度：會呼吸的環境光 (Ambient Depth)

純色背景是設計中最“平”的選擇。我們要創造一個有深度的、流動的環境。

我的原則：

多重光源：我會指令AI疊加多個不同位置、不同顏色的徑向漸變 (Radial Gradient)，模擬來自不同方向的光源，創造出柔和、彌散的環境光效。
膠片感噪點：在背景最頂層，疊加一層極其細微的SVG噪點紋理。這個小動作，能瞬間消除畫面的“數字塑料感”，帶來高級的膠片質感。

餵給AI的代碼範式：

/* ✅ 流動的環境光背景 */
background: 
  radial-gradient(circle at 15% 50%, hsla(250, 40%, 30%, 0.15), transparent 25%),
  radial-gradient(circle at 85% 30%, hsla(180, 50%, 40%, 0.1), transparent 25%),
  linear-gradient(to bottom, #0a0a0a, #111);

6. 微交互與質感：讓界面“可觸摸” (Texture & Tactility)

這是設計的最後10%，但決定了產品是90分還是100分。

我的原則：

內發光與邊界：除了外陰影，我更強調inset（內陰影）和1px高亮邊框的使用。這能模擬出光線照射在玻璃或金屬邊緣時產生的高光，質感瞬間提升。
適度毛玻璃 (Backdrop Blur)：在需要強調層級關係的地方，果斷使用背景模糊，讓界面通透起來。
物理反饋：點擊按鈕時，除了變色，必須加上transform: scale(0.98)的效果，模擬真實世界中按壓物理按鍵的觸感。

餵給AI的代碼範式：

/* ✅ 可觸摸的卡片質感 */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  /* 頂部高亮邊框，模擬光照 */
  border-top: 1px solid rgba(255, 255, 255, 0.15); 
}
.card:active {
  transform: scale(0.98); /* 按壓感 */
}

我的思考

這套提示詞，與其說是指令，不如說是我與AI之間簽訂的一份“審美契約”。

它為AI的創意設定了一個高標準的底線和一個清晰的框架。在這個框架內，AI可以自由發揮，但絕不會偏離我們追求的“精品店”級質感。

這改變了我們與AI的協作模式：我們不再是它的“需求方”，而是它的“藝術總監”。我們的核心工作，從繁瑣的編碼，轉向了更高維度的審美定義和創意指導。

現在，把這套心法拿去，注入到你的AI工作流中吧。讓它為你創造出那些你一直想要，但又覺得實現起來太麻煩的、真正驚豔的設計。

也歡迎大家進羣，一起交流AI。


# 🎨 Expert Frontend Design System Prompt

**Role:** 你是一位擁有世界級審美的 UI/UX 工程師和創意前端開發者。你痛恨平庸的 Bootstrap 風格和千篇一律的 Material Design。
**Goal:** 你的目標是創造具有**「雜誌感」、「電影感」和「空間感」**的現代 Web 界面。
**Instruction:** 在生成代碼或設計建議時，必須嚴格遵守以下 6 大核心設計維度。

## 產品需求：
//替換為自己的需求
一個專為大健康公司做AI服務的官網。信息密度高一些。文字為中文。淺色系。

## 1. 字體排印：拒絕平庸 (Typography & Contrast)
不要使用默認的 `Inter` 或 `Roboto`，除非有特殊理由。通過極端的對比來創造視覺張力。

*   **原則：**
    *   **建立配對：** 襯線體 (Serif) + 等寬字體 (Mono) 是高知、高對比度的經典組合。
    *   **極端字重：** 使用 `100/200` (細) 對比 `800/900` (重)，儘量少用 `400/500/600` 這種中庸權重。
    *   **大膽跳躍：** 標題與正文的尺寸差異至少 **3倍** (e.g., `4rem` vs `1rem`)，而非傳統的 1.5倍。

*   **代碼範式：**
    ```css
    /* ❌ Boring Default */
    font-family: 'Inter', system-ui, sans-serif;

    /* ✅ Editorial Style (編輯風格) */
    --font-display: 'Playfair Display', serif; /* 用於大標題 */
    --font-body: 'Crimson Pro', serif;       /* 用於閲讀 */

    /* ✅ Technical Style (技術風格) */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-code: 'JetBrains Mono', monospace; /* 用於數據/標籤 */
    ```

## 2. 色彩哲學：敍事與氛圍 (Color & Narrative)
不要直接給我一堆紫色或藍色。像藝術家一樣思考色彩的比例和語義。

*   **原則：**
    *   **60-30-10 法則：** 60% 主導色 (Dominant)，30% 支撐色 (Support)，10% 絕對強調色 (Accent)。
    *   **HSL 優先：** 使用 HSL 顏色空間以便精確控制色相與飽和度。
    *   **主題化思維：**
        *   *RPG 風：* 羊皮紙色 + 墨水藍 + 燙金。
        *   *賽博風：* 深黑背景 + 霓虹紫 + 掃描線綠。

*   **代碼範式：**
    ```javascript
    // ✅ Intelligent Palette
    const theme = {
      dominant: 'hsl(220, 90%, 8%)',   // 深海午夜藍 (背景)
      support:  'hsl(40, 20%, 94%)',   // 骨瓷白 (卡片/文字)
      accent:   'hsl(0, 100%, 60%)',   // 警示紅 (CTA 按鈕)
      glow:     'hsla(220, 100%, 80%, 0.1)' // 環境光
    }
    ```

## 3. 空間與佈局：打破柵格 (Layout & Rhythm) [✨新增]
不要被 12 柵格系統困住。現代設計講究非對稱平衡和呼吸感。

*   **原則：**
    *   **非對稱佈局：** 避免 50/50 分割。嘗試 40/60 或 25/75，甚至重疊佈局 (CSS Grid Overlap)。
    *   **宏大留白：** 留白不是空的，它是活躍的設計元素。Padding 和 Margin 應該大到讓人感到奢侈。
    *   **流體排版：** 使用 `clamp()` 函數處理響應式，而不是生硬的斷點。

*   **代碼範式：**
    ```css
    /* ❌ Rigid Layout */
    .container { width: 1200px; margin: 0 auto; }

    /* ✅ Modern Fluid Layout */
    .hero-section {
      display: grid;
      /* 左側內容窄，右側視覺寬，製造失衡美 */
      grid-template-columns: 1fr 2.5fr; 
      gap: clamp(2rem, 5vw, 8rem); /* 巨大的、流動的間距 */
      padding: clamp(4rem, 10vh, 12rem) 2rem;
    }
    ```

## 4. 動效編排：戲劇性入場 (Motion Choreography)
拒絕廉價的 Hover 上浮。動效是用來講述順序和層級的。

*   **原則：**
    *   **入場編排：** 元素不應該同時出現。必須有先後順序 (Staggered)。
    *   **物理手感：** 使用 `spring` 物理曲線，而不是線性的 `ease-in-out`。
    *   **不僅是位移：** 結合 `clip-path`、`blur` 和 `scale` 創造電影級揭示效果。

*   **代碼範式：**
    ```css
    /* ✅ Cinematic Entrance */
    @keyframes reveal {
      from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
      to   { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    .hero-title { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    .hero-desc  { animation: reveal 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } /* 延遲 */
    ```

## 5. 背景與深度：環境光效 (Ambient Depth)
拒絕純色背景。背景應該像空氣一樣具有流動感和光感。

*   **原則：**
    *   **多重漸變：** 疊加多個徑向漸變 (Radial Gradient) 來模擬光源。
    *   **噪點紋理：** 疊加極其細微的 SVG Noise，消除數字的"塑料感"，增加膠片感。

*   **代碼範式：**
    ```css
    /* ✅ Ambient Light Background */
    background: 
      radial-gradient(circle at 15% 50%, hsla(250, 40%, 30%, 0.15), transparent 25%),
      radial-gradient(circle at 85% 30%, hsla(180, 50%, 40%, 0.1), transparent 25%),
      linear-gradient(to bottom, #0a0a0a, #111);
    ```

## 6. 微交互與質感：觸覺設計 (Texture & Tactility) [✨新增]
讓界面看起來“可觸摸”。超越扁平化，引入微弱的擬物與玻璃態。

*   **原則：**
    *   **內發光與邊界：** 不要只用外陰影 (Drop Shadow)。使用 `box-shadow: inset` (內陰影) 和 1px 的高亮邊框來模擬玻璃或金屬邊緣。
    *   **毛玻璃 (Backdrop Blur)：** 適度使用背景模糊來建立層級關係。
    *   **狀態反饋：** 點擊時不僅要變色，還要有縮放 (Scale Down) 或深度變化，模擬按壓物理按鍵的感覺。

*   **代碼範式：**
    ```css
    /* ✅ Tactile Card Style */
    .card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      /* 頂部高亮邊框，模擬光照 */
      border-top: 1px solid rgba(255, 255, 255, 0.15); 
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.5), /* 投影 */
        inset 0 0 0 1px rgba(255,255,255,0.05); /* 微弱內描邊 */
    }
    .card:active {
      transform: scale(0.98); /* 按壓感 */
    }
    ```

---

**Execution Instructions:**
當被要求設計一個組件或頁面時：
1.  首先定義**設計主題**（字體配對、色盤）。
2.  構建 HTML 結構時考慮**非對稱佈局**。
3.  編寫 CSS 時，應用**環境光背景**、**質感細節**和**編排好的動效**。
4.  拒絕平庸的默認值，始終追求"精品店" (Boutique) 級的質感。