📐 網站設計與建置藍圖 V3.0 · 2026-04-11

workskm 網站設計與建置藍圖

整合網站設計規劃書 + 建置白皮書

資源區架構不變動原則下的首頁優化方案

🎯 規劃原則

✅ 不可變動區域

  • • 資源區頁面架構（skills-list、memodata、knowbase、publish、about）
  • • 資源區導航選單結構
  • • manifest.json 技能資料庫結構
  • • 重要備忘卡片展示邏輯

🔄 可優化區域

  • • 首頁 Hero 區設計（可選擇性重構）
  • • 首頁新增：搜索區、熱門技能、新手上架、需求廣場
  • • 整體視覺風格統一
  • • 微信 WebView 相容性優化

📊 首頁當前現況

✅ 已有功能

  • • 導航欄（5主按鈕 + 資源區下拉）
  • • Hero 區（蝦龍 AI 市集 / 龍蝦版 / 技能廣場 三入口）
  • • 重要備忘區（5卡片，與 memodata.html 同步）
  • • 資源區下拉（技能清單/重要備份/知識庫）
  • • 響應式設計
  • • WeChat WebView 修復（-webkit-backdrop-filter）

⚠️ 待建設功能

  • • 搜索區（技能名稱/標籤/評分篩選）
  • • 熱門技能區（付費 Top 10 卡片展示）
  • • 新手上架區（最近 7 天優質技能）
  • • 需求廣場（用戶需求 + 懸賞金額）

🚀 四階段建置方案

1

Phase 1：Hero 區重構（可選）

預估 2-3 小時

方案A：保留三入口（當前）

保持 AI市集 + 龍蝦版 + 技能廣場 三入口，符合當前業務佈局

方案B：平台形象（推薦未來）

改為平台標題 + 統計數據 + CTA 按鈕，突顯技能廣場定位

2

Phase 2：搜索功能（高優先）

預估 3-4 小時
新增搜索區塊，實現前端搜尋功能（從 manifest.json 讀取）
搜索輸入框 + 篩選標籤（熱門/最新/免費/付費）
分類快捷按鈕：開發/設計/行銷/生產力
3

Phase 3：技能展示區

預估 4-5 小時
熱門技能區：從 manifest.json 讀取 Top 10 付費技能
新手上架區：最近 7 天優質技能 + 「新品」標籤
技能卡片：圖示+名稱+價格+評分+銷量
4

Phase 4：需求廣場

預估 2-3 小時
需求卡片：需求描述+懸賞金額+發布時間
「發布需求」「我要接單」按鈕
靜態 JSON 數據，後期遷移至 Cloudflare Workers + KV

🏗️ 技術架構

🌐

前端

  • • HTML5 + CSS3
  • • Tailwind CSS (CDN)
  • • Vanilla JavaScript
  • • 響應式設計
☁️

部署

  • • Cloudflare Pages
  • • 靜態網站托管
  • • 全球 CDN 加速
  • • 自動 HTTPS
📦

數據

  • • manifest.json
  • • memodata.html (JS 陣列)
  • • LocalStorage
  • • 無後端依賴

📁 變更文件清單

文件 操作 說明
index.html 修改 Hero 重構（可選），新增搜索、技能展示、需求廣場
manifest.json 擴展 增加價格、評分、銷量等字段
skills-list.html 保持 資源區頁面，不變動
memodata.html 需同步 每次 updatememo 必須同步更新 JS 陣列
knowbase.html 保持 資源區頁面，不變動
publish.html 保持 資源區頁面，不變動
about.html 保持 資源區頁面，不變動
demands.json 新增 需求廣場數據文件（Phase 4）
← 返回 workskm 首頁