網站建置器 — 範本修改 + Netlify 部署
目標
根據使用者提供的簡短描述，透過修改現有、經過驗證的範本（而非從頭打造），產出令人驚豔且可直接上線的著陸頁。接著將其推送至 Netlify 上線，並回傳該網站的 URL。
輸入
- 品牌名稱：公司或專案名稱
- 核心論述：一句話說明這是什麼（或提供一個網址供參考）
- 氛圍/美學：任何方向（例如「暗黑科技風」、「臨床奢華風」、「粗獷主義」）
- 轉換目標：Call-to-Action 應為何者（預設為「預約諮詢」）
範本位置
基礎範本位於工作區根目錄的 website-template/。這是一個完整、可運作的 React + Vite + Tailwind v3 + GSAP 網站，其結構如下：
目錄結構
website-template/
├── src/
│ ├── App.jsx # 根佈局（匯入所有區塊）
│ ├── index.css # Tailwind 匯入、噪點覆層、捲軸樣式
│ ├── main.jsx # 進入點
│ └── components/
│ ├── Navbar.jsx # 浮動導覽列，隨捲動反應
│ ├── Hero.jsx # 全螢幕英雄區塊，背景圖片，GSAP 文字揭示
│ ├── Features.jsx # 淺色背景區塊，含 3 個互動微型 UI
│ ├── DiagnosticShuffler.jsx # 自動輪播的堆疊卡片小工具
│ ├── TelemetryTypewriter.jsx # 終端機風格的打字機小工具
│ ├── AdaptiveRegimen.jsx # 日曆選擇器，帶有動畫游標
│ ├── Philosophy.jsx # 視差背景，逐詞文字揭示
│ ├── Protocol.jsx # 堆疊捲動卡片（GSAP ScrollTrigger 固定效果）
│ ├── Membership.jsx # 三層級定價，含懸停效果
│ └── Footer.jsx # 深色頁尾，多欄位
├── tailwind.config.js # 色彩代碼、字型、邊框圓角
├── postcss.config.js # 標準 PostCSS + Autoprefixer
├── vite.config.js # Vite + React 外掛
├── package.json # React 19, GSAP, Lucide, Tailwind v3
└── index.html
技術棧（請勿更改）
- React 19 + Vite 7
- Tailwind CSS v3（使用
tailwind.config.js+@tailwind指令 — 非 v4） - GSAP 3 搭配 ScrollTrigger
- Lucide React 圖示
- PostCSS + Autoprefixer
設計系統（在 tailwind.config.js 中）
colors:
moss: '#070707' — 深黑色強調色
clay: '#0026FF' — 科技藍主色
cream: '#EAEAEA' — 米白色文字
charcoal: '#070707' — 主要深色背景
fonts:
sans: Plus Jakarta Sans, Outfit
serif: Cormorant Garamond
mono: system monospace
流程
步驟 1：複製範本
cp -R website-template/ site-name/
cd site-name
rm -rf node_modules
npm install
步驟 2：為品牌進行客製化
修改以下檔案 — 請勿重新架構或從頭改寫：
-
tailwind.config.js— 更改色彩代碼（moss、clay、cream、charcoal）和字型，以符合品牌美學。class 名稱保持不變，僅更改十六進位值。 -
index.css— 更新 Google Fonts 匯入網址，以符合新的字型選擇。 -
index.html— 更新<title>。 -
元件文案 — 在每個元件中尋找並取代品牌專屬文字：
Navbar.jsx— 品牌名稱、導覽連結、CTA 按鈕文字Hero.jsx— 主標題、副標題、標語、背景圖片網址Features.jsx— 區塊標題、副標題DiagnosticShuffler.jsx— 卡片標題、數值、趨勢（使其與品牌相關）TelemetryTypewriter.jsx— 打字訊息陣列、狀態標籤AdaptiveRegimen.jsx— 小工具標籤、按鈕文字Philosophy.jsx— 兩個對比陳述、區塊標籤、背景圖片Protocol.jsx— 步驟標題、描述、區塊標題Membership.jsx— 方案名稱、價格、功能、描述（若不需要，可替換為 CTA 區塊）Footer.jsx— 品牌名稱、標語、連結欄、版權資訊
-
Unsplash 圖片 — 將
Hero.jsx和Philosophy.jsx中的背景圖片網址替換為符合品牌的圖片。使用https://images.unsplash.com/photo-ID?w=2000&q=80格式。
步驟 3：建置與部署
npm run build
npx netlify-cli deploy --prod --dir=dist --create-site site-name
如果網站已經連結到 Netlify：
npm run build
npx netlify-cli deploy --prod --dir=dist
注意：互動式的 sites:create 指令在非 TTY 環境下會卡住。請務必使用 --create-site 標記。
步驟 4：回傳即時網址
禁止事項
- 請勿從頭改寫元件。 範本是可運作的。僅修改文案、色彩和圖片即可。
- 請勿切換到 Tailwind v4。 範本使用 v3 和
tailwind.config.js。請保持不變。 - 請勿移除互動式微型 UI（DiagnosticShuffler、TelemetryTypewriter、AdaptiveRegimen）。它們是視覺差異化的關鍵。僅調整其內容以符合品牌。
- 請勿更改結構佈局（圓角區域過渡、堆疊捲動卡片、視差哲學區塊）。這些是使其美觀的關鍵。
- 除非絕對必要，否則請勿新增 npm 依賴項。
客製化速查表
變更氛圍
只需更改 tailwind.config.js 中的 4 個色彩代碼，即可改變整體美學：
| 氛圍 | charcoal (背景) | clay (強調色) | cream (文字) | moss (深色強調) |
|---|---|---|---|---|
| 科技藍 (預設) | #070707 | #0026FF | #EAEAEA | #070707 |
| 金色奢華 | #070707 | #C9A84C | #F5F0E8 | #0A0A0A |
| 霓虹賽博 | #0A0A0A | #00FFD1 | #E0E0E0 | #0A0A0A |
| 臨床白 | #FAFAFA | #2563EB | #1A1A1A | #F5F5F5 |
| 陶土有機 | #1A1410 | #CC5833 | #F2F0E9 | #2E4036 |
| 翡翠內容 | #090909 | #10B981 | #F0F0F0 | #0A0A0A |
如果客戶不需要定價功能
將 Membership.jsx 的內容替換為一個全寬的 CTA 區塊（保留該元件檔案，僅更改其 JSX）。
實作範例：1SecondCopy（SEO 內容寫作服務）
這是所需修改深度的黃金標準參考。每個元件的文字內容都改變了，但不做任何結構/佈局上的更改。
色彩（tailwind.config.js）
moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'
逐元件的變更
| 元件 | 改變了什麼 | 保持不變的部分 |
|---|---|---|
Navbar.jsx | 品牌 → "1SECONDCOPY_"，連結 → 流程/平台/定價，CTA → "開始使用" | 浮動導覽列、捲動模糊、行動漢堡選單 |
Hero.jsx | 主標題 → "Words that Rank."，標語 → "Content Writing, With a Twist"，關於頂尖 1% 寫手的副標題，Unsplash 背景 → 寫作主題 | GSAP 文字揭示、佈局、漸層覆層 |
Features.jsx | 標題 → "Your Content Command Center"，關於即時儀表板的副標題 | 3 欄微型 UI 網格、區塊結構 |
DiagnosticShuffler.jsx | 卡片 → "Content Velocity: 48 articles"，"Avg. SERP Position: #4.2"，"Turnaround Time: 2.1 days"，標籤 → "Content Analytics" | 自動輪播動畫、卡片結構 |
TelemetryTypewriter.jsx | 訊息 → 內容流程步驟（"Researching target keywords..."，"Matching writer to brief..."），標籤 → "Live Queue"，統計資料 → "In Queue: 3 briefs" / "Avg. Delivery: 2.1 days" | 打字機效果、終端機樣式 |
AdaptiveRegimen.jsx | 標籤 → "Content Scheduler"，標題 → "Select Publish Day"，按鈕 → "Submit"，GSAP 顏色 → #10B981 | 日曆網格、動畫游標、日期標籤 |
Philosophy.jsx | 舊方法 → "Hire freelancers. Manage revisions. Pray it ranks." vs 新方法 → "Submit a brief. Get SEO content that converts."，Unsplash 背景已更換 | 視差捲動、逐詞揭示、佈局 |
Protocol.jsx | 步驟 → "Brief & Research" / "Expert Writing" / "SEO & Delivery"，標題 → "The Process."，關於其工作流程的描述 | 堆疊捲動卡片、GSAP pinning、SVG 圖形 |
Membership.jsx | 方案 → Starter $0.09/word，Bulk $0.08/word，Enterprise Custom，所有功能都針對內容服務重寫 | 3 欄網格、懸停效果、熱門徽章 |
Footer.jsx | 品牌 → "1SECONDCOPY_"，標語 → "SEO content on-demand"，欄位 → Services/Company，狀態 → "Writers Online" | 佈局、ping 點動畫、版權資訊 |
關鍵要點
跨 10 個檔案的大約 200 行文字變更。零佈局、動畫或結構變更。由於色彩和文案完成了所有繁重工作，網站看起來完全不同。
環境要求
需要：
- Node.js 18+
npx netlify-cli（自動安裝）- 已透過
netlify login驗證的 Netlify 帳號
首次執行設定
在執行之前，請檢查工作區是否有 .gitignore 檔案。如果沒有，則假設使用者是第一次使用此技能。在這種情況下：
- 詢問使用者這是否是他們第一次執行此技能
- 如果是，向他們說明其運作方式以及他們需要配置/設定的項目（API 金鑰、環境變數、依賴項等）
- 告訴他們 Nick 祝福他們一切順利！