F
Feel.Trading · 設計進度
Design Todo · 你跟 Claude 的互動清單

整體進度

更新於 2026-04-16 · Tier 2 全員到齊
16 / 26 頁完成 61.5%
Tier 1 必備
7 / 7
✓ 100%
Tier 2 功能
7 / 7
✓ 100%
Tier 2.5 詳情
2 / 2
✓ NEW
Tier 3 進階
0 / 7
0%
Tier 4 附屬
0 / 4
0%
手機版覆蓋
16 / 16
✓ 100%
定版完成 進行中 / 迭代中 未開始 點任一列展開 notes
Tier 1

基本 UX 循環必備

7 頁 · 7 完成
Today 啟動頁 /today · 登入後首頁
早安 + AI 結論 + 訊號 + 策略 + 市場綜觀 + 新聞 + Footer
定版重點
  • 雙層頂欄(市場 ticker + 個人狀態條)
  • AI 今日結論大卡(TL;DR + 短/中/長三線 + 操作建議)
  • 今日訊號 + 市場異動(連動用戶歷史)
  • 市場綜觀(總市值 + 板塊熱度)
  • 新聞 + 行事曆 + 合作夥伴 + Footer
迭代歷程
  • v1 初版右欄卡片
  • v2 警報/觀察取代對話
  • v3 頂部 pill 取代右欄
  • v4 加新聞/夥伴/Footer
  • v5 市場綜觀 A/B 對照
  • v6/v7/v8/v9 指標迭代
  • v10 AI 結論大卡(定版)
聊感覺 · Chat /chat · AI 對話核心
口語輸入 → AI 分解 → 選項 → 回測 → 結果卡 + 建策略
定版重點
  • 3 模式 tab(教學 / 精簡 / 卡片)
  • 分類 vibe chips(5 類取代 21 扁平)
  • Choice buttons(止損/止盈/持有)
  • 進度 shimmer + 結果卡(5 格 metric)
  • Composer 自動撐高 + 語音(zh-TW 實作)
已實作功能
  • ✓ Web Speech API 語音輸入(真能用)
  • ✓ Textarea auto-grow
  • ✓ 雙主題切換
  • ← v1 初版
掃描器 · Scanner /scanner · 154 幣種 × 50+ 條件
AI 洞察 + 10 欄表格 + 12 標的熱度圖 + 詳情抽屜
定版重點
  • AI 掃描洞察 banner(最強組合直接告訴你)
  • 時間框 + 方向 + 排序 三組 toggle
  • 50+ preset chips 橫滑(帶觸發數字徽章)
  • 強度 5-bar visual(多頭藍 / 空頭紅)
  • 12 標的熱度地圖(hot-0 to hot-5 六級色塊)
  • 桌機右 drawer 420px · 手機 bottom sheet
策略中心 · Strategy /strategy · 運行/暫停/複製
列表/詳情雙欄 + 4 tab + equity curve + AI 診斷
定版重點
  • 聚合統計 5 格(今日 / 30d / 勝率 / 回撤 / 持倉)
  • 左欄列表(狀態燈 + 進度條 + PnL)
  • 右欄詳情 4 tab(概況 / 進出場 / 交易 / 實盤設定)
  • 累計收益曲線 + 勝負分佈 + 最近交易
  • AI 策略診斷(沿用 AI 結論模式)
  • 複製 / 暫停 / 刪除 主要動作
行銷落地頁 / · 訪客第一眼
Hero + 4 vibe chips + 3 步驟 + 6 功能卡 + 社群證明 + 3 方案 + FAQ
定版重點
  • Hero orb 漸層 + 雙 CTA(免費開始 + 看 Demo)
  • 4 示範 vibe chips 帶指標類別徽章
  • How it works 3 steps(口語 → AI 拆解 → 620d 驗證)
  • Features 6 格 / Stats 4 格 / 3 個測試見證
  • Pricing 3 方案(Pro 最受歡迎帶 glow)
  • FAQ details 可展開 + Final CTA + 完整 Footer
登入 / 註冊 /login · Email + Google + Apple
左右切版 + 登入/註冊 toggle + OAuth + 條款勾選 + 強度條
定版重點
  • 桌機左右分屏:左產品 preview + 信任數字,右表單
  • 登入 / 註冊 tab 切換(JS 切換欄位、按鈕、swap 文字)
  • Google / Apple OAuth · Email 密碼 · 保持登入
  • 註冊多「顯示名稱」+ 密碼強度條 + 條款勾選
  • 手機單欄 + 返回按鈕
用戶設定 /settings · 6 區塊
帳號 + 外觀 + 10 交易所 API + 通知 toggle + 危險區
定版重點
  • 桌機左 sidebar(6 分類)+ 右 content panel
  • 10 交易所 grid(Binance/Bybit 已連,其他灰階)
  • 選中的交易所展開 API key + 權限 + 模擬/測試網/實盤 切換
  • 5 個通知 toggle(策略/警報/事件/摘要/電子報)
  • 危險區紅邊框:匯出 / 停用 / 刪除帳號
  • 手機用 iOS-style nav list,tap 進入各區塊
Tier 2

功能頁

7 頁 · 7 完成
回測詳情 /backtest/[id] · 高頻進入頁
6 格 metrics + AI 判讀 + 收益曲線 + 投資模擬器 + 最佳持有 + 風險警示 + 148 筆交易
  • Hero:6 格 metrics(勝率/累計/平均/R-R/回撤/Sharpe)+ 條件 chips
  • AI 判讀大卡:優點/需留意/建議操作 三欄
  • 收益曲線 vs BTC vs 定投 三條對比
  • 投資模擬器:滑桿調資金 + 損益明細
  • 最佳持有時間對比 bar chart
  • 交易紀錄表:日期/持有/進出場/報酬/原因
  • 底部 sticky CTA(手機版)
週期儀表板 /cycle · 歷史對照 + 24 逃頂指標 v3 定版
AI 週期判讀 + 3 週期疊圖(對數 log 軸)+ 24 指標 6 分類 + sparkline + 全免費爬蟲路線
v3 定版特色
  • 歷史週期對照圖:3 週期疊圖(2017/2021/當前)+ 對數 Y 軸 + 預測扇形 + 「像 2021-03」AI 結論
  • 24 逃頂指標儀表板:6 大類(價格/鏈上/網絡/情緒/輪動/衍生品)· 每張卡含狀態+閾值 bar+30d sparkline
  • 全免費資料策略:自算 10 + 免費 API 3 + 爬 LookIntoBitcoin/CheckOnChain 11 · 成本 $0/月
  • Phase 2 選配:付費用戶 >100 後升 Glassnode $29/月,8 個爬蟲改官方 API
  • 觸發狀態 glow · 接近狀態金邊 · 分類 section header 漸變色
實盤監控 /live · Bot 監控
5 格聚合 + Bot 卡(含 SL/TP 進度條 + 立即出場)+ 活動流 + 交易所連線
  • 頂部 5 格聚合(Bot 數/今日 PnL/持倉/成交/交易所狀態)
  • Bot 卡:狀態 pulse + 進場/現價/止損/止盈 5 格 + SL/TP 進度條
  • 模擬/測試網/實盤 三種模式標示
  • 即時活動流(進場/警示/出場)+ 交易所連線延遲
  • 🛑 全部緊急停止按鈕在頭部
策略排行榜 /showcase · 頒獎台 + 排名
AI 精選 + 頒獎台 Top 3(金銀銅) + 篩選 chips + 完整排名表 + Clone 按鈕
  • AI 今日精選 banner(根據偏好推薦)
  • 頒獎台 Top 3(金銀銅漸層 + 中間 #1 放大)
  • 7 個分類 chips(趨勢/反轉/套利/事件驅動/波段/日內)
  • 4 個排序 toggle(30d 報酬/勝率/Clone/新上架)
  • 完整表格:策略 + 作者 + 標的 + 指標 + 趨勢 sparkline + Clone
  • 上架我的策略 CTA
交易圖表 /trade-chart · 條件驅動 K 線 v3 定版
條件驅動渲染(策略用啥才畫啥)· 每條件一色系 · 資料工程透明 · 8 條件跨 7 類別示範
v3 定版特色(取代 v1 預設指標模板)
  • 條件驅動渲染:只畫策略用到的條件,不疊預設 RSI/MA/BB
  • 每條件一色系:chip → 主圖線 → 副圖 → 命中圓點 → 紀錄 badge 全部同色
  • 8 條件跨 7 類別:技術 / 價格行為 / 成交量 / 鏈上 / 衍生品 / 情緒 / 事件
  • 未觸發範例:3/5 或 5/8 部分達成用灰色小三角 + 註記(教育用)
  • 事件帶狀:FOMC 深灰垂直帶 · 週末淡灰背景
  • 資料工程透明:每條件的資料源/頻率/延遲 + 時間對齊 4 規則 + 樣本信賴度
  • 實作技術棧:lightweight-charts v5(MIT, 35KB, TradingView 開源)+ Custom Primitive 畫帶狀/染色
市場要聞(完整頁) /news · Today 頁「載入更多新聞」目的地
3 欄(篩選 + feed + AI digest)· 7 類 chip · 色碼左條(與你相關 / 警示 / 中性)· 每則可 AI 總結影響 + 找歷史類似事件
定版重點
  • AI 今日摘要卡(7 正面 / 1 警示 · 整體偏多 / 偏空結論)
  • 色碼左條:金(與你相關)· 紅(警示)· 灰(中性)
  • 篩選:類別(BTC / ETH / 宏觀 / 鏈上 / DeFi...) + 來源(CoinDesk / Reuters / Bloomberg...)+ 時間(24h / 7d / 30d)
  • 每則兩顆按鈕:AI 總結影響 · 找歷史類似事件
  • 手機版:horizontal 篩選 chip + 單欄 card · 底部 5 tab(要聞 active)
  • 連動:行事曆 / Today 頁「載入更多新聞」的落地頁
經濟行事曆(完整頁) /calendar · Today 頁「完整行事曆」目的地
週/月/列表切換 · 日分組 timeline · FOMC/CPI 紅框 + 展開歷史反應 sparkline 四格(BTC/DXY/Gold/S&P)· AI 週策略
定版重點
  • AI 本週重點 banner(紅框高亮 FOMC + CPI · 含減倉 % 建議)
  • 影響度三色:🔴 高(bear 底) · 🟡 中(gold 底) · 🔵 低(灰)
  • 高影響事件展開:歷史過去 6 次 BTC/DXY/Gold/S&P 四格 sparkline + 鷹派/鴿派條件對照
  • 「看 K 線」按鈕連 trade-chart v3(過去 6 次 FOMC 的 BTC 走勢)
  • 訂閱事件右欄:個人化倒數(FOMC 18h 36m 等)
  • 資料源:FRED API + TradingEconomics + CoinMarketCal(加密事件)
  • 手機版:日分組 card · 高影響點擊展開 sparkline · 底部 5 tab(行事曆 active)
Tier 2.5

詳情頁補強(NEW)

2 頁 · 2 完成 · SEO + AEO 雙打

填補列表頁的去向:要聞每則點進去、行事曆每個事件點進去,都有專屬的 AI 影響 / 歷史反應 / 相關策略詳情頁。

新聞詳情頁 /news/[slug] NEW
AI 影響卡 · 4 標的即時反應 · 新聞後 1h K 線 · 5 則歷史類似事件(sparkline)· 鏈上反應 · 同主題新聞
條件驅動 section 清單(依新聞類型自動顯示)
  • AI 影響分析卡(TL;DR + 4 標的即時反應 + 建議操作)— 所有新聞都會顯示
  • 新聞後 1h K 線(標示發布時間 + 支撐阻力)— 有價格連動的新聞
  • 歷史類似事件(AI 找 5 則 + sparkline + 平均漲跌)— 所有重大新聞
  • 鏈上反應(交易所淨流入 / 穩定幣 / 鯨魚 / Funding)— 鏈上相關新聞
  • 相關事件連結(如 FOMC 倒數 18h)— 有關聯行事曆
  • 你的策略受影響(減倉 50%、緊止損一鍵)— 登入且有持倉
  • 原文全文展開(可折疊 + 翻譯切換)
💡 樣本頁展示「Fed 鷹派訊號 BTC 回調」宏觀類型,涵蓋 7 個 section
事件詳情頁 /calendar/[event-id] NEW
倒數 · AI 本次預測(鷹/中/鴿機率 + 三情境 BTC 預估)· 過去 10 次對照圖(所有路徑 + 平均)· 10 次明細表 · 社群策略 · 受影響部位
定版重點(FOMC 範例)
  • Hero 倒數:大數字 18h 36m · 4 格 consensus(市場預期/前值/鷹派機率/dot plot)
  • AI 本次預測卡:鷹/中/鴿三色機率條 + 4 標的波動預估 + 三情境卡(紅/灰/藍)
  • 歷史對照圖:過去 10 次所有路徑疊圖(鷹紅 · 鴿藍 · 中灰 · 平均金線粗)
  • 10 次明細表:日期 / 類型 / 利率動作 / BTC+48h / DXY / Gold / 看 K 線
  • AI 規律:3 條件化洞察(鷹派 > 30% → 跌 83% 等)
  • 社群 FOMC 策略:3 個最高回報的社群策略(連 /showcase)
  • 你的部位受影響:2 個持倉卡 + 一鍵避險調倉
  • 相關新聞:4 則(連 news-detail)
💡 「看 K 線」按鈕每一行都連到 /trade-chart-preview-v3(條件驅動 K 線) — 完整貫通
Tier 3

Admin 後台

6 頁 · 0 完成
📝
SEO / AEO 策略決策 DESIGN NOTE 2026-04-17
砍掉原定「SEO 預設場景頁 × 7」;改用新聞詳情頁 + 事件詳情頁當 SEO/AEO 骨幹
為什麼砍 SEO 預設場景頁
  • 原計劃 /scanner/rsi-oversold 等 7 個靜態頁針對「評估型」查詢(RSI 超賣的幣有哪些)
  • 但查不到實際月搜尋量(Google Keyword Planner 需登入、Ahrefs/SEMrush 付費),投入不確定 ROI
  • 現有詳情頁(news/calendar)已能自動長出 100+ 頁唯一內容,SEO 量體夠
  • 可等接 Google Ads Console 拿到真實流量資料後,再決定要不要補 1-3 個高搜尋量場景頁
取代策略:詳情頁當 SEO / AEO 骨幹
📰 新聞詳情頁
  • 每則新聞獨立 URL(slug)
  • AI 影響分析卡 = AEO 黃金內容
  • 天然打「時事型」查詢:FOMC 結果、ETF 新聞
  • 1 年累積 100-500 頁
📅 事件詳情頁
  • FOMC / CPI 等 evergreen URL
  • 每次開會更新內容,URL 重用
  • AI 三情境預測 + 過去 10 次對照
  • 被 ChatGPT/Perplexity 當權威來源
Phase D 實作時的 4 個 SEO/AEO 補強(checklist)
1
URL 用 slug,不用隨機 ID — 例 /news/fed-hawkish-btc-drops-3-percent
SEO
2
每頁加 JSON-LD 結構化資料 NewsArticle(新聞)+ Event(行事曆)+ FAQPage(常見問題)
SEO + AEO
3
自動產生 /sitemap.xml — 新增新聞/事件時自動 push 進去,Google 爬蟲即時收錄
SEO
4
根目錄 /llms.txt + /about 定義頁 — AI 引擎抓 llms.txt 找站點地圖;/about 作為「Feel.Trading 是什麼」的權威定義源
AEO
📌 提醒
這 4 個補強不是獨立頁面、不列入 Tier 計數。是 Phase D(實作 Next.js 路由)時的必做 checklist。記得檢查。
Admin 主控台 /admin · 總覽儀表板
用戶量 / 活躍 / 系統健康 / 異常告警
未開始
用戶管理 /admin/users
列表 / 搜尋 / 停權 / 權限 / 充值紀錄
未開始
策略管理 /admin/strategies
全平台策略列表 / 熱門 / 審核 / 下架
未開始
審計日誌 /admin/logs
系統 / 用戶 / 交易事件 timeline
未開始
野因子管理 /admin/wild-factors
自訂指標 / 資料源 / 參數調整
未開始
數據分析 /admin/analytics · /admin/activity
用戶活動 / 使用統計 / 留存率
未開始
Tier 4

附屬 · 工具頁

4 頁 · 可延後
Dashboard 重導 /dashboard 舊路由,重導到 /today
Simulate /simulate 獨立模擬器(可併入 /backtest)
Logo 預覽 /logo-preview 內部用,品牌資源
策略測試頁 /test-strategies 開發用,可能移除
📐 PATTERNS

設計過程累積的通用模式

01AI 結論大卡模式 — 多指標展示用「AI 結論 + 展開 raw data」,不做純資料看板
02雙層頂欄 — Layer 1 導航 + Layer 2 個人狀態(P&L / 警報 / 觀察)全站一致
03手機行動區 + 資訊區 — 分隔線切開,上面動作/下面參考
04手機 5 tab bar — Today / 聊感覺 / 掃描器 / 策略 / 更多
05金色 #F0B90B 專用 CTA — 送出/回測/新建/啟動;藍色是多頭/資訊
06Mono + tabular-nums — 所有數字用 JetBrains Mono 對齊
07Web Speech API 語音 — Chat 頁實作 zh-TW 即時轉字幕
08右側 drawer / 底 sheet — 桌機用右抽屜 · 手機用下滑 bottom sheet
09強度 5-bar visual — 比純百分比易讀,多空用顏色區分
10功能零損失原則 — 所有改版必須保留原功能,不引入 breaking change
NEXT

下一步建議

  1. 1 補完 Tier 1 剩 3 頁(/ 落地頁 · /login · /settings)— 基本用戶旅程才完整
  2. 2 /backtest/[id] — Today/Chat/Scanner 都會點到這裡,優先做
  3. 3 D:Next.js 實作階段 — 從 /today 開始把定版設計做成真代碼,串真資料
  4. 4 剩下 Tier 2/3 邊實作邊設計即可(已有 patterns 參考)
© Feel.Trading · Design Todo Dashboard · Updated by Claude + test168