1 added, 1 removed. Audit A to A.
# 设计决策文档
## 问题诊断（2026-06-06）
原布局首屏占用分析（768px 视口）：
| 区块 | 高度 | 累计 |
|------|------|------|
| Header 渐变大标题 | 250px | 250px |
| 工作流推荐区 | 255px | 505px |
| Sticky 控制栏（搜索+分类+快捷筛选） | 171px | 676px |
| **第一张工具卡片** | — | **90% 屏高才出现** |
核心问题：主要内容（工具卡片）被辅助功能（工作流推荐）完全压制。
---
## 选定方案：编辑精选 · 杂志感
参考：Product Hunt、App Store Today、Perplexity Collections
### 布局结构
```
┌────────────────────────────────────────────┐
│ NAVBAR (56px 固定) │
- │ AI工具导航 [搜索...] 47+ 每日 🌙 │
+ │ AI工具导航 [搜索...] 数据动态加载 每日 🌙 │
├────────────────────────────────────────────┤
│ HERO 今日精选 (~260px) │
│ ┌──────────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 主卡片 │ │ 次卡片 │ │ 次卡片 │ │
│ │ (rec:true) │ │ │ │ │ │
│ └──────────────┘ └──────────┘ └──────────┘ │
├────────────────────────────────────────────┤
│ CATEGORY TABS (44px sticky) │
│ 全部 · LLM · 图像 · 视频 · 编程 · … │
├────────────────────────────────────────────┤
│ TOOL LIST (紧凑行，无限滚动) │
│ 1 DeepSeek 大语言模型 免费 国产 ★★★★★ │
│ 2 Kimi 大语言模型 免费 国产 ★★★★★ │
│ … │
├────────────────────────────────────────────┤
│ AI 日报（可折叠） │
│ FOOTER │
└────────────────────────────────────────────┘
浮动：🧭 工作流按钮 → 右侧抽屉
```
### 关键改进
1. **首屏可见工具**：Navbar(56) + Hero(260) + Tabs(44) = 360px，首屏约可见 **5 条工具行**
2. **工作流降级为浮动抽屉**：不占主体空间，需要时随时召唤
3. **编辑精选 Hero**：rec:true 的工具获得更大展示空间，有「被策划过」的质感
4. **紧凑列表**：工具行高 52px，信息密度是卡片模式的 2-3 倍
### 保留功能
- ⇄ 工具横向对比（浮动对比栏 + 弹窗）
- ⧉ 一键复制工具 Markdown
- 🌙/☀️ 深色/浅色主题（localStorage）
- ⚠️ 链接失效徽章（linkFailCount ≥ 2）
- 📰 AI 日报（GitHub fetch 动态加载）
- 🧭 工作流推荐（抽屉形式）
### 放弃功能
- Canvas 分享卡片生成器（工作流卡片）→ 保留代码但入口隐藏，后续可重新激活
---
## 历史方案（未采用）
**A. 侧边栏导航**：分类永远可见，但手机端需要折叠逻辑，实现复杂。
**B. 搜索优先·极简**：首屏体验最干净，但失去编辑调性，与其他工具导航同质化。