Pencil Landing Page Demo 專案
任務：用 Pencil.dev + Claude Code 做出一個有設計感的 landing page，作為接案作品集展示。 為什麼重要：現有作品（Physics KB、DocuMap）全展示技術力，沒有任何一個展示設計感。要賣「設計 + 前端」全包，需要視覺證據。 時間預算：一天以內。超過就是在逃避投案。
2/23 目標更新：正一建議從龍騰 RAG 知識庫出發做產品。Landing page 目標從「接案作品集」轉為「龍騰 RAG 知識庫產品驗證」——描述產品、讓 user 腦海中有畫面與操作情境、驗證付費訊號。Deadline：下週 OJT 第一場會議前。
遊戲規則
這個專案用八角遊戲化的概念設計，讓過程本身就有動力。
🏔️ 史詩意義：這不是在「練習工具」，是在打造你的第二張名片。每個接案客戶看到的第一印象就靠這個。
⏳ 稀缺性：總時間預算 5 小時。每個階段有時間上限。超時就強制進入下一階段——不完美沒關係，完成比完美重要。
🏆 成就系統：每完成一個階段，在下方打勾並記錄截圖時間。最後統計你的「設計經驗值」。
🎨 創造力回饋：每個階段都會產出可以看到的東西。不是讀完文件才開始做——邊學邊產出，即時看到成果。
👥 社交影響：完成後分享給立亨和 FB 接案社團。立亨會給你知識型回饋，社團會給你市場型回饋。
🎲 好奇心：你從來沒用 Pencil 設計過東西——「AI 幫我設計出來的東西會長什麼樣？」這個問題本身就有吸引力。
⚠️ 損失規避：如果不做這個，你的作品集永遠只有「工程師做的東西」的樣子。每拖一天，就少一天展示設計能力的機會。
Phase 0：選定參考（20 min）⏱️
不從零設計。站在巨人肩膀上。
- 0.1 瀏覽 Landingfolio SaaS 類別，找到喜歡的風格
- 0.2 選定主要參考：Supernova AI（前身 Canvas）
-
0.3 截圖不需要，直接對照網頁
📝 主要參考：Supernova AI — 簡潔留白、產品截圖為主角、雙 CTA hero、客戶 logo 信任條、功能 grid、見證區塊。同為「降低技術門檻」的 SaaS 定位，風格適合龍騰 RAG 知識庫。配色可再調溫暖一點以貼合教育產業。
🏆 +10 XP：完成參考選定
Phase 1：裝備準備（30 min）⏱️
工欲善其事。
- 1.1
安裝 Pencil.dev✅ Desktop App 已安裝（~/Applications/Pencil.AppImage）+ Claude Code 已連線 - 1.2 建立專案資料夾 ✅
~/Documents/landing-demo/ - 1.3 初始化 Vue 3 + TypeScript + Tailwind CSS ✅
- 1.4 Pencil 已開啟
~/Documents/landing-demo/，landing.pen已建立 ✅ - 1.5 確認 landing page 內容結構 ✅ 直接用 MCP 設計完成：
- Header：Logo (KnowBase) + 導航 + CTA
- Hero：badge「教育 AI 新標準」+ 標題「讓每位老師都有 AI 助教」+ 雙 CTA + 產品截圖佔位
- 信任條：龍騰/翰林/南一/康軒/教育部 logo 佔位
- How It Works：三步驟卡片（上傳教材→自然語言提問→獲得精準答案）
- Core Features：三個功能區塊左右交替（智慧問答引擎/跨冊知識串聯/AI 備課助手）
- Social Proof：數據（10,000+頁/60%時間節省/<3秒回答）+ 教師見證
- Final CTA：「準備好改變備課方式了嗎？」+ 雙 CTA
- Footer：品牌 + 三欄導航 + 版權
📝 備註：Pencil MCP 已加入 ~/zettelkasten/.claude/mcp.json，重啟 Claude Code session 後可用 MCP 工具操作 .pen 檔。MCP binary 路徑在 /tmp/.mount_Pencil.../，每次啟動 AppImage 會變——失效時需更新 mcp.json。
🏆 +15 XP：裝備就緒，戰場準備好了
Phase 2 + 3：跳過手動學習，直接用 MCP 設計 ✅
決定跳過 Phase 2 手動學習，直接讓 Claude Code 用 Pencil MCP 工具設計完整 landing page。
📝 設計過程筆記：
- 風格：Pencil Warmth（warm-minimal + editorial + organic-modern）
- 配色：cream background
#FFFBF7+ terracotta accent#D4644E+ dark text#2D2522 - 字型：Fraunces（headlines）+ DM Sans（body）
- .pen schema 學習：
alignItems/justifyContent是正確的對齊屬性（非 horizontalAlign/verticalAlign）；文字節點需設textGrowth: "fixed-width"才能指定寬度和使用textAlign - 設計檔：
~/Documents/landing-demo/landing.pen
🏆 +65 XP：Phase 2 + 3 合併完成！完整 landing page 設計稿已就緒
Phase 4（原 Phase 3 後續）：設計精修 ⏱️ — 跳過
靜態 HTML 已在 Phase 2+3 直接從 Pencil MCP 生成完整頁面（深色版
site/index.html+ 淺色版site-light/index.html），不需額外精修。
🏆 +40 XP：設計直出 HTML，跳過手動精修
Phase 4：生成程式碼（1 hr）⏱️ — 跳過
決定直接部署靜態 HTML 而非轉換為 Vue 專案。淺色版
site-light/index.html已包含完整的 inline CSS、RWD、Google Fonts、產品 mockup，品質足以作為 demo。Vue 專案骨架（src/）保留但未使用。
📝 決策筆記：靜態 HTML 單檔已足夠展示用途，轉 Vue 的 ROI 不高。如未來需要互動功能再考慮。
🏆 +30 XP：務實判斷，完成比完美重要
Phase 5：部署上線（30 min）⏱️
客戶要能點開連結看到東西。
- 5.1 部署到 Cloudflare Pages ✅（兩版）
- 5.2 確認手機版顯示正常 ✅ RWD 修正：nav 900px 以下隱藏、480px 以下字體/padding 縮小、overflow-x hidden
- 5.3 把連結加到：
- GitHub profile README ✅（加入 KnowBase Landing + InBody Analyzer）
- FB 接案社團自介文（更新版）— 下次發自介文時一併更新
- 接案行動專案 自介文模板 ✅
📝 部署連結：
🏆 +20 XP：作品上線了！全世界都看得到
Phase 6：分享 & 回饋（15 min）
- 6.1 分享給立亨 ✅（已分享過）
- 6.2 FB 接案社團自介文已更新（KnowBase 加在作品列表第一位），下次發文自動帶入
- 6.3 自我評估 ✅
📝 回饋紀錄：
vs Supernova AI 參考站比較（3/5）：
- ✅ 結構完整（SaaS 標準 7 區塊）、暖色調差異化、Fraunces 字型層級清晰、RWD 三 breakpoint
- ⚠️ 最大弱項：缺乏真實內容（產品截圖為 CSS mockup、信任條為佔位文字、見證為虛構）
- ⚠️ 純靜態無動效（Supernova 有滾動淡入+hover 微動）
- 📊 作為展示「設計感+前端能力」的 demo 已達標，弱項是 demo 本質限制非技術問題
🏆 +20 XP：回饋循環完成
計分板
| 階段 | XP | 完成？ | 實際耗時 |
|---|---|---|---|
| Phase 0：選定參考 | 10 | ✅ | |
| Phase 1：裝備準備 | 15 | ✅ | |
| Phase 2+3：MCP 設計 | 65 | ✅ | |
| Phase 4（精修）：跳過 | 40 | ✅ | |
| Phase 4（程式碼）：跳過 | 30 | ✅ | |
| Phase 5：部署上線 | 20 | ✅ | |
| Phase 6：分享回饋 | 20 | ✅ | |
| 總計 | 160 |
🎖️ 80 XP = 新手設計師｜120 XP = 設計工程師｜160 XP = 全端戰士
防脫軌機制
- ⏰ 每個 Phase 有時間上限。時間到就進下一階段，不完美沒關係
- 🚫 禁止在 Phase 2 花超過 45 分鐘。Pencil 的學習在 Phase 3 做中學會更快
- 📋 每完成一步先回來寫紀錄，不要一口氣做完才回來——跟 筆記驅動的 Coding 工作流 一樣
- 🎯 今天還是要瀏覽案子。這個專案不取代 Phase 4 日常投案
連結
- 前端工程師的 AI 設計工具比較 — 工具選擇依據
- 接案行動專案 — 上層專案
- 行動待辦池 — P1「研究 Pencil」
- 我容易讓技術興奮蓋過收入機會 — 防脫軌提醒
- 筆記驅動的 Coding 工作流 — 工作流原型