# Awesome Index · 页面设计方案

> 把网上牛逼的东西收进一个库：给人用，也给 AI 用。
> 本文档是视觉方向的唯一事实来源；实现时所有颜色与字体决策从这里派生。

## 1. 主题定位

- **主体**：一个人工精选的「牛逼东西」数据库——开源软件、微服务、SaaS、网站、工具、应用、脚本、插件。
- **受众**：开发者（人类读者）+ AI Agent（MCP 机器读者）。**双读者**是本站与普通导航站的本质区别。
- **首页的唯一职责**：让两类读者都最快拿到想要的东西——人用搜索框，AI 用 MCP。

## 2. 设计方向：Riso 孔版印刷 × 数据档案

从「收藏/编目/印刷目录册」的世界取材：孔版印刷的双色错位、档案卡片的厚描边、
等宽字的编目批注。明确避开三种 AI 默认脸：
①暖奶油底+衬线大字+赤陶色；②近黑底+荧光绿/朱红单色；③报纸细线+直角密排。

### 色彩 token

| Token | 值 | 用途 |
|---|---|---|
| `--paper` | `#F0F1EC` | 页面底色：冷灰绿纸面（非暖奶油） |
| `--paper-raised` | `#FBFBF7` | 卡片/输入器具 |
| `--ink` | `#171A21` | 蓝黑油墨：正文、主按钮、描边 |
| `--ink-dim` | `rgba(23,26,33,.62)` | 次级文字 |
| `--riso-blue` | `#2436E8` | 电光群青：唯一强调色（平面色块，禁止渐变） |
| `--riso-coral` | `#FF4D2E` | 错版珊瑚红：极少量标记（logo 错位、必填星号、在线点） |
| `--panel` | `#10131A` | MCP 面板、页脚的深墨底 |

规则：蓝色只以「实心色块 / 错位阴影 / 记号笔划线」出现；珊瑚红全页不超过 5 处。

### 字体

| 角色 | 字体 | 说明 |
|---|---|---|
| 展示 | Bricolage Grotesque 800（CJK 回退 Noto Sans SC 900） | 仅 H1/H2 与词标，克制使用 |
| 正文/UI | Hanken Grotesk（CJK 回退 Noto Sans SC） | 400/500/700 |
| 数据/注释 | IBM Plex Mono 400–600 | 编目注释、代码、标签、表格数字 |

字号阶（clamp 流式）：`12 / 13 / 14 / 16 / 18 / 22 / clamp(30→64) 展示级`。

### 布局概念

```
首屏   ~/awesome-index                     ← 编目注释行          ┐ 左栏
       把网上牛逼的东西，                                        │
       收进一个好用的库。                    ← 记号笔划线强调      │
       [ 🔍 输入需求关键字……      ] [搜索]   ← 首屏主对象          │
       → mcp: search_entries({ q: "…" })    ← 实时回显（签名元素） │
       [● 给 AI 用？本站提供 MCP 接口 ↓]     ← 锚点滚到第二屏      │
       收录 1,284 · 标签 96 …                ← 元信息一行         ┘
                                             机读 JSON 面板 ⇄     ┐ 右栏
                                             人读标本卡（叠放）     │ 数据标本
                                             [随机游览]            ┘
第二屏 // 同一个库，两种读者
       「复制给 Agent」一句话指令条
       ┌─────────── 深墨面板 ───────────┐
       │ MCP 端点卡        │ 01 加配置   │
       │ honor3.com/mcp   │ 02 看工具表  │
       │ [复制] ● 在线     │ 03 直接调用  │
       └────────────────────────────────┘

第三屏 最近收录：[卡片][卡片][卡片][卡片]

页脚   深墨高页脚：品牌栏 / 快速反馈表单 / 导航(含管理入口) / 版权条
```

### 签名元素：双读者注释系统

每个主要区块左上角有一条 IBM Plex Mono 小字「机器等价物」批注
（如 `// mcp.tools: search_entries, get_entry, random_entry, list_tags`）；
详情页提供 人读 ⇄ 机读(JSON) 视角切换。结构本身在陈述事实：这个站服务两种读者。

### 动效（一处编排，其余安静）

- 首屏加载：标题两行依次上浮 → 搜索框浮现 → 回显行打字一次。
- 卡片 hover：向左上位移 + 蓝色错位硬阴影（印刷套色感）。
- 全局尊重 `prefers-reduced-motion`；焦点态为 3px 群青外描边。

## 3. 文案原则

主动词、句式一致：「搜索」「复制→已复制」「发送→已收到」；
错误不道歉、直接给办法；空状态是行动邀请。
联系：admin@honor3.com。

## 4. 原型文件

```
design/prototype/
├── index.html   首页（首屏 / MCP 第二屏 / 最近收录第三屏）
├── login.html   管理台登录（人工通道，Agent 走 MCP）
├── list.html    列表页（左侧嵌套标签树过滤）
├── detail.html  详情页（元数据 + 评论 + 机读视图）
├── admin.html   管理台（账号/标签/内容/评论/内容源 五个分区）
└── assets/{css/main.css, js/main.js}
```

原型为纯静态演示数据；正式实现按技术选型接入 DuckDB + JS 后端 + Docker。