forja-landing — 鍛造著陸頁的技能
此技能用於建構電影級著陸頁，品質與 carlosdominguez.com.mx 相當，並可針對任何業務類型進行調整：
- 個人品牌 / 顧問 — 以人物為中心的 hero、強大的 about 區、服務、案例
- SaaS / 數位產品 — Bento 功能區、流程、誘因、試用/展示 CTA
- 代理商 / 工作室 — 專案作品集、服務、團隊、流程
- 實體產品 — 視覺型目錄、優勢、社交證明、直接購買
- 課程 / 社群 — 價值主張、目標對象、內容、加入方式
- 診所 / 在地服務 — 服務、流程、信任感、預約/聯絡
永遠不變的元素：
- Seedance 2.0 影片 hero (MUAPI) — 按需生成的電影級循環影片
- 編輯字體 — Fraunces (標題) + Geist (內文)，混合斜體/粗體
- 反 AI 樣板色調 — 深黑底色 + 琥珀紅強調色，無老套漸層
- 不對稱 Bento — 多樣化卡片、重點突出的海報卡片
- 內建評論 — 針對設計品質的 10 個面向自動審查
- 網站稽核 — 部署前進行效能、無障礙、SEO 檢查
指令
在 Claude Code 中使用 /forja <command>：
| 指令 | 功能 |
|---|---|
/forja build | 訪談 + 區塊選擇 + hero 影片 + 自適應框架 |
/forja critique | 反 AI 樣板審查 + 反模式 + 建議 |
/forja polish | 套用評論中的自動修復 |
/forja audit | 效能 + 無障礙 + SEO 檢查（類似 Lighthouse） |
/forja deploy | 部署至 Vercel + 自訂網域 + OG 圖像驗證 |
可用區塊
此技能包含以下區塊。/forja build 會根據著陸頁類型選擇合適的區塊：
| 區塊 | 何時包含 |
|---|---|
Hero | 永遠 |
ScrollStops | 永遠 — 問題 / 解決方案 / 方法 |
About | 個人品牌、顧問、診所、代理商 |
Services | 任何銷售服務或功能的類型 |
Portfolio | 代理商、開發者、設計師、有案例的顧問 |
Process | 當「我們的工作方式」是差異化因素時 |
LeadMagnet | SaaS、課程、顧問 — 電子郵件收集 |
Communities | 課程、社群、會員制 |
CtaFinal | 永遠 |
Footer | 永遠 |
原則
- 文案優先，程式碼在後。 Blueprint 永遠在組合之前。
- 預設反 AI 樣板。 沒有紫藍漸層按鈕、沒有三個相同的卡片、沒有白底的 Inter。
- 字體即身份。 有個性的編輯襯線字體。斜體作為強調。
- 滾動節奏。 每個區塊都與前一個區塊有區別。沒有單調的網格。
- Ember 色調。 暗色背景 + 琥珀紅強調色僅用於關鍵位置。
- 適應，而非強加。 根據業務類型選擇區塊。並非所有人都需要 Portfolio 或 Communities。
工作流程
/forja build
步驟 1 — 著陸頁類型 + 身份（區塊 1）：
我們正在建構哪種類型的著陸頁？
A. 個人品牌 / 顧問 / 自由工作者
B. SaaS 或數位產品
C. 代理商或創意工作室
D. 實體產品 / 電子商務
E. 課程或社群
F. 診所或在地服務
G. 其他（請描述）
1. 您的姓名或品牌名稱是什麼？
2. 一行定位語（30-40 字）：
3. 目標對象是誰？（具體的受眾）：
步驟 2 — 產品與風格（區塊 2）：
4. 列出 2-4 個主要服務、產品或功能（每個一行）：
5. 主要 CTA 是什麼？（WhatsApp / Calendly / 直接購買 / 表單 / 展示）：
6. 視覺風格：工匠 · 大膽 · 極簡 · 充滿活力 — 或自行描述：
步驟 3 — 區塊選擇器（建構前提案）：
根據著陸頁類型和回答，提出：
- 建議的區塊及其順序
- 3 個 H1 選項，使用 Fraunces 的斜體/粗體結構
- 根據風格調整的 Seedance 提示
在執行前等待使用者確認。
步驟 4 — 使用 Seedance 製作 Hero 影片（可選）：
如果 .env.local 中有 MUAPI_API_KEY：
- 執行
scripts/generate_hero.py，使用根據風格調整的提示 - 將 MP4 下載至
public/hero/
如果沒有金鑰：使用 Canvas Embers 作為電影級備用方案。
步驟 5 — 元件框架：
僅將選定的區塊從 templates/components/ 複製到 src/features/landing/components/。
步驟 6 — 文案生成：
根據訪談結果，將真實文案填入 src/features/landing/data/content.ts。沒有佔位符。
步驟 7 — 設計系統：
使用 Ember 色調及 Fraunces/Geist 字體更新 src/app/globals.css 和 tailwind.config.ts。
/forja critique
讀取 routes/critique.md。針對 10 個面向執行審查：
- AI 樣板檢測（關鍵）
- 視覺層級
- 資訊架構
- 情感共鳴
- 可發現性與啟發性
- 構圖與平衡
- 字體作為溝通
- 有目的的色彩
- 狀態與邊界情況
- 微文案與語調
輸出：按優先級排序的報告，包含關鍵、高、低問題。
/forja audit
讀取 routes/audit.md。執行類似 Lighthouse 的檢查：
- 效能（LCP、CLS、估計的 INP）
- 無障礙（對比度、焦點、aria、語義 HTML）
- SEO（中繼資料、sitemap、robots、JSON-LD）
- 最佳實踐（HTTPS、無控制台錯誤、無棄用 API）
/forja deploy
讀取 routes/deploy.md。引導部署至 Vercel：
- 驗證本地建置
- 必要時進行 commit + push
- 執行
vercel --prod - 如指定，配置自訂網域
- 驗證正式環境上的 OG 圖像
反模式（不要做）
- CTA 按鈕使用藍→紫漸層
- 三個相同的卡片，帶有通用圖示 + 標題 + 段落
- 純白背景上的 Inter 400
- 「Empower your business with AI」及類似詞句
- 到處都是玻璃態
- 深色模式帶有螢光強調色「科技科技科技」
- 使用表情符號而非數字的指標 hero
- 當業務沒有案例可展示時的 Portfolio 區塊
- 沒有真實社群時的 Communities 區塊
參考
技能由 Carlos Domínguez 設計。Forge 方法論應用於著陸頁。