wait4x/blog

0 Fork 0

Files

T

wait4xandGLM-5.3 0fbb023375 docs: 落库博客重设计调研报告 v1.8 与视觉样板 v2

调研收官产物入库：主报告（架构 C''=Astro SSG+gitea 双写作流、
Artalk 评论、分片 webfont、双语预译管线、多端适配规格、
Phase 0-5 实施规划）+ 五份侦察原稿 + 可交互单文件样板
（三路线×明暗×五页型，命令面板/终端/热力图/masonry）。

Co-authored-by: GLM-5.3

2026-10-24 21:48:11 +08:00

18 KiB

Raw Blame History

获奖创意个人站设计手法侦察报告

侦察员：@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-3 套非默认字体（等宽/手写/衬线混搭），字号对比大胆，但正文列宽都很克制（如 jules 的 max-w-2xl）
统一的动效语言：动效数量不重要，全站一致的一支缓动曲线 + 统一时长才显高级（lookback 全站 0.35s + expo 曲线）
强约束配色：黑/白底 + 单强调色（琥珀/粉/桃/橙），最多加 2-3 个章节功能色
微交互密度 > 大特效密度：hover、光标、marquee、噪点、页面转场——小而全站一致
文字本身就是获奖武器：Spatzek 的戒律、Cassie 的告别信、Belleza 的年代叙事——好文案不要钱
创意站寿命很短：4 个指定站 2 个已死（主动退役 / 域名被赌博站劫持）+ 1 个宕机；获奖 ≠ 长寿

6.2 「降维」可用清单（文字长文博客，按性价比排序）

Tier 1 —— 纯 CSS/几十行 JS，1-2 天可落地

阅读进度条 + 章节 sticky 小标题（AI Report 章节导航的降维）
全站统一微交互：链接下划线动画、卡片 hover 抬升，只用一支缓动曲线、一个时长（0.35s + easeOutExpo）
CSS marquee"最近更新"横条（lookback 方案：animation: marquee 20s linear infinite + .is-paused 暂停）
noise 纸纹噪点覆盖层（@keyframes noise{…steps(2)}，给书评区加"纸质颗粒"，近零成本）
单强调色系统 + 虚线边框批注框（jules 桃色 + 虚线 = 书评"批注"的现成视觉语言）
暗色终端风代码块/输出块（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 坑清单（明确不要做）

3D 世界 / 全屏 WebGL（bruno 路线）：数月开发、几十 MB 加载、移动端发热、SEO 零收益；读者意图是"读"，多一步都是流失——明确判定：3D 不适合本博客
纯客户端渲染壳（spatzek 现状）：书评站吃搜索流量，必须静态生成/SSR + 服务端可抓取的全文
多套并行界面（pedro 全量版）：维护成本指数级、交互一致性灾难
逐字母大字标 / 竖排标题：中文长文可读性杀手（spatzek 自己都把 vertical 列为戒律）
Framer/重建站工具绑定：内容要活十年，工具必须可导出可控
自动播放视频 / 巨图 hero：LCP 杀手，直接毁 Core Web Vitals
动效的可访问性税：所有动效包 prefers-reduced-motion；marquee/noise 必须可暂停（光敏与注意力障碍）
中文字体陷阱：获奖站 3-4 套展示字体的玩法在中文不成立（webfont 动辄 MB 级）——中文字族最多两套（如思源宋/黑做子集化），展示字体用拉丁字体只作用于数字/英文
基建寿命：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 官方目录锁定，权威性反而更高

18 KiB Raw Blame History Unescape Escape

获奖创意个人站设计手法侦察报告

0. 方法与真实性声明（先说清楚哪些是实测、哪些抓不到）

1. cassie.codes（Cassie Evans，GSAP 团队）——已退役的"终端告别卡"

实测现状

布局与视觉冲击点

动效技术（实测内联代码）

配色与排版

对长文博客的可迁移 / 不可迁移

2. bruno-simon.com（"Bruno's"）——3D 游戏即简历的天花板

布局与视觉冲击点

动效技术（实测信号）

配色与排版

对长文博客的可迁移 / 不可迁移

3. danielspatzek.com（Portfolio IV "dnlsptzkIV"）——滚动叙事 + 人设文案的教科书

实测技术栈

布局与视觉冲击点

荣誉（页面自述）

配色与排版

对长文博客的可迁移 / 不可迁移

4. julesforrest.com（Jules Forrest）——⚠ 原站已死，以下基于 Wayback 2022-05-24 快照

现状警告（实测）

原站布局与视觉（快照实测）

配色与排版（快照 CSS/类名实测）

对长文博客的可迁移 / 不可迁移

5. 补充：2026 年 Awwwards 最新获奖个人站（2-3 个，真实检索）

5.1 Pedro Belleza's personal website — Honorable Mention（2026-07-23）

5.2 The Lookback — SOTD + Developer Award（2026-03-27，评分 7.45）

5.3 AI in Design Report 2026 — SOTD + Developer Award（2026-08-26）

6. 汇总

6.1 获奖站共性（基于以上 7 站实测）

6.2 「降维」可用清单（文字长文博客，按性价比排序）

6.3 坑清单（明确不要做）

7. 抓取凭证与残留风险

18 KiB

Raw Blame History