Facade 产品形态研究：个人站 / Digital Garden / Portfolio / AI Dashboard

Campaign: rc-69f3895b-20c9 · Task 02 · 2026-05-01

研究目标：梳理个人站、作品集、digital garden、research archive、usage dashboard、AI OS dashboard 的优秀案例与社区反馈，输出 Maple personal-first 的 Facade 信息架构与视觉方向建议。

---

一、Facade 现有上下文

已锁定的决策（来源：MER-179 ~ MER-184、Discord 设计 session、tech-stack 调研）：

维度	决策
框架	Astro 5.x + MDX + Tailwind CSS
定位	Meridian 的公开出版层，面向外部（雇主 / 社区 / 协作者）
视觉基调	深海军蓝/灰 + 金/琥珀色，东方克制美学
排版哲学	Typography is the product — 80% 设计时间在间距和字体上
内容模型	posts, journals, projects, notes
当前状态	107 个视觉原型已生成，待最终选型

与其他项目的边界：Facade（公开出版）≠ 自研 IM（Yi 前端，内部）≠ Learning OS（知识系统）。三者独立，本报告只涉及 Facade。

---

二、案例研究

2.1 Digital Garden 标杆

案例	技术栈	核心设计决策	对 Facade 的启发
Gwern Branwen (gwern.net)	Hakyll + Pandoc	弹窗预览、旁注、双向链接、A/B 测试设计细节	长文阅读体验的天花板，旁注 > 脚注
Andy Matuschak (notes.andymatuschak.org)	自写脚本 + Bear	横向滑动面板，evergreen notes 理论	面板式导航适合关联性强的内容
Maggie Appleton (maggieappleton.com)	Next.js	seedling → budding → evergreen 成熟度标记	成熟度标记降低发布门槛
Nikita Voloboev (wiki.nikiv.dev)	GitBook 风格	覆盖面极广的个人 wiki，4.9K GitHub stars	百科全书式组织的可行性证明
Simon Willison (til.simonwillison.net)	Datasette (Python)	“Today I Learned” 短格式，高频更新	短笔记 + 高频更新的轻量模型
Devine Lu Linvega (wiki.xxiivv.com)	自写 C 引擎	视觉极简，独特美学	美学即品牌，不需要复杂框架

Digital garden 设计六原则（Maggie Appleton 总结）：

1. 拓扑优于时间线 — 按概念组织，不按发布日期
2. 持续生长 — 内容永远是进行时
3. 公开学习 — 暴露不完美的思考
4. 个性化表达 — 拒绝模板化
5. 混合媒介 — 文字、代码、图解混搭
6. 独立所有权 — 自有域名 + 可移植格式

社区批评（HN、Maxwell Forbes 分析）：

• 没有日期 → 读者无法判断时效性（最高频抱怨）
• 导航混乱 → 不知从哪开始、何时停
• 死链接 → 点进空页面，信任迅速流失
• 投入产出比低 → 访问量惨淡是常态

2.2 开发者 / 研究者 Portfolio 标杆

案例	特色	对 Facade 的启发
Rauno Freiberg (rauno.me)	OS 风格隐喻，dock、界面音效、暗色模式	界面隐喻可以成为品牌标识
Paco Coursey (paco.me)	极简，纯排版驱动	与 Facade 已定的排版优先方向高度一致
Shu Ding (shud.in)	个人身份 + 深度项目页分离	内容分层：轻身份层 + 重项目层
Lee Robinson (leerob.com)	内容优先 blog-portfolio 混合体，实时数据 dashboard	博客 + 实时状态的融合可能性
Andrej Karpathy (karpathy.ai)	时间线式传记 + 演讲 + 论文列表，简单 HTML	简单可以是最好的选择
Brian Lovin (brianlovin.com)	OS 风格，Stack/AMA/书签 = “数字客厅”	"数字客厅"概念适合个人表达
Shikun Liu (shikun.io)	交互式博文、Distill 风格引用	研究输出的最佳展示形式

AI 研究者个人站的两种模式：

• Blog-centric（内容即产品）：Karpathy、Lilian Weng、Chris Olah — 重解释质量
• Portfolio-centric（项目即作品）：Shikun Liu — 重交互演示

共同点：解释的清晰度 > 视觉花哨。最好的站点创造出视觉系统（图解、交互组件）本身成为品牌。

2.3 AI Dashboard / 个人数据中心

LLM 可观测性平台（Helicone / Langfuse / LangSmith / OpenRouter）的共享 UI 模式：

• 侧边栏导航 + 顶部 KPI 卡片（请求数、成本、token、延迟）
• 可过滤的 trace/request 表格
• 时间序列趋势图
• 按模型维度的成本分布

个人 AI OS Dashboard 的现状：

• Mission Control（开源）：32 面板，Kanban + agent 心跳 + 技能管理 + token 成本可视化 + 信任评分。最接近"个人 AI 指挥中心"。
• 实际空白：没有成熟产品将 AI 使用可观测性 + 研究档案浏览 + 个人工作流数据整合到一个界面。市场主要是 CLI-first（像我们自己的设置）或面向企业。

个人生活 Dashboard / 量化自我：

• QS Ledger（17+ 数据源，Python + Jupyter）、Gyroscope（最精致的消费级产品）、Exist（自动找关联）
• "Personal API"概念仍是小众讨论，很少产品化

2.4 2024-2025 视觉与交互设计趋势

趋势	状态	与 Facade 的关系
Bento Grid	接近过度使用，需动画/交互保鲜	可用于首页模块化布局，但需克制
暗色模式	已是标配	与已定的深色基调一致
动态排版	上升趋势	适合 hero 区域，与排版优先方向契合
微交互	取代了"零动画"时代	传达工艺感的关键
极简最大化	结构简洁 + 排版大胆	与已定方向高度匹配
毛玻璃	仍在但退潮	可用于卡片/浮层，不宜全页
排版优先	主流	Facade 已选择的方向
界面音效	新兴，Rauno 级别的站点在用	可考虑作为差异化，但优先级低

---

三、综合发现

3.1 三种产品形态的光谱

纯 Digital Garden ←——→ 混合站 ←——→ 纯 Portfolio
(Gwern, Andy M.)        (Lee Rob.)       (Rauno, Paco)

• 纯 Digital Garden：内容密、链接密、成长性强，但导航混乱风险高
• 纯 Portfolio：展示精、控制强，但内容深度受限
• 混合站：两者优势兼得，但需要清晰的信息层级避免角色冲突

Facade 应取混合站位置，偏 Portfolio 侧。 理由：

1. Facade 面向外部（雇主、社区），需要清晰的第一印象 → Portfolio 基因
2. Maple 的 AI 调研产出（100+ 报告）需要展示场所 → Digital Garden 基因
3. 已定的"排版即产品"方向更适合精控的 Portfolio 骨架 + 选择性开放的 Garden 内容

3.2 信息架构建议

基于案例研究和社区反馈，建议 Facade 采用三层信息架构：

┌─────────────────────────────────────────────────┐
│ Layer 0: 身份层（Identity）                       │
│  ├── 姓名 / 一句话定位                            │
│  ├── "Now" 状态（当前在做什么）                     │
│  └── 导航（最多 5 个顶级入口）                      │
├─────────────────────────────────────────────────┤
│ Layer 1: 作品层（Showcase）                       │
│  ├── Projects — 3-6 个精选项目，深度项目页           │
│  ├── Writing — 长文博客，精编后发布                  │
│  └── Research — 调研产出的公开子集                  │
├─────────────────────────────────────────────────┤
│ Layer 2: 花园层（Garden）                         │
│  ├── Notes — 短笔记，可带成熟度标记                 │
│  ├── Journal — 学习/工作日志                       │
│  └── TIL — "Today I Learned" 碎片                │
└─────────────────────────────────────────────────┘

设计原则：

1. Layer 0 精控：首页是策展空间，不是信息流。每个元素手动挑选
2. Layer 1 精编：内容经过修改打磨后发布，有明确的完成状态
3. Layer 2 开放：允许半成品，但必须标注日期和成熟度
4. 所有内容必须带日期：这是 digital garden 最大的教训

3.3 视觉方向建议

已定方向（深色 + 金/琥珀 + 排版优先 + 零装饰）与调研发现高度一致。在此基础上补充建议：

维度	建议	参考
排版系统	双字体策略：人类内容用衬线体（温暖）、Agent/技术内容用等宽体（冷峻）	已在 Discord session 中提出，与 Finder-Terminal 隐喻一致
内容预览	采用 Gwern 式弹窗预览替代跳转，减少导航成本	gwern.net
旁注系统	对长文使用旁注而非脚注，保持阅读流	gwern.net, Tufte CSS
微交互	链接 hover 有轻微颜色/下划线过渡，传达精细感	paco.me, rauno.me
首页布局	排版驱动的单列布局，不用 Bento Grid	paco.me
项目页	每个项目单独深度页面，可嵌入交互组件（Astro Islands）	shikun.io
暗色模式	作为默认，提供亮色切换	行业标配

3.4 AI Dashboard 维度的建议

短期不建 Dashboard，理由：

1. Facade 是出版层，不是操作台。Dashboard 属于内部工具（Vyane / Yi 的职责）
2. 市场上没有好的个人 AI Dashboard 先例可借鉴
3. 107 个原型还没定，不应扩大范围

可考虑的轻量整合：

• 在首页 “Now” 区域展示当前 AI 使用状态（类似 Lee Robinson 的 dashboard stats）
• 在 Research 区域以档案形式展示调研产出（标题 + 摘要 + 标签）
• 未来如果想做 AI OS 的公开面板，作为独立子域名或页面，不与 Portfolio 混合

---

四、证据质量评估

类别	证据来源	质量
Digital Garden 案例	Maggie Appleton 的系统整理 + GitHub 列表 + 直接站点	高 — 一手来源，交叉验证
Portfolio 案例	多个站点直接访问 + HN/社区讨论	高 — 一手来源
社区反馈	HN 讨论帖、Maxwell Forbes 分析、Elizabeth Tai 批评	中高 — 代表技术社区，不代表普通用户
AI Dashboard	Helicone/Langfuse 文档 + Mission Control GitHub	中 — 产品存在但个人使用场景缺乏验证
设计趋势	多源交叉（Tavily + 设计博客 + 实际站点）	中 — 趋势判断有主观成分

---

五、不确定性

1. 107 个原型的选型标准未知：本报告的建议可能与某些已测方向矛盾，需要对照原型评审
2. Facade 的受众画像未明确：面向"雇主"和面向"AI 社区"的设计取舍会显著不同。前者需要更传统的 Portfolio 形式，后者可以更实验性
3. 内容策略未确定：信息架构依赖于"Maple 实际会发布什么内容"，目前只能基于现有产出（调研报告、项目、笔记）推断
4. AI Dashboard 是否属于 Facade 范畴存疑：调研中未找到个人 AI 使用数据公开展示的先例，可能是因为没有需求而非没有供给
5. 排版系统的中英文兼容：调研案例以英文站点为主，中英混排的排版挑战（衬线体选型、行高、字间距）需要额外验证

---

六、建议后续工作

1. 原型选型对照：将本报告的信息架构和视觉方向建议，与 107 个原型交叉比对，筛选出最匹配的 3-5 个方向
2. 受众画像确认：与 Maple 明确 Facade 的首要受众（雇主 vs AI 社区 vs 通用个人品牌），这会决定 Portfolio/Garden 的比重
3. 内容审计：盘点 Maple 现有可公开的内容资产（调研报告、项目描述、笔记），确认信息架构的各层是否有足够内容支撑
4. 中英排版测试：用已定的设计 token（深色 + 琥珀 + 衬线/等宽双字体）做中英混排的排版样张测试
5. 竞品深度分析：选 2-3 个最接近 Facade 定位的站点（建议 paco.me + gwern.net + shikun.io），做 pixel-level 的设计拆解
6. “Now” 页面设计：这是 indie web 社区推崇但主流 Portfolio 缺失的功能，可能是 Facade 的差异化点

---

报告结束。所有案例和社区讨论来源已在正文中标注。