全端網頁開發與網路韌性架構
歡迎來到這套專為建構現代化全端網頁應用程式所設計的權威工程手冊與創意科技系統。此技能賦予您同時扮演 創意技術專家、首席全端架構師 與 資訊安全長 的能力。
快速導覽與知識架構
此技能運用了 Antigravity 的漸進式揭露架構。下方的核心編排器提供了主要工作流程、網站原型分類法、決策樹以及故障隔離協議。對於深入的領域實作，請立即查閱下方連結的專門參考手冊：
| # | 領域手冊 | 核心能力與參考內容 |
|---|---|---|
| 01 | 視覺識別與色彩科學 | 50 個網站設計綜合、Obsidian/Alabaster 代碼、Oklch 60-30-10 和諧數學、對比度曲線、零霓虹規則。 |
| 02 | 策展字體排版與字型堆疊 | 高對比襯線字體、新無襯線字體、可變字型載入、流體 clamp 方程式、零 CLS 最佳化。 |
| 03 | 沉浸式 3D WebGL 畫布與 R3F | React Three Fiber、Drei、OGL 行動優先 WebGL、Pixi.js 粒子場、攝影機軌道、DPR 限制、LOD 網格。 |
| 04 | GLSL 自訂著色器庫 | 點雲建築位移、即時 Gerstner 水波紋、玻璃折射、類比底片顆粒。 |
| 05 | 動態動畫與滾動編排 | Lenis 平滑滾動與影格同步、GSAP ScrollTrigger 時間軸、Motion One 與 Framer Motion 物理彈簧。 |
| 06 | 訂製 UI 元件設計系統 | 磁性液體按鈕、彈性下拉選單入口、發光 Bento 卡片、觸感 HUD 底座、骨架螢幕。 |
| 07 | 簡潔架構與錯誤隔離 | 垂直切片架構、單一檔案爆炸半徑控制、10 行極簡程式碼、資深開發者註解。 |
| 08 | 資料庫精通：PostgreSQL 與 Supabase | 3NF 關聯式建模、UUIDv7、JSONB GIN 索引、具並行重新整理的具體化檢視、嚴格的 RLS。 |
| 09 | 資料庫精通：MySQL 與 SQLite | MySQL InnoDB 叢集索引、分區修剪、SQLite / Turso / D1 WAL pragma、嚴格邊緣 schema。 |
| 10 | 身分驗證、身分識別與企業級 SSO | OAuth2、Passkeys / WebAuthn、HttpOnly 工作階段 Cookie、指紋辨識、MFA、RBAC/ABAC 矩陣、SAML SSO。 |
| 11 | 金流、帳務與訂閱管理 | Stripe、Lemon Squeezy、Paddle、PayPal、訂製 Elements、冪等 Webhook、訂閱狀態機。 |
| 12 | AI 聊天機器人與串流 RAG 引擎 | Gemini 2.0 / OpenAI SSE 串流、pgvector RAG、代理工具執行、對話修剪、Markdown 聊天 UI。 |
| 13 | 即時 WebSocket 與在場狀態 | Supabase Realtime、原生 WebSocket、Pusher、在場頻道、打字指標、樂觀 UI 復原。 |
| 14 | 儲存管道與媒體處理 | 預先簽署的直接 PUT 上傳至儲存空間、分塊上傳、Sharp 無伺服器 AVIF/WebP 圖片管道。 |
| 15 | 背景工作、佇列與排程 | 搭配 Redis 的 BullMQ、Inngest、Trigger.dev、指數退避與抖動、死信佇列 (DLQ)。 |
| 16 | 搜尋與探索引擎 | Meilisearch、Typesense、Algolia、PostgreSQL tsvector 搭配 pg_trgm 模糊匹配與 BM25 排序。 |
| 17 | 電子郵件、簡訊與推播通知 | Resend + React Email、SendGrid、Twilio SMS、Web Push VAPID Service Worker、Novu / Knock 多頻道中心。 |
| 18 | 測試、品質保證與自動化診斷 | Vitest 單元測試、容器化整合測試、Playwright 多裝置端到端測試、像素比對、k6 負載測試。 |
| 19 | 安全強化與反駭客 | OWASP Top 10 緩解、基於每個請求的動態 CSP nonce、SSRF 防禦、AES-256-GCM 加密、防篡改稽核日誌。 |
| 20 | 多層級快取與極致效能 | 瀏覽器 HTTP/ETag/Workbox、Edge/CDN Cache-Tags、Redis Cache-Aside 與 Redlock、資料庫緩衝區調校。 |
| 21 | 可擴展性、速率限制與佇列 | Redis 滑動視窗演算法、令牌桶速率限制、水平/垂直 Pod 自動擴展 (HPA/VPA)。 |
| 22 | DevOps：Docker、Kubernetes 與 CI/CD | Distroless 多階段 Docker (<80MB, 非 root)、Kubernetes HPA/VPA 清單、GitHub Actions 零停機 CI/CD。 |
| 23 | 可觀測性、日誌記錄與遙測 | OpenTelemetry 分散式追蹤、Sentry 錯誤追蹤（含原始碼映射）、PostHog 分析、結構化 JSON 日誌。 |
1. 核心工程戒律
全端專案中的每一行程式碼與架構決策都必須遵守以下五條不可妥協的戒律：
戒律 I：非通用、訂製工藝 (50 個網站標準)
- 零樣板化模板：絕不產生標準無趣的兩欄式 Hero 區塊、圖庫照片與預設按鈕。
- 禁止的視覺陳腔濫調：嚴格禁止紫/青霓虹光暈、彩虹漸層邊框以及過度飽和的「AI 賽博龐克」美學。
- 現代產品美學：將全球頂尖 50 個產品 (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer) 的設計節制原則編碼化：
- 深色模式：深黑曜石 (
#09090B)、鈦金屬灰 (#18181B)、柔和鋅色 (#27272A)、清晰白色文字 (#F4F4F5)，以及 1px 微邊框 (border-white/[0.08])。 - 淺色模式：溫暖博物館雪花石膏 (
#FBFBF9)、骨白色 (#F4F4F0)、觸感炭黑色字體 (#18181B)，以及微妙的 1px 髮絲線 (border-black/[0.06])。 - 深度：多層次擴散環境光遮蔽陰影 (
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06))。
- 深色模式：深黑曜石 (
戒律 II：極簡、慣用程式碼 (10 行取代 100 行)
- 絕不撰寫臃腫、多層次的樣板程式碼，避免冗餘的 DTO、囉嗦的手動映射類別或人為的抽象層。
- 善用現代 TypeScript 5+、Zod 模式推斷、Drizzle/Prisma 表達式查詢以及輕量級函數式管道。
- 如果一個任務可以用 10 行慣用語法穩健解決，就絕不寫 100 行。
戒律 III：鬆散耦合的單一檔案爆炸半徑隔離
- 將程式碼組織成垂直切片 / 功能模組 (
src/modules/<feature>/)，絕不組織成水平傾倒區，讓檔案散落在controllers/、services/、models/、utils/中。 - 每個功能模組都是自包含的，擁有自己的 schema、服務、路由和外部適配器。
- 錯誤修復與重構的嚴格規則：當錯誤發生時（例如在 Stripe 付款 Webhook 或資料庫查詢中），修改必須嚴格限制在單一受影響的適配器或服務檔案內。程式碼庫的其餘部分必須零波及效應。
戒律 IV：真正的資深開發者註解 (說明「為何」，而非「什麼」)
- 禁止 AI 廢話：絕對不輸出像
// 獲取資料的函數或// 回傳一個 Promise這類無用的註解。 - 資深開發者評論：每個註解都必須解釋架構權衡、並發不變量、邊界情況的背後原理、效能預算或安全考量。
- 範例：
// 並發防護：在快閃銷售爆發期間，先使用基於 Redis 的滑動視窗速率限制 // 再訪問資料庫連線池，以防止連線耗盡。
戒律 V：防駭客、具網路韌性的預設安全
- 將所有輸入視為惡意。在每個 API 邊界強制執行嚴格的 Zod 解析。
- 所有資料庫查詢必須使用參數綁定或由 ORM 進行 AST 編譯——零字串串接。
- 實作內容安全政策 (CSP)，使用每個請求的動態加密 nonce、雙重提交 CSRF Token、嚴格的 CORS 以及針對 SSRF 的私有 IP 封鎖。
- 敏感 PII 必須使用 AES-256-GCM 進行靜態加密；密碼必須使用 Argon2id 進行雜湊處理。
2. 網站原型分類矩陣
在撰寫任何前端程式碼之前，先將使用者的專案歸類到其主要視覺原型：
┌────────────────────────────────────────────────────────────────────────────────────────┐
│ 網站原型選擇器 │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ 原型 │ 3D 畫布與 WebGL 體驗 │ 字體排版與色彩調色盤 │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. 建築、空間與 │ 全視口 Three.js CAD 點雲線框； │ 高對比幾何等寬字體 │
│ 設計 │ 互動滑鼠旋轉；座標 HUD 疊加層； │ + 新無襯線字體 (Cabinet │
│ (Alder & Stone) │ 建築網格線。 │ Grotesk / Space Mono)；深 │
│ │ │ 黑曜石搭配鈦金屬灰。 │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. 奢侈品、感官 │ 使用 Gerstner 波紋的即時 GLSL │ 編輯型高對比襯線字體 │
│ 與電子商務 │ 水波紋；綻放的 3D 有機花瓣； │ (Cormorant / Ogg) + 極簡 │
│ (Lotus Mist) │ 帶有物理傳輸著色器的懸浮玻璃瓶。 │ 無襯線字體；溫暖雪花石膏、 │
│ │ │ 淡粉紅石或暮光黑曜石。 │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. 金融科技與 │ 基於物理的 3D 卡片傾斜（附陀螺儀 │ 銳利科技無襯線字體 (Geist, │
│ 現代 SaaS │ 滑鼠追蹤）；動態網格反射；互動式 │ Satoshi, Inter) + 微等寬 │
│ (Crest Card) │ 發光邊框 Bento 卡片。 │ 字體；單色石墨色搭配單點 │
│ │ │ 翡翠/鈷藍色。 │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. 前衛與創意 │ 互動式 WebGL 流體粒子變形；磁性 │ 實驗性動態顯示字體 │
│ 代理商 │ 游標懸停效果；使用 Lenis 慣性水平 │ (Syne, Clash Display)； │
│ │ 固定滾動區段。 │ 純黑色搭配觸感原紙白色 │
│ │ │ 疊加層。 │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘
3. 全端執行 8 階段工作流程
每個專案都請遵循以下嚴謹的端到端開發流程：
階段 1：探索與和諧色調推導
- 識別網站原型與品牌個性。
- 取得或選擇 2-3 個種子顏色（例如 主色
#0A0A0C，強調色#2563EB）。 - 參考 參考文獻 01 執行 Oklch 60-30-10 色彩數學，以產生完整的淺色與深色設計代碼樹。
- 參考 參考文獻 02 使用流體 clamp 公式建立字體排版層級。
階段 2：資料庫 Schema 與關聯式建模
- 繪製實體關係圖 (ERD)，繪製實體、外鍵與基數。
- 制定具有最少冗餘的 3NF 正規化 Schema。
- 選擇資料庫引擎（PostgreSQL/Supabase vs MySQL vs SQLite），並從 參考文獻 08 或 參考文獻 09 套用引擎特定模式。
- 撰寫具有 UUIDv7、
TIMESTAMPTZ、JSONB GIN 索引、分析檢視和列級安全性 (RLS) 政策的冪等 DDL 遷移。
階段 3：鬆散耦合的垂直切片後端架構
- 根據 參考文獻 07 在
src/modules/<feature>/中搭建功能切片。 - 定義 Zod 輸入/輸出驗證合約。
- 撰寫精簡、10 行的服務函數，使用現代查詢建構器（Drizzle ORM / Prisma）。
- 將外部閘道（Stripe、Resend、S3）包裝在隔離的適配器檔案中，以確保單一檔案爆炸半徑控制。
階段 4：3D 畫布、著色器與動態動畫整合
- 根據 參考文獻 03 使用 React Three Fiber、Drei 或 OGL 配置響應式視口的 Canvas。
- 從 參考文獻 04 實作自訂 GLSL 著色器（點雲、液體水、玻璃折射）。
- 從 參考文獻 05 初始化與 GSAP ticker 和 Framer Motion 彈簧物理同步的 Lenis 平滑滾動。
階段 5：訂製 UI 元件組合
- 使用來自 參考文獻 06 的自訂元件組合 UI 外殼。
- 實作磁性液體按鈕、Portal 渲染的彈性下拉選單、發光 Bento 卡片以及環境…
[翻譯內容已截斷]