docs: 落库博客重设计调研报告 v1.8 与视觉样板 v2
调研收官产物入库：主报告（架构 C''=Astro SSG+gitea 双写作流、 Artalk 评论、分片 webfont、双语预译管线、多端适配规格、 Phase 0-5 实施规划）+ 五份侦察原稿 + 可交互单文件样板 （三路线×明暗×五页型，命令面板/终端/热力图/masonry）。 Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed
commit
0fbb023375
8 files changed
+2404
No files matched your search
@@ -0,0 +1,202 @@
|
||||
# 获奖创意个人站设计手法侦察报告
|
||||
|
||||
> 侦察员：@agent-6f4929 ｜ 抓取时间：2026-10-24 ｜ 为博客重设计调研组提供
|
||||
> 目标博客定位：中文文学书评 + Linux 技术长文，以长文阅读为核心
|
||||
|
||||
---
|
||||
|
||||
## 0. 方法与真实性声明（先说清楚哪些是实测、哪些抓不到）
|
||||
|
||||
**抓取手段**：本子代理无 `web_search` 工具，替代方案 = `curl` 直接拉 HTML/CSS/静态资产（失败走本机 7897 代理）+ `r.jina.ai` 渲染 JS 重页面 + Wayback Machine 历史快照 + Bing 搜索 + **Awwwards 官方目录页**（`awwwards.com/websites/personal-blog/`，经 jina 抓取成功）。
|
||||
|
||||
**诚实声明（4 个指定站里 2 个已"死亡"）**：
|
||||
|
||||
| 站点 | 实时抓取状态 | 处理方式 |
|
||||
|---|---|---|
|
||||
| cassie.codes | ✅ 200，但站主已主动退役，现为一页告别卡 | 按现状实测分析 |
|
||||
| bruno-simon.com | ✅ 200，正常 | 实测分析 |
|
||||
| danielspatzek.com | ✅ 200，Nuxt CSR 壳，经 jina 渲染出全文 | 实测分析 |
|
||||
| julesforrest.com | ⚠ **HTTPS 证书自签（ERR_CERT_AUTHORITY_INVALID）；HTTP 200 返回的是"天津开云集团"中文企业垃圾站（页脚挂赌博友链）——域名已易主，原站已死** | 改用 Wayback 2022-05-24 快照分析原站 |
|
||||
| pedrobelleza.com（补充） | ⚠ 实时 HTTP 522（源站宕机） | 改用 Wayback 2026-07-17 快照 + Awwwards 官方页 |
|
||||
| tlb.betteroff.studio（补充） | ✅ 200（876KB SSR HTML） | 实测分析 |
|
||||
| stateofaidesign.com（补充） | ✅ 200（1.5MB HTML） | 实测分析 |
|
||||
|
||||
---
|
||||
|
||||
## 1. cassie.codes（Cassie Evans，GSAP 团队）——已退役的"终端告别卡"
|
||||
|
||||
### 实测现状
|
||||
站点已 `noindex`，正文是她本人告别信：*"It was a joy to maintain a personal site… It feels different now and it no longer nourishes me. I'll be hanging out offline, painting, reading…"*（2026-10-24 抓取原文）。
|
||||
|
||||
### 布局与视觉冲击点
|
||||
- 纯黑背景（`html{background-color:black}`）+ 全屏 overflow:hidden
|
||||
- 居中一张 **终端风卡片**：`rgba(8,8,8,0.92)` 底、`#2a2a2a` 细边框、`Courier New` 等宽字体、0.8rem 小字号
|
||||
- 链接带 **`> ` 终端提示符前缀**，颜色为暖琥珀 `rgb(255,223,167)`，hover 变 `rgb(221,175,153)`
|
||||
- 背景一层 `.flowers` 容器装全屏 canvas
|
||||
|
||||
### 动效技术（实测内联代码）
|
||||
- `<head>` 内联 **28KB Three.js 模块**（`THREE`×42 处、`WebGLRenderer`）：把 `flowers.jpg` 变成可交互的 WebGL 画布，参数面板暴露 `interaction_mode: 'Point: Directional Stretch'`、`tool_size/tool_strength/tool_falloff`、`warp_strength/warp_frequency`、`smear`、`chromatic_aberration` 等——即**"图像涂抹/拉伸"玩具**：手指/鼠标在花照片上拖出液态变形
|
||||
- canvas `opacity:0` + `transition: opacity 3s ease-out` 缓慢淡入，无滚动动效
|
||||
|
||||
### 配色与排版
|
||||
黑底 + 等宽字 + 终端隐喻 + 单一暖色强调。极简到只有一屏。
|
||||
|
||||
### 对长文博客的可迁移 / 不可迁移
|
||||
- ✅ **可迁移**：终端/等宽美学与 Linux 技术长文天然契合（代码块、输出块用黑底等宽 + `>` 前缀几乎是现成方案）；"一屏小卡片 + 暖色链接"的克制感；把一张图做成可涂抹 canvas 小玩具（hero 彩蛋，几十行代码级别）
|
||||
- ❌ **不可迁移**：WebGL 涂抹玩具对"读字"零帮助；更要紧的是**这个站本身就是反面教材的正面示范**——连顶级动效工程师都选择把重维护的个人站退役，说明重互动站 maintenance 成本极高
|
||||
- 📌 背景注（非本次抓取，仅历史口碑）：她 2021-2023 年的旧版以手绘涂鸦风 + GSAP SVG 描边动画闻名，已无法抓取验证
|
||||
|
||||
---
|
||||
|
||||
## 2. bruno-simon.com（"Bruno's"）——3D 游戏即简历的天花板
|
||||
|
||||
### 布局与视觉冲击点
|
||||
- **整个网站就是一辆可以开的 3D 小车**：世界数据为大型 GLB 模型（实测资产 `respawnsReferences-compressed.glb`）+ KTX 压缩纹理（`stars.ktx`、`palette.ktx`、`intro/sound.ktx`）
|
||||
- 2D SVG HUD 叠层：`ui/map.svg`（小地图）、`home/gear/close/gamepad` 图标——3D 世界之上盖一层扁平 UI
|
||||
- title 就一个词 "Bruno's"；description "Bruno Simon's creative portfolio"
|
||||
|
||||
### 动效技术（实测信号）
|
||||
- Three.js + **Rapier 物理引擎**（HTML/资产中 `rapier`、`physics` 信号），全部逻辑打包进单个 `assets/index-ORr3L4no.js` bundle
|
||||
- **手柄支持**（gamepad UI 图标 + controls 目录）、"respawn"重生系统（`respawns/` 目录）、GTM 统计
|
||||
|
||||
### 配色与排版
|
||||
- Google Fonts：**Amatic SC**（手写铅笔感标题）+ **Nunito**（圆润正文，400/700/900）
|
||||
- 主色 `#ffceca` 粉白暖调——玩具感、卡通、圆润
|
||||
- 📌 背景注（非本次抓取）：上一版（开保时捷车那版）是 Awwwards 年度站级名作，现版为其精神续作
|
||||
|
||||
### 对长文博客的可迁移 / 不可迁移
|
||||
- ✅ 可迁移：**手写感展示字体做个人品牌点缀**（书评站可用手写体只作用于 Logo/引语，绝不进正文）；"游戏化彩蛋页"做记忆点（如 `/terminal` 彩蛋终端）；SVG HUD 思路 → 固定角落的返回顶部/目录按钮
|
||||
- ❌ **不可迁移（明确不推荐 3D）**：几十 MB 加载、数月开发、移动端发热、SEO 零收益；读者带着"来读长文"的意图，任何"先开车再进门"都是流失；且 3D 场景与 three.js 大版本升级强绑定，维护是持续税。**结论：这是"看一次 wow"的站，不是"每天来读"的站，方向性不适配文字博客**
|
||||
|
||||
---
|
||||
|
||||
## 3. danielspatzek.com（Portfolio IV "dnlsptzkIV"）——滚动叙事 + 人设文案的教科书
|
||||
|
||||
### 实测技术栈
|
||||
- Nuxt.js **纯客户端渲染壳**（HTML 仅 4KB，`window.__NUXT__={...serverRendered:!1}`，SEO 弱）+ **Storyblok CMS**（图片走 `img2.storyblok.com`）——其 FAQ 自述："Many of my websites were one man projects built with Nuxt.js + Storyblok CMS"
|
||||
- 三套自托管字体预加载：**dnlsptzk.woff2（自制字标字体）** + Suisse Int'l（瑞士无衬线）+ SangBleu OG Serif（衬线）
|
||||
|
||||
### 布局与视觉冲击点
|
||||
- 整站铺在一幅 **2560px 宽的老彼得·勃鲁盖尔名画**上，画上被刻意"涂鸦"（资产名就叫 `bruegeltzek.jpg`）
|
||||
- 自嘲戒律跑马灯贯穿全站（原文节选）：*"Thou shalt not use effects for no reason. Thou shalt keep it clean and simple. Thou shalt not write vertical. Thou shalt not choose UI over UX…"*
|
||||
- 章节式滚动长页：自我介绍 → 60 个 Vimeo 过程视频（Video 41-59）→ Selected Works 2016-2022（Bugatti/Viita/六缸伏特加/Degenesis…每个项目 NEXT/PREVIOUS/CLOSE 全屏切换）→ Awards → 6 步流程 → 对话体 FAQ → 底部 3D 香蕉跑马灯 + *"Don't scroll further down - it only gets worse."*
|
||||
- **隐藏章节**（键盘可达的彩蛋，FAQ 里自嘲"大概是最重要的部分"）
|
||||
|
||||
### 荣誉（页面自述）
|
||||
Awwwards：1× Site of the Month、19× Site of the Day、13× Developer Award、12× Mobile Excellence；CSS Design Awards：4× Designer of the Year；FWA：8× FWA of the Day。
|
||||
|
||||
### 配色与排版
|
||||
名画暖棕油画底 × 现代瑞士排版的大字号对比；他自己把"竖排文字"列为戒律之一（反讽业内套路）。
|
||||
|
||||
### 对长文博客的可迁移 / 不可迁移
|
||||
- ✅ **可迁移（他真正获奖的是"叙事人格"而非技术）**：
|
||||
- **有性格的文案**：把"关于我"写成对话体 FAQ、加自嘲戒律——书评博客完全可以有"毒舌书评人设"
|
||||
- 隐藏章节彩蛋（彩蛋 = 记忆点 + 最低成本）
|
||||
- CSS 原生 marquee 做"最近更新"横条
|
||||
- "过程视频"思路降维 = **"文章背后的草稿/批注"栏目**（书评晒原书划线、技术文晒 debug 过程）
|
||||
- ❌ 不可迁移：名画底图+涂鸦对阅读是持续干扰；**CSR 空壳首屏（书评站吃搜索流量，必须 SSG/SSR，绝不能学）**；60 个视频的内容维护量
|
||||
|
||||
---
|
||||
|
||||
## 4. julesforrest.com（Jules Forrest）——⚠ 原站已死，以下基于 Wayback 2022-05-24 快照
|
||||
|
||||
### 现状警告（实测）
|
||||
HTTPS 证书为自签（浏览器直接报错）；HTTP 返回的是与本人无关的"开云集团"中文国企站，页脚塞满赌博友链——**域名过期后被抢注做 SEO 垃圾站**。
|
||||
|
||||
### 原站布局与视觉（快照实测）
|
||||
- **Gatsby + Netlify** 静态站（`page-data.json`、cloudfront bundle），Tailwind 风原子类
|
||||
- 结构：个人简历式单页——自我介绍 → Credit Karma 设计系统负责人经历 → Women Who Design 项目（开源目录站）→ 演讲/奖项/报道列表（`grid col-2 / col-3 / col-5`）→ 22 处 SVG 内联图标
|
||||
- **零重型动效**：无 canvas/three/gsap 任何信号；他还有 `css-grid-experiments/` 实验页和 CSS variables 技术笔记——**排版本身就是全部设计**
|
||||
|
||||
### 配色与排版（快照 CSS/类名实测）
|
||||
- 白底黑字 + **桃色（text-peach）单一强调色** + 绿色（bg-green）头部色块
|
||||
- **虚线边框（border-dashed）**、rounded-sm 小圆角、font-display 大标题、max-w-2xl 阅读列宽
|
||||
|
||||
### 对长文博客的可迁移 / 不可迁移
|
||||
- ✅ **★★★ 全场最值得文字博客抄的一站**：内容优先、排版即设计；单强调色只给链接/标签；**虚线边框做"批注/手记"框（与文学书评的评注气质绝配）**；grid 卡片做书评索引页；SVG 内联小图标不引图标库
|
||||
- ❌ 不可迁移：几乎没有动效层面的坑；唯一教训是**基建寿命**——好站也会死于域名没续费。给用户博客的行动项：域名自动续费 + HTTPS 自动化 + 内容定期导出留档
|
||||
|
||||
---
|
||||
|
||||
## 5. 补充：2026 年 Awwwards 最新获奖个人站（2-3 个，真实检索）
|
||||
|
||||
检索路径：`awwwards.com/websites/personal-blog/` 分类页（jina 抓取成功，2025-11 至 2026-09 条目齐全）→ 选出 2026 年个人站获奖者 → 官方站点页拿外链 → 抓真身。
|
||||
|
||||
### 5.1 Pedro Belleza's personal website — Honorable Mention（2026-07-23）
|
||||
- **pedrobelleza.com**（实测当前 522 宕机，用 2026-07-17 快照）
|
||||
- **概念**（Awwwards 官方页原文）：*"A personal website disguised as a time machine, imagining the web from 1986 to 2046 through past aesthetics, present culture, and future interfaces."* ——把个人站做成**网页史时间机器**：1986/1996/2006/2016/2026/2036/2046 七个年代各一套"当年代美学"界面
|
||||
- **技术**（快照实测）：Next.js + React（76 处 react / 23 处 next 信号）+ 大量 canvas（56 处）+ three（5 处）——每个年代是一个 canvas 场景
|
||||
- ✅ 可迁移：**"纪元/皮肤"叙事降维**——默认阅读主题不变，做一个 90s GeoCities 风或终端风彩蛋皮肤（学习他"用界面年代感讲故事"）；个人页做时间线
|
||||
- ❌ 不可迁移：多套并行整站界面 = N 倍维护 + 交互一致性灾难；对持续更新的博客不现实
|
||||
|
||||
### 5.2 The Lookback — SOTD + Developer Award（2026-03-27，评分 7.45）
|
||||
- **tlb.betteroff.studio**（Better Off® 工作室的"数字时间胶囊"，官方描述：*"Digital capsule… to document what inspired them and what they created"*）
|
||||
- **布局**：Timeline（月度档案：Inspire/Showcase 封面流）+ Surf + Index（全量索引）+ About；巨大逐字母竖排字标
|
||||
- **动效技术**（CSS 实测）：`@keyframes marquee`（20s linear infinite，`.is-paused` 可暂停）、**`@keyframes noise`（1s steps(2) infinite 的电视雪花噪点）**、页面 slide 转场用 `cubic-bezier(.19,1,.22,1)`（easeOutExpo 系）、菜单 0.35s 线性颜色过渡、15 处 cursor 信号（自定义光标）
|
||||
- **技术栈**：Nuxt 3 SSR + DatoCMS + `/_payload.json` 增量加载
|
||||
- **配色**：灰 `#bebebe` 系 × 黑白 + 粉 `#facac8`/`#d98d91`
|
||||
- ✅ 可迁移：**marquee（CSS 原生 + 可暂停，做"最近更新"条）**；**噪点/纸纹覆盖层（一个 keyframes 给文学书评加"纸质颗粒感"，性能近零）**；全站统一一支缓动曲线 + 统一时长；月度档案 + Index 的内容组织
|
||||
- ❌ 不可迁移：逐字母大字标（中文长文场景是"读进去"不是"被镇住"）；封面视频流带宽
|
||||
|
||||
### 5.3 AI in Design Report 2026 — SOTD + Developer Award（2026-08-26）
|
||||
- **stateofaidesign.com**（Designer Fund × Foundation Capital 年度报告；案例含 Sierra/Linear/Shopify/Stripe/Anthropic/Notion/Framer）
|
||||
- **布局**：章节化长报告（**Tools 01 / Craft 02 / Teams 03**）+ "Read the Report" + "Scroll to read" + **Editorial Chart（编辑风图表）** + 案例全屏卡
|
||||
- **技术**（实测）：**整站 Framer 构建**（HTML 内 18000+ framer 信号、`data-framer`×3276、`--frame` 动画变量×5202、appear 入场动画×32、scroll- 触发×21、sticky×5）；字体 **Fragment Mono + Geist Mono + Inter**（等宽×无衬线的编辑-科技混搭）；webm 视频
|
||||
- **配色**：黑底（#000×103 处）+ 主橙 `#fe7141` + 分章功能色（sage `#d1ddd3` / acid 黄 `#f0ff1c` / lilac `#cdabfe`）
|
||||
- ✅ 可迁移：**章节化长文结构**（01/02/03 章节导航 + 每章一个功能色）——Linux 系列长文连载直接可用；等宽字体做数据/标签/图表标注；"编辑风图表"用 SVG/CSS 手绘而非截图；黑底长报告证明暗色主题下读长文可行
|
||||
- ❌ 不可迁移：**Framer 全家桶**（月费绑定、代码不可导出、深层页 SEO 弱——博客要活十年，工具必须可迁移）；webm 头图视频（LCP 杀手）
|
||||
|
||||
---
|
||||
|
||||
## 6. 汇总
|
||||
|
||||
### 6.1 获奖站共性（基于以上 7 站实测）
|
||||
1. **一个"一眼记住"的核心概念**（开车简历 / 名画涂鸦 / 时间机器 / 时间胶囊 / 年度报告），技术全部为概念服务——没有一个是"堆特效"
|
||||
2. **排版即品牌**：每站 1-3 套非默认字体（等宽/手写/衬线混搭），字号对比大胆，但正文列宽都很克制（如 jules 的 max-w-2xl）
|
||||
3. **统一的动效语言**：动效数量不重要，**全站一致的一支缓动曲线 + 统一时长**才显高级（lookback 全站 0.35s + expo 曲线）
|
||||
4. **强约束配色**：黑/白底 + 单强调色（琥珀/粉/桃/橙），最多加 2-3 个章节功能色
|
||||
5. **微交互密度 > 大特效密度**：hover、光标、marquee、噪点、页面转场——小而全站一致
|
||||
6. **文字本身就是获奖武器**：Spatzek 的戒律、Cassie 的告别信、Belleza 的年代叙事——好文案不要钱
|
||||
7. **创意站寿命很短**：4 个指定站 2 个已死（主动退役 / 域名被赌博站劫持）+ 1 个宕机；获奖 ≠ 长寿
|
||||
|
||||
### 6.2 「降维」可用清单（文字长文博客，按性价比排序）
|
||||
|
||||
**Tier 1 —— 纯 CSS/几十行 JS，1-2 天可落地**
|
||||
1. 阅读进度条 + 章节 sticky 小标题（AI Report 章节导航的降维）
|
||||
2. 全站统一微交互：链接下划线动画、卡片 hover 抬升，**只用一支缓动曲线、一个时长**（0.35s + easeOutExpo）
|
||||
3. CSS marquee"最近更新"横条（lookback 方案：`animation: marquee 20s linear infinite` + `.is-paused` 暂停）
|
||||
4. noise 纸纹噪点覆盖层（`@keyframes noise{…steps(2)}`，给书评区加"纸质颗粒"，近零成本）
|
||||
5. 单强调色系统 + **虚线边框批注框**（jules 桃色 + 虚线 = 书评"批注"的现成视觉语言）
|
||||
6. 暗色终端风代码块/输出块（cassie 的黑底等宽 + `>` 前缀，直接服务 Linux 长文）
|
||||
|
||||
**Tier 2 —— 少量 JS / View Transitions，约一周**
|
||||
7. 文章↔列表页转场（lookback 的 slide + 统一曲线；现代浏览器可用 CSS View Transitions API，降级无副作用）
|
||||
8. 文章内 scroll-driven 渐显插图（CSS scroll-timeline，渐进增强，不支持则静止）
|
||||
9. 书评索引页（lookback Index 思路：全量网格 + 年代/分类筛选）+ 一套 90s/终端彩蛋皮肤（pedro 降维：默认主题永远是阅读优先）
|
||||
|
||||
**Tier 3 —— 谨慎、可砍**
|
||||
10. 自定义光标（lookback 有 15 处 cursor 信号）——**文字站正文光标必须是标准 text/I-beam**，最多在标题/封面区玩
|
||||
11. hero 区一个 canvas 小玩具（cassie 花房降维：一张可涂抹的书封/封面图，做好 `prefers-reduced-motion` 与移动端降级）
|
||||
|
||||
### 6.3 坑清单（明确不要做）
|
||||
1. **3D 世界 / 全屏 WebGL（bruno 路线）**：数月开发、几十 MB 加载、移动端发热、SEO 零收益；读者意图是"读"，多一步都是流失——**明确判定：3D 不适合本博客**
|
||||
2. **纯客户端渲染壳（spatzek 现状）**：书评站吃搜索流量，必须静态生成/SSR + 服务端可抓取的全文
|
||||
3. **多套并行界面（pedro 全量版）**：维护成本指数级、交互一致性灾难
|
||||
4. **逐字母大字标 / 竖排标题**：中文长文可读性杀手（spatzek 自己都把 vertical 列为戒律）
|
||||
5. **Framer/重建站工具绑定**：内容要活十年，工具必须可导出可控
|
||||
6. **自动播放视频 / 巨图 hero**：LCP 杀手，直接毁 Core Web Vitals
|
||||
7. **动效的可访问性税**：所有动效包 `prefers-reduced-motion`；marquee/noise 必须可暂停（光敏与注意力障碍）
|
||||
8. **中文字体陷阱**：获奖站 3-4 套展示字体的玩法在中文不成立（webfont 动辄 MB 级）——中文字族最多两套（如思源宋/黑做子集化），展示字体用拉丁字体只作用于数字/英文
|
||||
9. **基建寿命**：cassie 主动退役、jules 域名被赌博站劫持——**域名自动续费、HTTPS 自动化、内容定期导出，比任何特效都重要**
|
||||
|
||||
---
|
||||
|
||||
## 7. 抓取凭证与残留风险
|
||||
|
||||
**实测凭证**（均 2026-10-24 抓取，留存于 `/tmp/recon/`）：cassie.html（39KB，内联 Three.js 模块）、bruno.html（58KB，GLB/KTX/rapier 信号）、danielspatzek.com 经 jina 渲染全文（含 Awards 自述与 FAQ）、julesforrest.com 现状（自签证书 + 劫持站）+ Wayback 2022-05-24 快照（Gatsby/peach/dashed 类名）、awwwards personal-blog 分类页 jina 抓取（2026 年 SOTD/HM 全名单）、pedro 2026-07-17 快照（Next.js/canvas 信号）、tlb.betteroff.studio HTML + default.css（marquee/noise keyframes）、stateofaidesign.com HTML（Framer 信号/字体/配色）。
|
||||
|
||||
**残留风险**：
|
||||
- 视觉实况（动效手感、3D 交互、光标样式）无法用 curl 验证，技术判断基于 HTML/CSS/资产信号与官方描述，各节已标注"实测"vs"背景知识（历史口碑）"
|
||||
- bruno/cassie 的打包 JS 未逐字节反编译，栈判断基于资产与内联代码信号（置信度高：GLB/KTX/Rapier/THREE 关键字直接命中）
|
||||
- pedrobelleza.com 抓取时宕机（522），恢复后可复核
|
||||
- Bing/DDG 搜索质量差（DDG 反爬 challenge），补充站改由 Awwwards 官方目录锁定，权威性反而更高
|
||||
Reference in new issue
Block a user