ShareDocs FinClaw MVP UI Design (Imported Reference)

状态：Imported Reference / 来自团队成员旧产出，作为 V1 UI 设计的视觉基线日期：2026-05-16 项目：FinClaw 文档级别：参考体验级（reference-import）来源：/Users/mlabs/Programs/ShareDocs/FinClaw/# FinClaw MVP — UI Design.md + UI_Demo.jpg 本地副本：本目录 sharedocs-finclaw-ui-demo.jpg

Purpose

团队成员在 V1 治理设计输出之前，已经在 ShareDocs 中产出了 FinClaw MVP UI 高保真设计文档与一张实际渲染的页面 demo（New Task 页面）。

为避免每次 AI Agent 需要重新读取 ShareDocs 路径（context 浪费 + 路径外部化风险），本文件将关键内容逐字保留导入到治理库，作为后续 v1-ui-prototype-and-design-system.md 撰写的视觉基线。

本文件不替代 v1-ui-prototype-and-design-system.md：它只承载团队成员的原始视觉规范；新增的 V1 交互（Thread / Checkpoint / Refresh / Feedback）由 v1-ui-prototype-and-design-system.md 在此基础上扩展。

1. 原始定位（来自 ShareDocs）

FinClaw 是一个面向加密货币的 AI Native 金融认知操作系统。它绝对不是一个聊天机器人。它是一个高度结构化、事件驱动的控制台，用于处理用户消息（事件解读、标的认知、交易前判断支持、风险挑战）并输出结构化的"认知流（Cognition Feeds）"。

2. 核心价值（C 端用户）

输入一个金融事件 / 标的 / 想法 → 得到系统化的认知结果（不是碎片化观点）
看到完整的推理链（白盒审计）→ 建立信任
可复用的分析报告 → 沉淀自己的研究笔记

3. 交互范式（非对话，而是任务流）

用户「新建任务」
选择任务类型：
- 事件解读 / 标的认知 / 交易前判断支持 / 风险挑战
填写输入材料（粘贴新闻链接 / 上传 PDF / 直接输入问题）
可选约束：时间范围（短期/中期/长期）、风险容忍度（保守/平衡/进取）
运行 FinClaw
逐步展示：主 Insight / 支持证据 / 风险点 / 情景推演 / 行动建议 / 推理轨迹（白盒折叠区）

4. 设计系统与视觉美学

4.1 色彩规范

角色	Hex	用途
背景	#0F1119	Deep navy-black 主背景
卡片背景	#1A1D2E	卡片 / 模块容器
边框	#2A2D3E	分隔线 / 卡片边框
主强调色	#7F77DD	Primary accent，紫色
看多 Bullish	#1D9E75	Teal-green
看空 Bearish	#E24B4A	Red
警告 Warning	#EF9F27	Amber
主文本	#E8E6DF	Primary text
次文本	#98968E	Secondary text

4.2 排版字体

无衬线：Inter 或类似（标题 18-20px 加粗，正文 14px 常规，标注 12px）
指标数字：等宽字体或支持 tabular-figure 特性

4.3 圆角与间距

元素	值
卡片圆角	12px
按钮圆角	8px
Pill / badge	16px（全圆角）
卡片 padding	16px
卡片 gap	12px
区块 margin	24px

4.4 信息密度哲学

高信息密度本身就是一个核心功能特性。交易员希望在同一屏幕内一眼看到大量并发信息。绝对不要过度简化设计或使用过多的视觉留白。请参考彭博终端（Bloomberg Terminal）的信息紧凑感，而不是 Apple Notes 的清爽感。

4.5 组件风格

Tailwind CSS + shadcn/ui 实用优先（utility-first）设计语言
模块化卡片（Widgets）→ 可自由组装成 Dashboard

Widget：承载 FinClaw 不同的认知输出
Dashboard：Widget 的组装得到 Dashboard (Insight)
用户对话 / 操作交互的反馈是实时组装的 Dashboard (Insight)

6. 公共 Layout

两栏布局：左侧 Menu List（2/10），右侧具体业务页面（8/10）。

7. 业务页面规划

7.1 页面 1：New Task 页面（任务触发工作流）

目的：供用户触发 AI 认知工作流的结构化输入区域
布局：各 card 自上而下组合
核心元素：
- 任务类型选择器：4 选 1 的 Segmented control（事件解读 / 标的认知 / 交易前判断支持 / 风险挑战）
- 输入区：文本区域，支持 URL / 纯文本 / 直接问题
- 约束条件设定：时间范围 + 风险容忍度的 pill 选择器
- 主操作按钮：「运行 FinClaw」（紫色 #7F77DD）

7.2 页面 2：Dashboard 页面（认知流主看板）

目的：系统主页，展示由市场事件驱动生成的结构化认知结果流
布局：瀑布流网格 / 高密度多列数据看板
核心元素：
- 市场状态卡片 (Market Regime Widget)：紧凑展示当前市场状态（如「Risk-On / 趋势市」）
- 认知卡片 (Cognition Widgets)：每张卡片必须包含：
  - Header：事件触发源（如「🚨 SEC 发言偏鹰」）
  - Insight：核心论点
  - Impact：受影响标的及方向（使用 Bullish/Bearish 颜色）
  - Strategy：可执行方向建议
  - Risk：脆弱点要点（Warning 颜色）
  - Confidence Score：低调数字（如「0.72」）

7.3 页面 3：任务结果详情页（白盒认知展开页）

目的：用户在 New Task 执行完任务后进入；专业交易员审计 AI 底层推理过程
该页面不出现在左侧菜单
布局：分屏视图 / 高密度详细报告
核心元素：
- 结论区：高亮主 Insight、受影响标的、时间尺度
- 支持证据：垂直时间轴 / 逐步流程图（展示 AI 调用的 Skills 链，只展示结论不展示推理细节）
- 风险点：Warning 颜色罗列
- 情景推演：Bull Case vs Bear Case 对比区块（各自带触发条件）
- 行动建议：清晰带边框区域
- 推理轨迹：白盒审计折叠区，每个 skill 可独立折叠，折叠后只展示 skill 名称和结论

7.4 页面 4：FinClaw Chat（轻交互入口）

目的：右下角悬浮 chat icon 按钮触发；用户输入后跳转到任务结果详情页，不是对话式文字回复
布局：屏幕底部悬浮命令栏（类似 Mac Raycast / Spotlight）
核心元素：极简输入框（占位提示：「帮我分析 ETH 最近为什么弱...」）+ 微小视觉提示（表明回车会生成结构化认知卡片，而非启动聊天）

8. 输出要求

所有 UI 看起来像现代组件构建，AI 金融分析项目需要一定前沿科技感
必须使用真实加密货币占位数据（BTC、ETH、SUI、资金费率、SEC 新闻等），拒绝 Lorem Ipsum
严格遵守色彩、字体、间距规范

9. 视觉参照

sharedocs-finclaw-ui-demo.jpg 是 New Task 页面的实际渲染：

左侧 menu（Dashboard / New Task / History）
主区顶部：4 个 Analysis Vector 卡片（Event / Asset / Pre-trade / Risk Challenge）
中部：Data Feed / Reasoning Trace 输入框
底部：Temporal Horizon（Short/Mid/Long） + Risk Aperture（Conservative/Balanced/Aggressive）
右下：紫色 Run FinClaw 按钮
左下角：用户状态卡（"SOVEREIGN_01 / Tier: Elite"）
右上角：搜索框 + 通知 + 帮助

10. 与 V1 设计的映射（重要）

ShareDocs UI 概念	V1 设计映射	对齐度
4 种任务类型	V1 4 种 cognition route	✅ 完全对应
Insight	V1 `key_findings` / `main_thesis`	✅
支持证据（Skills 链）	V1 `evidence_items` + `advisor_outputs`	✅
风险点	V1 `risk_notes`	✅
情景推演（Bull / Bear）	V1 `scenarios`	✅
行动建议	V1 `Pre-execution-Checkpoint`（注意：在 V1 这是独立对象）	⚠️ 需要扩展
推理轨迹（白盒折叠）	V1 `advisor_outputs + tool_call_trace`	✅
时间范围 / 风险容忍度	V1 `user_constraints`	✅
Widget × Dashboard	V1 PRD UI 形态	✅

11. V1 需要在此基础上增补的（未在 ShareDocs UI 文档中覆盖）

V1 概念	需要新增的 UI
`MarketCognitionThread` 长期对象	Thread 列表页 / Thread 详情页
Thread Refresh + Diff View	刷新时的字段级 diff 高亮（AL-5）
`PreExecutionCheckpoint` 独立对象	Checkpoint 保存视图 + 历史列表
Save Thread Sheet（AL-6）	Thread 内 snapshot 横向对照表
Feedback / Review UI + Queue（AL-7）	用户反馈入口 + 后台 review queue UI
ProfileConsent（AL-1）	Onboarding 同意弹窗
Sensitive Input Handling（AL-2）	输入时的敏感字段告警

12. License / Attribution

本文件内容逐字保留自团队成员旧产出，属于 FinClaw 项目内部资产。如未来该 UI 设计有 IP / license 归属问题，需要与原作者对齐。

13. References

原始路径：/Users/mlabs/Programs/ShareDocs/FinClaw/# FinClaw MVP — UI Design.md
原始视觉：/Users/mlabs/Programs/ShareDocs/FinClaw/UI_Demo.jpg → 本目录 sharedocs-finclaw-ui-demo.jpg
治理库 V1 UI 设计（已有）：../design/v1/v1-ui-ux-interaction-design.md
治理库 V1 UI 设计（待新增）：../design/v1/v1-ui-prototype-and-design-system.md（阶段 2 产出）

Purpose​

1. 原始定位（来自 ShareDocs）​

2. 核心价值（C 端用户）​

3. 交互范式（非对话，而是任务流）​

4. 设计系统与视觉美学​

4.1 色彩规范​

4.2 排版字体​

4.3 圆角与间距​

4.4 信息密度哲学​

4.5 组件风格​

5. 产品形态：Widget × Dashboard​

6. 公共 Layout​

7. 业务页面规划​

7.1 页面 1：New Task 页面（任务触发工作流）​

7.2 页面 2：Dashboard 页面（认知流主看板）​

7.3 页面 3：任务结果详情页（白盒认知展开页）​

7.4 页面 4：FinClaw Chat（轻交互入口）​

8. 输出要求​

9. 视觉参照​

10. 与 V1 设计的映射（重要）​

11. V1 需要在此基础上增补的（未在 ShareDocs UI 文档中覆盖）​

12. License / Attribution​

13. References​