22 種網站設計風格，同一個幫你換風格嘅 Prompt

你係一位資深前端設計師。幫我將我個網站改成「黏土風（Claymorphism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

黏土風風格要點：
- 感覺：軟綿綿、脹卜卜，好似用黏土捏出嚟嘅玩具感介面。
- 顏色：Pastels on a light lavender base: #f6ecff background, pink #ffb4d9, mint #a8f0d1, sky #a9d6ff, butter #ffe08a, dark plum #3b2a5c text.
- 字體：A rounded sans such as Fredoka, Nunito or Quicksand. Bold, chunky headings.
- 形狀同質感：大圓角（24–40px）。每張卡同每個掣都有兩層內陰影（左上光、右下暗），再加一層柔和嘅浮起陰影，睇落似充咗氣。
- 標誌性細節：浮喺度、似 3D 嘅圓形同 icon，粗身 pill 形按鈕，㩒落去會輕輕壓扁。
- 動態：Gentle bobbing float on decorative shapes; buttons scale to 0.96 on press.
- 避免：粉色字配粉色底——內文一定要用深色。品牌唔係走童趣路線就唔好整到太幼稚。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「數碼核心風（Cybercore）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

數碼核心風風格要點：
- 感覺：90 年代尾、2000 年代嘅網絡未來感：藍光、線框地球、鉻金屬字、舊電腦彈出視窗。
- 顏色：Midnight #020b1f base, electric blue #2a6dff, ice #bfe9ff, aqua #7fffd4 accents, silver-chrome gradients.
- 字體：Orbitron or Michroma for display, Share Tech Mono or VT323 for body and labels.
- 形狀同質感：幼身發光邊框、半透明深色面板，仲有扮系統視窗嘅對話框：漸變標題列加立體灰色按鈕。
- 標誌性細節：背景有淡淡嘅 0101 或掃描線紋理、一個慢慢轉嘅線框球，標題用鉻金屬漸變再加藍色光暈。
- 動態：Slow sphere rotation, subtle flicker on hover, typed-out terminal text.
- 避免：唔好將繁複紋理直接放喺內文後面，段落要放喺實色深底面板上。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「新粗獷主義（Neo-Brutalism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

新粗獷主義風格要點：
- 感覺：粗獷又自信：粗黑邊、冇模糊嘅硬陰影、大膽撞色。
- 顏色：Ink #111 on cream #fff8e7, with flat yellow #ffe14d, pink #ff7ab6, blue #6fc3ff and green #7cf29c blocks.
- 字體：Space Grotesk for body, Archivo Black or Lexend Mega for big uppercase headings.
- 形狀同質感：所有元素都有 3px 實心黑邊，加一個冇模糊嘅硬陰影（6px 6px 0 #111）。圓角細或者冇。
- 標誌性細節：似貼紙嘅標籤、一條會捲動嘅跑馬燈、略為打斜嘅重點字、唔同顏色嘅編號步驟卡。
- 動態：Buttons "press" into their shadow on hover (translate 6px, shadow to 0). No easing flourishes.
- 避免：唔好每樣嘢都嗌到咁大聲，留一個平靜啲嘅位，等主要 CTA 突出。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「剪貼簿風（Scrapbook）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

剪貼簿風風格要點：
- 感覺：拍立得相、和紙膠帶、戲飛、memo 紙同手寫字砌成嘅拼貼。
- 顏色：Kraft #d9c3a0 background, paper #fbf6ea, washi yellow #fff6a8, faded red #c2410c, pencil blue #1d4ed8.
- 字體：Permanent Marker for headings, Caveat for handwritten notes, Special Elite (typewriter) for body.
- 形狀同質感：有真實陰影嘅紙卡、橫間或格仔紙紋理、用 clip-path 整嘅撕紙邊、角位貼住半透明膠紙。
- 標誌性細節：元素打斜幾度、互相疊住，相片用拍立得框，有手寫箭咀同註腳，加 emoji 貼紙。
- 動態：Cards straighten slightly on hover; minimal otherwise.
- 避免：用 absolute 定位嘅拼貼喺手機會散晒——768px 以下要整齊咁疊返落嚟。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「超現實主義（Surrealism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

超現實主義風格要點：
- 感覺：似發夢咁、唔合邏輯：浮喺半空嘅物件、天上有道門、巨型眼睛、比例怪異。
- 顏色：A dusk sky gradient — #9ec5f0 to rose #f7c6c7 to sand #d99a6c — with deep plum #2b1d3a text.
- 字體：Playfair Display italic (or another elegant serif) for headings, Inter for body.
- 形狀同質感：少用實體卡片。內容浮喺一個滿版場景上面，浮起嘅物件下面有長長嘅柔和影。
- 標誌性細節：每個 section 放一件刻意「唔啱」嘅物件（浮起嘅門、通去無處嘅樓梯、風景入面嘅眼），留大量天空空白。
- 動態：Slow floating loops (6–8s), drifting objects, gentle parallax on scroll.
- 避免：冇概念嘅亂加裝飾。為品牌揀一個視覺隱喻，然後重複用。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「Y2K 千禧風（Y2K Aesthetic）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

Y2K 千禧風風格要點：
- 感覺：千禧年嘅樂觀感：鉻金屬、泡泡字、彩虹光澤、閃閃星星、粉紅同 baby blue。
- 顏色：Pink #ffd1f7, baby blue #c8e7ff, lilac #e9d5ff, butter #fff0b3, deep purple #2a0a4a text, silver chrome gradients.
- 字體：Rubik Bubbles or Bungee for display, Syne Mono for labels, Nunito for body.
- 形狀同質感：有多段鉻金屬漸變嘅光面 pill 按鈕，半透明「泡泡」卡加白邊同內發光。
- 標誌性細節：閃爍 ✦ 星星、蝴蝶同星形、訪客計數器橫條、彩虹漸變背景。
- 動態：Twinkling sparkles, a slow shimmer across chrome on hover.
- 避免：一次過用晒所有 Y2K 元素。揀三樣代表性嘅就夠。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「像素風（Pixel Art）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

像素風風格要點：
- 感覺：8-bit、16-bit 遊戲畫面：硬朗像素格、有限顏色、點陣字體。
- 顏色：A 16-colour game palette, e.g. night #1e1b4b, stone #475569, grass #22c55e, red #e52521, gold #fcd000, black #000.
- 字體：Press Start 2P for headings and buttons, VT323 or Silkscreen for body. Pixel fonts only at large sizes.
- 形狀同質感：梯級形「像素」邊框（四邊 box-shadow、零圓角），平塗顏色，唔用漸變同模糊。加 image-rendering: pixelated。
- 標誌性細節：HUD 式數據列（生命、金幣、關卡）、一個原創細像素角色、像素雲同方塊。
- 動態：steps() animations only — sprites hop in 4 frames, buttons nudge up 3px on hover.
- 避免：細字用像素字體，同埋抄真實遊戲角色。內文用易讀嘅等寬字。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「合成波霓虹風（Synthwave）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

合成波霓虹風風格要點：
- 感覺：80 年代復古未來：霓虹格仔地平線、橫紋日落太陽、鉻金屬 logo、洋紅同青色光。
- 顏色：Void #0b0221, purple #2a0845, magenta #ff2bd6, hot pink #ff2975, sun yellow #ffd319, cyan #00e5ff.
- 字體：Monoton or Audiowide for the logo, a brush script (Kaushan Script) for accents, Rajdhani for body.
- 形狀同質感：深色 section 配霓虹邊框同外發光；外框按鈕發青色光。
- 標誌性細節：首屏有透視霓虹格仔地板、橫紋半個太陽、山嘅剪影、鉻金屬漸變標題。
- 動態：The grid scrolls toward the viewer in a loop; neon flickers once on load.
- 避免：內文加霓虹光。只係標題同按鈕發光，段落用深底白字就夠。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「毛玻璃風（Glassmorphism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

毛玻璃風風格要點：
- 感覺：磨砂玻璃面板浮喺彩色模糊圖形上面。
- 顏色：Deep base #1b1240 with vivid blurred orbs (pink #ff5fa2, blue #4f8cff, teal #38e8c6); glass is white at 10–30% opacity.
- 字體：Inter, Manrope or Plus Jakarta Sans. Clean, medium weights.
- 形狀同質感：background: rgba(255,255,255,.12)；backdrop-filter: blur(20px) saturate(160%)；1px rgba(255,255,255,.28) 邊；圓角 20–24px。
- 標誌性細節：一層層略為重疊嘅卡片；首屏後面有大大嚿柔和色塊；磨砂效果嘅固定導航列。
- 動態：Blobs drift slowly; cards lift 2–4px on hover.
- 避免：文字對比度靠背後啲咩嚟決定。每段字都要喺背景最花嗰度測試清唔清楚。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「新擬物風（Neumorphism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

新擬物風風格要點：
- 感覺：由同一隻顏色嘅表面凸出嚟、或者壓落去嘅柔和介面。
- 顏色：Surface #e4e9f0, shadow #bec5d0, highlight #ffffff, one accent #5b7cfa, text #4a5568.
- 字體：Poppins or Nunito Sans, medium weight.
- 形狀同質感：背景同元素用同一隻色。凸起：9px 9px 18px #bec5d0, -9px -9px 18px #fff。壓落：同樣數值改做 inset。圓角 16–28px。
- 標誌性細節：旋鈕、開關掣同滑桿；用「凸起變壓落」表示啟動狀態。
- 動態：Short 150ms transitions between raised and pressed.
- 避免：按鈕對比度太低、融埋落背景。每個可以㩒嘅元素都要有顏色字、icon 或者外框。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「便當格（Bento Grid）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

便當格風格要點：
- 感覺：將內容排成一格格唔同大細嘅圓角方塊，好似便當盒咁。
- 顏色：Dark #0c0c0e with zinc tiles #18181b and borders #27272a, plus one brand accent (e.g. #6366f1). A light version uses #f5f5f7.
- 字體：Inter Tight, Geist or Satoshi; tight letter-spacing on headings.
- 形狀同質感：CSS grid（4 欄、行高約 190px）；方塊跨 1–2 欄同行；圓角 20–28px；每格只講一樣嘢。
- 標誌性細節：混合唔同類型：一格大主角、一格大數字、細圖表、產品 mockup、logo 牆、用主色嘅 CTA 格。
- 動態：Tiles fade up in sequence on scroll; subtle hover lift.
- 避免：每格都一模一樣。內容類型要有變化，細啲嘅螢幕要縮做 2 欄再 1 欄。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「雜誌編輯風（Editorial Design）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

雜誌編輯風風格要點：
- 感覺：將雜誌、報紙排版搬上網：報頭、分欄、首字放大、引言。
- 顏色：Newsprint #faf8f3, ink #161616, one accent red #b91c1c for kickers.
- 字體：Playfair Display (900 weight) for headlines, Source Serif or Newsreader for body, small uppercase Inter for labels and bylines.
- 形狀同質感：唔用卡片。結構靠線條：雙線報頭、幼身分欄線、故事之間嘅髮絲線。
- 標誌性細節：欄目標籤 → 大標題 → 斜體導言 → 作者名；::first-letter 首字放大；全闊斜體引言；圖片下有說明。
- 動態：Almost none. Let typography do the work.
- 避免：喺手機用多欄內文——分欄只用喺闊螢幕同短段落。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「瑞士風格（Swiss Design）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

瑞士風格風格要點：
- 感覺：1950 年代國際主義平面風格：嚴格網格、大號無襯線字、只用一隻訊號色。
- 顏色：Off-white #f2f0eb, black #111, and Swiss red #e30613 as the only colour.
- 字體：Inter Tight, Helvetica or Neue Haas Grotesk. Display at 900 weight, letter-spacing -0.05em, line-height 0.85. Flush left, ragged right.
- 形狀同質感：冇陰影、冇圓角。一個睇得出嘅 12 欄網格，所有嘢都對齊佢。
- 標誌性細節：超大標題、一個平塗紅色圓形或長條做唯一圖形、頂部幼線配四欄資料、用髮絲線分隔嘅表格式列表。
- 動態：Minimal — rows invert to red on hover.
- 避免：裝飾。只靠大細、粗幼同留白去製造吸引力。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「極簡主義（Minimalism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

極簡主義風格要點：
- 感覺：「少，但更好」：只留最必要嘅內容，用留白去說話。
- 顏色：White #ffffff, black #111, greys #666 and #f4f4f2. No accent colour, or one used once.
- 字體：One typeface (Inter or Neue Montreal), two weights at most, light 300 for body.
- 形狀同質感：冇邊框冇陰影。section 之間有好大嘅垂直空間（15–25vh）。
- 標誌性細節：每屏只講一件事，CTA 用一條有底線嘅文字連結，產品相放喺淺灰底上。
- 動態：Slow fades only.
- 避免：為咗極簡而收埋用戶需要嘅嘢（導航、價錢、購買按鈕）。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「極繁主義（Maximalism）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

極繁主義風格要點：
- 感覺：「多就係好」：撞圖案、幾款字體、飽和色同密集拼貼。
- 顏色：Hot pink #ff3cac, yellow #ffe600, cyan #00e0ff, purple #7b2ff7, deep #1a0033.
- 字體：Mix four: Bungee Shade (display), Abril Fatface (subheads), Rubik Mono One (labels), Pacifico (accents), DM Sans (body).
- 形狀同質感：粗邊加兩層唔同顏色嘅錯位陰影；用圖案填色——波點、豹紋、棋盤格、間條。
- 標誌性細節：會轉嘅徽章、跑馬燈、超大字疊住圖、貼紙同 emoji，唔留空位。
- 動態：Marquees, spinning badges, bouncy hover states.
- 避免：冇咗層次。亂嘅底下一定要有一個清楚嘅標題同一個清楚嘅 CTA。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「奢華字體風（Luxury Typography）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

奢華字體風風格要點：
- 感覺：以字體主導嘅奢華感：高對比襯線字、拉闊字距嘅大楷、金色髮絲線、大量留白。
- 顏色：Black #0d0c0a, cream #f3ede2, antique gold #c8a96a.
- 字體：Bodoni Moda or Cormorant Garamond for display (huge, with italic accents in gold); Montserrat Light uppercase with 4–10px letter-spacing for labels.
- 形狀同質感：唔用卡片。1px 金線同垂直髮絲線；外框按鈕，hover 時填滿金色。
- 標誌性細節：置中對稱排版；每個標題上面有細細隻、拉闊字距嘅小標；section 用羅馬數字。
- 動態：Slow (600–900ms) fades and letter-spacing reveals.
- 避免：髮絲線同字距細到喺普通螢幕睇唔到。小標最少 11px。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「手繪草圖風（Conceptual Sketch）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

手繪草圖風風格要點：
- 感覺：手畫、仲喺度做緊嘅感覺：鉛筆線框、格仔紙、箭咀同旁註。
- 顏色：Paper #fdfcf7, graphite #2b2f3a, blueprint grid #e6eef8, highlighter #fde68a, red pen #dc2626, blue pen #2563eb.
- 字體：Architects Daughter or Kalam for headings and UI, Caveat for annotations.
- 形狀同質感：歪歪哋嘅邊框（border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px），加 SVG feTurbulence 變形濾鏡；用斜線填充嘅圖片位。
- 標誌性細節：重點字後面有螢光筆痕、手寫箭咀指住功能、手畫圓圈入面嘅步驟編號。
- 動態：Lines draw themselves in on scroll (stroke-dashoffset).
- 避免：睇落未做完。底下嘅間距同層次一定要清晰。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「空靈夢幻風（Ethereal）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

空靈夢幻風風格要點：
- 感覺：輕盈柔和：粉彩光線、光暈、薄霧、浮動光點同纖幼襯線字。
- 顏色：Lavender #e9d5ff, powder blue #bfdbfe, blush #fbcfe8, cream #fffaf0, soft plum text #4b4462.
- 字體：Cormorant Garamond light and italic for headings, Jost Light for body, wide-tracked small caps for nav.
- 形狀同質感：頂部係拱形嘅半透明白色面板（border-radius: 200px 200px 24px 24px）；所有嘢後面有大片模糊色塊（blur 80px）。
- 標誌性細節：首屏有柔和白色光環、慢慢升起嘅光點、充足嘅留白。
- 動態：Slow drifting glows (15–20s loops); respect prefers-reduced-motion.
- 避免：字色太淡。內文對比度都要有 4.5:1。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「波希米亞風（Bohemian）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

波希米亞風風格要點：
- 感覺：大地感、自由奔放：拱門、太陽紋、編織圖案、植物同溫暖嘅自然色。
- 顏色：Terracotta #c0623b, mustard #d9a441, sage #8a9a6b, sand #f3e6d3, clay #e8c9a9, cocoa #3e2a1f.
- 字體：Fraunces (soft serif with italics) for headings, Karla for body, Caveat for small handwritten accents.
- 形狀同質感：拱頂相框（border-radius: 200px 200px 0 0）、一層層嘅彩虹拱、section 之間有編織間條。
- 標誌性細節：太陽圖案、標題上面一句手寫標語、陶土色 pill 按鈕、真實產品相。
- 動態：Gentle fade-ins; the sun can rotate very slowly.
- 避免：用裝飾代替真實相片——波希米亞風靠產品同人帶出氣氛。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「維多利亞風（Victorian）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

維多利亞風風格要點：
- 感覺：華麗嘅 19 世紀風格：雕花框、大馬士革花紋、哥德字、火漆印同寶石色。
- 顏色：Burgundy #5a1622, forest #1f3a2d, antique gold #b8924a, parchment #f1e6cf, ink brown #2a1a12.
- 字體：UnifrakturMaguntia (blackletter) for the logo only, IM Fell English and IM Fell English SC for headings, Playfair Display SC for labels.
- 形狀同質感：雙層、三層框（border + outline 配 outline-offset + 疊起嘅 box-shadow 圈）、有暗角嘅羊皮紙面板、大馬士革花紋背景。
- 標誌性細節：角位花飾 ❦ ✤ ❧、置中對稱排版、華麗首字、火漆印徽章、「Est. MDCCCLXXII」式年份。
- 動態：None needed; at most a slow fade.
- 避免：要人讀嘅字用哥德體，同埋喺手機花紋多到迫爆內容。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「賽博朋克（Cyberpunk）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

賽博朋克風格要點：
- 感覺：「高科技、低生活」：近黑底配霓虹、有角嘅 HUD 面板、故障字效、直排漢字。
- 顏色：Near-black #0a0a12, warning yellow #fcee0a, cyan #00f0ff, red-magenta #ff003c.
- 字體：Orbitron or Chakra Petch for headings, Rajdhani for body, Noto Sans JP for kanji accents.
- 形狀同質感：用 clip-path 切角、左邊有青色邊嘅 HUD 面板、成頁鋪一層掃描線。
- 標誌性細節：RGB 錯位故障標題（::before/::after 配錯開嘅 clip-path）、帶量度條嘅數據列、黃色實心按鈕、直排日文。
- 動態：Short glitch bursts on the headline, flicker on hover — disabled under prefers-reduced-motion.
- 避免：不停閃爍（有誘發癲癇風險），同埋每個面板都塞滿特效。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。

你係一位資深前端設計師。幫我將我個網站改成「侘寂風（Wabi-Sabi）」風格，但唔好改內容同功能。

我個網站：[貼網址、上載截圖，或者貼 code／講要改邊幾個 file]

侘寂風風格要點：
- 感覺：日本嘅不完美之美：安靜、自然、有質感、唔對稱。
- 顏色：Washi #efe9df, charcoal #3d3630, clay #a8907a, moss #7d8064, ash #c9bfb1, kintsugi gold #b89254 (used sparingly).
- 字體：Shippori Mincho or Noto Serif JP for headings and body; small, wide-spaced labels.
- 形狀同質感：背景有淡淡紙紋雜訊（SVG feTurbulence）、圖片用唔規則嘅有機圓角、幼身灰色線。
- 標誌性細節：刻意唔對齊（錯落嘅欄）、直排日文做點綴、一條金色「金繼」線、大量留白。
- 動態：Very slow fades; nothing bouncy.
- 避免：唔完美變成求其。對齊嘅邏輯仍然要睇得出。

規則：
1. 所有文字、連結、表格同頁面結構保持不變，只改外觀。
2. 先將顏色同字體集中定義喺一個地方（CSS variables 或者 Tailwind theme），再逐個 section 套用。
3. 文字要睇得清楚：內文對比度最少 4.5:1，重要嘅嘢唔可以俾裝飾遮住。
4. 喺 375px 闊嘅手機都要用得。
5. 寫 code 之前，先逐個 section 用 5 點講你嘅計劃，然後先畀完整 code 或者改好嘅完整檔案。

如果你睇唔到我個網站，開始之前先問我攞截圖或者 code。