99 lines
4.9 KiB
Markdown
99 lines
4.9 KiB
Markdown
# 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。
|