PortfolioFlow Skill

把一句話，變成設計師的完整作品集網站。

PortfolioFlow 是面向5 大設計領域（景觀 / 平面 / 室內 / 工業 / UX）的作品集建站 Skill。使用者用一句中文或英文描述需求，本 Skill 自動生成：

完整作品集前台站（Hero + 作品網格 + 詳情頁 + 關於 + AI 助手對話框）
設計師管理後台（登入 + 作品 CRUD + AI 生成介紹 + 統計看板）
主題色自訂（5 套預設主題 + 使用者傳入 hex 自由組合）
Edge Functions / KV / Middleware / JWT 鑑權全端能力

最終透過 edgeone-pages-deploy 一鍵部署到 EdgeOne Pages。

觸發後的執行流程（決策樹）

收到符合本 Skill 觸發條件的使用者請求後，按以下順序執行：

Step 1 — 收集必填資訊

如果使用者描述中缺少以下任意欄位，向使用者一次性追問（不要反覆問）：

欄位	必填	範例	預設值
設計師姓名	✅	"李博" / "Alex Chen"	使用者名稱
設計領域	✅	景觀 / 平面 / 室內 / 工業 / UX	詢問選一個
網站標題	❌	"Lee · 景觀設計作品集"	"{姓名} 作品集"
一句話定位	❌	"讓設計回到土地與人居"	按領域預設
主題方案	❌	"暗夜森林" / hex 顏色	"暗夜森林"
預填作品數	❌	3-6	預設 3 個範例作品

追問範例：

我需要確認幾個關鍵資訊：

你的設計領域是什麼？（景觀/平面/室內/工業/UX）

設計師姓名？

主題方案？（暗夜森林/晨曦米色/深海藍調/暖陽橙紅/純白極簡，或者直接給一個 hex 顏色）

Step 2 — 決定專案結構

view 以下參考檔案之一，根據使用者領域載入對應的內容套路：

景觀 / 室內 / 工業 → references/portfolio-knowledge.md 中的對應章節
平面 / UX → 同上

Step 3 — 生成專案骨架

在 /tmp/portfolio-{slug}/ 下建立以下檔案（禁止使用 cd 進入路徑包含特殊字元的目錄，所有路徑都用絕對路徑或 ~/Desktop/ 下的乾淨路徑）：

portfolio-{slug}/
├── index.html              # 前台首頁（用 templates/index.html 模板）
├── portfolio-detail.html   # 作品詳情
├── admin.html              # 管理後台
├── login.html              # 登入頁
├── assets/                 # 圖片素材（使用者上傳或佔位圖）
├── functions/
│   ├── api/
│   │   ├── auth.js         # 登入鑑權 + JWT 簽發（參考 references/auth-jwt.md）
│   │   ├── portfolios.js   # 作品 CRUD（參考 references/portfolio-crud.md）
│   │   ├── generate.js     # AI 生成介紹（參考 references/ai-generate.md）
│   │   └── stats.js        # 造訪統計（參考 references/stats-kv.md）
│   └── _middleware.js      # JWT 校驗 + CORS
└── README.md

Step 4 — 主題色注入

使用者選定的主題方案需要同時注入到：

index.html 的 <style> 中的 CSS 變數
admin.html 的同位置
login.html 的同位置

5 套預設主題的具體 CSS 變數值見 references/design-system.md。

如果使用者傳入 hex 顏色（如 #FF6B6B），按 references/design-system.md 中"hex 轉完整主題"的演算法生成配套色階。

Step 5 — 呼叫部署 Skill

完成所有檔案生成後，呼叫 edgeone-pages-deploy Skill 執行部署：

觸發短語：deploy this portfolio to EdgeOne Pages
專案目錄：~/Desktop/portfolio-{slug}/

部署成功後，必須：

在 EdgeOne Pages 控制台引導使用者綁定以下 KV 命名空間（手動一次性操作）：
- 變數名 PORTFOLIO_USERS ← 使用者帳號庫
- 變數名 PORTFOLIO_WORKS ← 作品庫
- 變數名 PORTFOLIO_STATS ← 造訪統計
- 重要：變數名必須嚴格匹配，KV 綁定後在 Edge Function 中作為全域變數 存取，而非 env.PORTFOLIO_WORKS（這是 EdgeOne Pages 的特殊規範）。
重新部署一次讓 KV 綁定生效。
回傳存取 URL + 預設管理員帳號密碼（首次部署時自動寫入 KV）。

路由表（references/ 按需載入）

下表幫助 AI 決定何時開啟哪份 reference：

使用者場景關鍵詞	載入的 reference
"主題色 / 配色 / 視覺風格 / hex / 自訂顏色"	`references/design-system.md`
"登入 / 鑑權 / JWT / 密碼 / token"	`references/auth-jwt.md`
"作品 / CRUD / 新增 / 編輯 / 刪除 / 增刪改查"	`references/portfolio-crud.md`
"AI 生成 / 作品介紹 / 描述生成 / 智慧填寫"	`references/ai-generate.md`
"統計 / 瀏覽量 / PV / 熱門作品 / 看板"	`references/stats-kv.md`
"部署 / 上線 / EdgeOne / 域名 / KV 綁定"	`references/deploy-workflow.md`
"景觀 / 平面 / 室內 / 工業 / UX 行業話術"	`references/portfolio-knowledge.md`

核心約束（必須遵守）

絕不依賴外部 API Key——預設模式下所有功能（包括 AI 生成）必須零配置可跑。 references/ai-generate.md 描述了可選的 DeepSeek 增強模式，但不是預設行為。
絕不寫入使用者路徑含特殊字元的目錄——優先使用 ~/Desktop/ 下不含 × ' " / 的乾淨路徑。
圖片欄位不做 startsWith('http') 兜底判斷——直接信任傳入的 img 欄位，本地 /assets/xxx.jpg 和遠端 https://... 都要原樣使用。
JWT secret 不硬編碼在程式碼裡——從 EdgeOne Pages 環境變數 JWT_SECRET 讀取，部署後引導使用者在控制台手動設定。
首次部署完成後必須回傳：
- 公開存取 URL
- 控制台連結
- 預設管理員帳號（提示首次登入後立即修改密碼）

可選增強（使用者明確要求時啟用）

使用者說	啟用
"接真 AI" / "用 DeepSeek" / "AI 能力更強一點"	`references/ai-generate.md` 中的 Plan B：DeepSeek 雙引擎
"支援中英文切換" / "雙語"	在 `index.html` 新增 i18n 字典 + 切換按鈕
"加上 RSS / 訂閱功能"	新增 `functions/api/rss.js`
"支援作品評論"	新增 `functions/api/comments.js` + 評論 KV namespace

反例：不應觸發本 Skill 的請求

"做一個景觀項目展示站"（指特定項目站，不是設計師作品集） → 使用 landscapeflow Prompt
"做一個落地頁 / SaaS / 電商網站" → 不屬於作品集場景
"把我現有的履歷改成網頁" → 是履歷不是作品集
單純的"AI 生成一段作品介紹"（不建站） → 不需要建站 Skill

輸出契約

執行完成後，向使用者輸出以下結構化結果：

✅ PortfolioFlow 作品集已就緒

🌐 存取 URL: https://portfolio-{slug}.edgeone.cool
🔐 管理後台: https://portfolio-{slug}.edgeone.cool/admin
   - 預設帳號: [email protected]
   - 預設密碼: PortfolioFlow_{隨機6碼}
   - ⚠️ 首次登入後請立即修改密碼

📊 已部署能力:
   ✅ 前台作品集首頁（{N} 個範例作品）
   ✅ 作品詳情頁
   ✅ 管理後台（登入 / CRUD / AI 生成）
   ✅ Edge Functions × 4
   ✅ KV Storage × 3
   ✅ JWT 鑑權 + CORS Middleware

🎨 目前主題: {主題名稱}
📁 專案目錄: {本機路徑}

下一步建議:
1. 登入後台新增你的真實作品
2. 上傳頭像和封面圖到 /assets/
3. 修改 footer 中的版權和聯絡方式

PortfolioFlow 作品集建站工具