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。

4.9 KiB Raw Permalink Blame History Unescape Escape