自動化與 Agent

高級感網站是成本問題不是技術問題：零動畫函式庫拿下 Lighthouse 100，附 CSS/JS 範本與資安加固四件套

想要 AI 品牌那種「一看就貴」的質感，第一反應多半是裝 GSAP 或 Framer Motion。但貴感的本體是克制與層次，不是函式庫。這份筆記給你可直接複製的程式碼，也交代一個把效能分污染成 56 的隱形兇手。

2026/09/30 ｜ 2 分鐘閱讀

一個核心觀念

高級感＝克制＋層次，不是特效堆疊。質感好的網站幾乎都在做減法：背景有層次、動效少而準、載入快。每多裝一個函式庫，換到的通常不是質感，而是維護負擔和更低的分數。

按步驟做（約半天）

Step 1｜深色背景分四階

不要用一片純黑。定義四個由深到淺的背景色：

:root {
  --bg-deep: #060608;   /* 最底層，放漸層光暈 */
  --bg: #101014;        /* 頁面背景 */
  --surface: #18181D;   /* 卡片 */
  --surface-2: #1F1F26; /* 卡片 hover、巢狀元素 */
}

全站只引用變數，不寫死色碼。淺色模式用 @media (prefers-color-scheme: light) 覆蓋同一組變數。

Step 2｜hero 背景用 CSS 漸層，不用大圖

大圖或影片當首屏背景是效能分的頭號殺手。改用兩層 radial-gradient 疊出光暈：

.hero::before {
  content: '';
  position: absolute;
  inset: -6rem -30vw 0;
  background:
    radial-gradient(600px 320px at 18% 0%, rgba(79,70,229,.28), transparent 70%),
    radial-gradient(520px 300px at 88% 24%, rgba(180,83,9,.14), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

記得在 body 加 overflow-x: clip，不然會多一條橫向捲軸。

Step 3｜玻璃導覽列（全站只用一處）

.nav { background: var(--bg); }
@supports (backdrop-filter: blur(12px)) {
  .nav {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(12px);
  }
}

blur 很吃手機 GPU，全站限用 1–2 處；不支援的瀏覽器會自動退回純色。

Step 4｜hover 微互動：2px 就夠

.card { transition: transform .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-2px); }
  .button:active { transform: scale(.98); }
}

Step 5｜滾動進場：原生 20 行，不裝 AOS 或 GSAP

<script>
  document.documentElement.classList.add('js');
  const els = document.querySelectorAll('[data-reveal]');
  const io = new IntersectionObserver((entries) => {
    for (const e of entries) {
      if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); }
    }
  }, { threshold: 0.15 });
  els.forEach((el) => io.observe(el));
</script>

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: .6s ease; }
  html.js [data-reveal].is-visible { opacity: 1; transform: none; }
}

要進場效果的區塊加上 data-reveal 屬性即可。沒有 JS 或使用者關閉動態時，內容照常顯示（漸進增強）。

Step 6｜資安加固四件套（靜態站也要做）

  1. 404 頁：沒有它，很多託管平台（如 Cloudflare Pages）會把任何亂打的網址都回 200，Google 會認為你有無限重複頁面（soft-404），傷 SEO。做完用亂打的網址實測，要看到 404。
  2. 安全標頭：Cloudflare Pages、Netlify 都支援在網站根目錄放一個 _headers 檔：
/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'

若頁面有嵌第三方 iframe，要在 Content-Security-Policy 加 frame-src https://對方網域。

  1. 第三方嵌入改「點擊才載入」：訂閱表單、影片這類 iframe 預設不放進頁面，放一顆按鈕，點了才用 JS 建立 iframe。訪客沒點之前，瀏覽器對第三方零請求，隱私和首屏速度雙贏。
  2. 隱私聲明頁：只要你收 email，就該有一頁講清楚「收什麼、誰處理、怎麼退訂、怎麼要求刪除」。300 字就合格，沒有才是問題。

Step 7｜跑分驗收

用 Lighthouse 測（Chrome 或 Edge 開發者工具內建，或命令列 npx lighthouse 你的網址）。目標：效能、無障礙、SEO 三項 ≥ 90。

你一定會踩的坑

  1. 本機廣告攔截器污染測試分數：如果分數莫名奇差，而且 FCP、LCP、Speed Index 三個數值一模一樣、Total Blocking Time 卻是 0ms，先懷疑量測環境，不是網站。AdGuard 這類軟體會往測試瀏覽器注入巨大腳本（本案例是 1.7MB，網站本體 23ms 就載完，首測卻只有 56 分）。命令列加 --blocked-url-patterns="*adguard*" 排除；--disable-extensions 沒用，因為它是網路層注入。
  2. CSP 擋掉自己的 script：很多框架（如 Astro）會把小段 JS 直接內聯進 HTML，跟 script-src 'self' 衝突。Astro 的解法是設定 vite: { build: { assetsInlineLimit: 0 } }，強制輸出外部檔。其他框架卡住時，用下面的咒語問 AI。
  3. 雙語網站的 hreflang 寫錯等於沒寫：每頁要同時宣告「自己」和「對方語言版」（自我參照加雙向互指），缺一邊 Google 就整組忽略。x-default 指向主要語言版。

卡住時怎麼問 AI

複製貼上，換掉【】內容，並貼上完整的錯誤訊息原文：

我是新手，正在給靜態網站【加安全標頭／做點擊才載入的訂閱框／設定雙語 hreflang】。
我的環境：【框架名稱與版本，如 Astro】＋【託管平台，如 Cloudflare Pages】。
我遇到的狀況：【貼上錯誤訊息或不符預期的行為原文】。
請先解釋原因，再給我一步一步的修法，每步只做一件事。

一句話總結

先把「不該加的東西」擋在門外，高級感和 100 分會自己出現；分數不對時，先查量測環境乾不乾淨，再動網站。

延伸閱讀

支持這裡的內容：前往 Ko-fi 斗內