feat(design): Riso 风格页面设计与静态原型（首页/列表/详情/管理台/登录）

2026-08-26 16:01:19 +08:00
commit c47bb15d8c
8 changed files with 3047 additions and 0 deletions
@@ -0,0 +1,98 @@
+# 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。