🔗 生態整合

🔧 三站優化清單(視覺一致+生態整合)

根據 01-firstthink.txt 與 AI市集建設計畫書,擷取三站共通要點制定的優化藍圖
📅 2026-04-11 🏷️ 優先級:P0/P1/P2/P3 🎯 三站:workskm / aiworkforme / upwholistics 📝 共 14 項
14
總項目
4
🔴 P0 核心缺失
6
🟡 P1 視覺整合
4
🔵 P2 生態聯動
🔴 P0 — 核心缺失(影響生態閉環)
P0-1 統一頂層導航體系 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 三站共通要點
三站 Nav 完全一致:
生態核心區:AI市集、技能廣場、AI Work for Me 課程
品牌展示區:居中顯示「WorkBuddy」Logo,點擊返回當前平台首頁
個人中心區:我的資產、我的設備、訂單中心、幫助中心

現況:workskm Nav 是「技能廣場/資源中心/關於」;aiworkforme 是「課程內容/學習分享/報名通道/常見問題」;upwholistics 是「首頁/技能廣場/資源中心/關於」。三站完全不同,沒有統一生態入口。
設計要點:Nav 高度 48px,深色半透明背景,滾動時固定。Logo 置中,點擊返回首頁。生態核心三站按鈕使用品牌綠色。個人中心用下拉選單。
P0-2 建立 AI市集 獨立站點 新建 Cloudflare Pages 專案 📋 待執行
#01-firstthink AI市集建設計畫書
參考 01-firstthink.txt,建立 AI市集 站點(Cloudflare Pages 專案名:`aimarket` 或 `ai-market`),實現:
首頁生態聯動:主標語「買AI設備,直接開啟技能變現」+ 三按鈕(立即購買→免費學3小時課程→上架技能賺錢)
硬體產品核心區:入門創作款 / 專業生產款 / 二手優品&租賃專區
生態信任背書:用戶案例、硬體保障、生態聯動提示
設備商城:分類導航 + 詳情頁 + 生態權益包
交易服務:支付、訂單管理、售後服務
策略:先建立空白站點框架,後續逐步填充功能(參考 Phase 1/2/3 藍圖)
P0-3 三站資源中心 標準化 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 嚴格要求
每個網站都必須有資源中心,且樣式/功能/內容一致。
標準化清單:
✅ 統一路徑結構:`/knowbase/` 或 `/resources/`
✅ 統一視覺:卡片樣式、色彩、字體與三站 Nav 同步
✅ 統一功能:搜尋 + 分類過濾 + 最新備忘 + 熱門備忘
✅ 統一內容風格:Markdown 格式化、清單呈現
現況:workskm 已有資源中心(knowbase/);aiworkforme 有簡單版;upwholistics 有 Phase 1 版。
下一步:基於 workskm 資源中心為標準,向其他兩站同步。
P0-4 全局搜索功能推廣至三站 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 生態整合
workskm 今日已實裝全局搜索(技能 + 備忘),需推廣至其他兩站。
技術方案:
✅ workskm 已完成:fetch manifest.json + eval memodata.html
→ 複製至 aiworkforme:搜「技能」(manifest.json)+「備忘」(memodata.html)
→ 複製至 upwholistics:搜「技能」(manifest.json)+「資源」(knowbase/)
生態搜索:擴展搜索結果包含「AI市集設備」類別(三站互通搜索概念)
🟡 P1 — 視覺一致性整合
P1-1 統一品牌色彩系統(Design Token) workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 視覺一致性要求
三站目前色彩完全不一致:
workskm:紫色系 `--green: #c8a2c8` / `--dark: #1a0a1a`
aiworkforme:綠色系 `--green: #00c896` / `--dark: #0a1a1a`
upwholistics:深藍系 `--green: #00c896` / `--bg: #0a0e27`

建議統一方向:
- 主品牌綠色:`#00c896`(aiworkforme 現用)
- 深色背景:`#0a1a1a`(aiworkforme 現用,視覺最沉穩)
- workskm 可保留紫色作為特色,但 Nav/資源中心等共用組件需用綠色
- upwholistics 深藍改為綠色系與整體生態一致
P1-2 統一字體與間距系統 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 視覺一致性
三站字體一致,但間距系統需標準化:
✅ 字體:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto`(全站統一)
❌ 間距:workskm padding-top: 48px;aiworkforme: 56px;upwholistics 無固定
❌ max-width:workskm: 1200px;aiworkforme: 1200px;upwholistics: 960px
統一:Nav height 48px、body padding-top 48px、content max-width 1200px
P1-3 統一卡片樣式系統 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 視覺一致性
三站卡片樣式差異大:
- workskm:`.poster-card` / `.copy-card` / `.value-card` 各自獨立
- aiworkforme:`--dark-card: #112020` 統一背景
- upwholistics:`.card` / `.lang-card` 樣式
統一:建立 `.site-card` 通用卡片類,全站通用邊框/圓角/陰影/hover效果
P1-4 生態 Logo 統一 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 品牌展示
Nav 置中 Logo 設計:
- workskm:`🦞 WorkBuddy 技能市場`(目前在左側)
- aiworkforme:`🦞 WorkBuddy 龍蝦版`(目前在左側)
- upwholistics:無品牌 Logo

統一設計:Nav 中央固定顯示「🦞 WorkBuddy」,點擊返回當前站首頁。右側為個人中心下拉按鈕。
P1-5 英雄區(Hero)生態 CTA 統一 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 生態聯動
三站 Hero 區應體現生態價值主張,並有統一的跨站 CTA:
- workskm Hero:技能變現 → 連結至 AI市集(設備購買)+ aiworkforme(課程學習)
- aiworkforme Hero:課程學習 → 連結至 AI市集(設備)+ workskm(技能廣場)
- upwholistics Hero:自動化平台 → 連結至 AI市集(設備)+ workskm(技能應用)

統一 CTA 按鈕組:「買設備 → 學課程 → 做技能 → 變現」
P1-6 統一 Footer 設計 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 視覺一致性
Footer 應包含:
✅ 三站連結(AI市集 / 技能廣場 / AI Work for Me)
✅ 版權聲明
✅ 幫助中心 / 常見問題連結
統一位置:底部居中,深色背景,綠色連結文字
🔵 P2 — 生態聯動功能
P2-1 三站 Nav 連結互通 workskm / aiworkforme / upwholistics 📋 待執行
#01-firstthink 生態核心區
Nav 中的三站連結(AI市集、技能廣場、AI Work for Me)相互連結:
- workskm Nav「AI市集」→ https://aimarket.pages.dev(新建站)
- workskm Nav「AI Work for Me」→ https://aiworkforme.pages.dev
- aiworkforme Nav「AI市集」→ https://aimarket.pages.dev
- aiworkforme Nav「技能廣場」→ https://workskm.pages.dev/skills-list.html
實現真正的「生態入口」概念
P2-2 個人中心整合 新建 或 嵌入三站 📋 待執行
#01-firstthink 個人中心
Nav 個人中心區(我的資產 / 我的設備 / 訂單中心 / 幫助中心):
- 我的資產:連結至 workskm(技能廣場個人店鋪)
- 我的設備:連結至 AI市集(設備商城)
- 訂單中心:連結至 AI市集(訂單管理)
- 幫助中心:連結至 workskm/help.html(已有)
實施:Nav 個人中心改為下拉按鈕,包含上述四項子連結
P2-3 AI市集與技能廣場 互相引流 新建:AI市集站 📋 待執行
#01-firstthink 生態聯動
根據 01-firstthink.txt 的生態聯動設計:
AI市集 → 技能廣場:設備詳情頁「生態權益包」標註「送技能廣場個人店鋪」,設備商城首頁展示「高算力需求技能」推薦
技能廣場 → AI市集:技能廣場標註「高算力需求技能⚡」,提示「推薦使用專業款AI電腦」,連結至 AI市集相應設備
這是「買設備→做技能→變現」閉環的關鍵觸點
P2-4 AI市集與 AI Work for Me 互相引流 新建:AI市集站 / 現有:aiworkforme 📋 待執行
#01-firstthink 生態聯動
根據 01-firstthink.txt:
AI市集 → 課程:設備商城首頁 CTA「立即購買→免費學3小時課程→上架技能賺錢」;設備詳情頁「生態權益包」標註「送AI Work for Me課程」
課程 → AI市集:aiworkforme 課程中「需要高算力實操」的章節,插入 AI市集設備購買連結;Hero 區 CTA 連結至 AI市集
🔧 14 項中 0 項已完成