永恒欲望

「扒站」：把九个顶级设计站搬回家，一次讲完方法论

Fri, 09 Oct 2026 00:00:00 GMT

vibecoding 最大的问题不是模型不会写代码，是你说不出你想要什么。

“高级感”、“留白多一点”、“动效丝滑一点”——这些词丢给 Agent，它只能给你一个 Bootstrap 味的居中标题。它缺的不是能力，是参照物。

所以我干了件更直接的事：把九个顶级设计站，完整搬到本地，能跑，能改，能拆。

这一篇是全过程。不是”我抓了九个站”的炫耀，是方法论和管线——你（或者你的 Agent）照着能原样复刻。

一、先明确一件事：什么叫「完整复刻」#

我要的不是截图拼一个像的，也不是用 AI 重新画一个。

我要的是：

原站的 HTML + CSS + JS + 字体 + 图片 + 数据，全部落到本地，开个服务器就能跑起来，改一行代码就生效。

这样它才叫”参照物”。你可以打开 DevTools，看它的 cubic-bezier(.19,1,.22,1) 到底用在哪；可以把它的 24 条缓动曲线整段抄进自己的项目；可以把它那个 mix-blend-mode: difference 的 logo 拆出来研究。

关键判断：本地化（Localize），而不是重写（Rewrite）。

这是我这次最重要的一个决策。我一开始也想过”读懂它然后重写”——放了。因为：

重写的必然结果是降级。你会漏掉 30% 的细节，而那 30% 正是”高级感”的来源。
本地化是零损耗的。构建产物就是构建产物，它跑起来和原站一模一样。

二、九个目标，四种难度#

先说清战场。九个站，栈完全不同，难度分四档：

#	站	栈	难度	卡点
01	Paolo Vendramini	Nuxt 3 + Strapi	⭐⭐	13 个懒加载 chunk 不在 HTML 里
02	Obys Agency	自研框架	⭐⭐⭐⭐⭐	XOR 混淆资源路径 + 反爬
03	Seventeen	Webflow + GSAP	⭐⭐⭐	`integrity` 哈希 + 死掉的 vendor 脚本
04	Camille Mormal	PHP + 自研	⭐⭐⭐⭐	动态 JSON 取页 + 44 个缺失资源
05	Cipher	Nuxt 3 + Three.js	⭐⭐⭐	Prismic 图片防盗链
06	Pacôme Pertant	Nuxt 3 + Sanity	⭐⭐⭐⭐⭐	Cloudflare 拦截
07	Justine Soulié	Nuxt 3 + Prismic + Three.js	⭐⭐⭐	56 个 `.ktx` WebGL 纹理
08	Siena Film	Webflow	⭐⭐	海报 + 视频批量
09	Stefan Vitasović	Next.js + Three.js	⭐⭐⭐	Vercel 专属路由

九个站，九种打法。 下面拆。

三、管线总览：七个阶段#

1
① 侦察      curl -I / 指纹识别 → 判定栈
2
② 抓壳      HTML + 主 JS/CSS + sourcemap 探测
3
③ 破防      针对性的反爬对抗（XOR / CF / 防盗链）
4
④ 补全      运行时 404 扫描 → 回抓懒加载资源
5
⑤ 本地化    _raw/ → local/，多前缀铺设
6
⑥ 启动      每站独立端口 + 静态服务器
7
⑦ 验收      截图 + DOM + 404 三重校验

每一阶段都有一批工具。工具清单在最后一节，全部可复用。

四、阶段①：侦察——三分钟判定一个站的栈#

拿到一个站，第一件事不是抓，是判断它是什么做的。

Terminal window

1
curl -sSI -L https://target.com/ | head -30

看几样东西：

特征	判定
`x-powered-by: Next.js`	Next.js
HTML 里有 `__NUXT__` / `__NUXT_DATA__`	Nuxt 3
`_next/static/` 路径	Next.js
`_nuxt/` 路径	Nuxt
`data-wf-*` 属性、`webflow.js`	Webflow
`cdn.shopify.com`	Shopify
一堆内联 `<style>` + `data-v-xxx`	Vue 组件（构建后）

九个站的实际判定结果：

1
01 paolovendramini   → Nuxt 3（_nuxt/ 路径）+ Strapi（CMS 数据）+ Cloudflare
2
02 obys              → 自研（原生 JS，无框架特征）
3
03 seventeen         → Webflow（data-wf-page 属性）
4
04 camillemormal     → PHP（自研 d.js，非框架）
5
05 cipher            → Nuxt 3（_nuxt/）+ Netlify + THREE.js
6
06 pacomepertant     → Nuxt 3（_nuxt/）+ Sanity + Plesk + Cloudflare
7
07 justinesoulie     → Nuxt 3 + Prismic + THREE.js
8
08 siena             → Webflow + 自托管 app.js
9
09 stefanvitasovic   → Next.js Pages Router + THREE.js

判断栈为什么重要：它决定了后面所有策略。Nuxt 要抓 _payload.json，Webflow 要处理 integrity，自研站要看它的加载器逻辑。

五、阶段②：抓壳——HTML + JS + sourcemap#

抓首页很简单。sourcemap 才是宝。

Terminal window

1
# 探测 sourcemap 是否存在
2
curl -sSI https://target.com/_nuxt/entry.js.map

03 Seventeen 给了我一个大惊喜——它发布了 9 个官方 sourcemap：

1
GSAP.js.map          ← GSAP 完整源码
2
ScrollTrigger.js.map
3
Draggable.js.map
4
InertiaPlugin.js.map
5
Observer.js.map
6
Plyr.js.map          ← 视频播放器
7
Swiper.js.map
8
Lenis.js.map         ← 平滑滚动
9
CustomEase.js.map

7.4 MB 的原始库源码。 这意味着你可以直接读 GSAP 内部怎么实现 ScrollTrigger。

探测目录走一遍：

栈	探测路径
Nuxt	`/_nuxt/`、`/_payload.json`、`/_nuxt/builds/meta/*.json`
Next.js	`/_next/static/chunks/`、`/_next/static/*/_buildManifest.js`
Webflow	`/js/webflow.js`、`/*.css`
通用	`/sitemap.xml`、`/robots.txt`、`/manifest.json`

robots.txt 经常能给你一个路径地图。先读它，再动手。

六、阶段③：破防——三种反爬，三种破法#

这是全文最有价值的部分。

6.1 XOR 混淆资源路径（02 Obys）#

问题：Obys 的 HTML 里没有任何可读的资源路径。它有三个内联 <script> 标签，把路径用 XOR 加密了。

如果你改 HTML 里的路径——那你就改了原站代码，而且容易漏。

正确做法：不改 HTML，把文件铺到它期望的位置。

1
# build_final.py 核心
2
PREFIX_MAP = {
3
    "d.js":      ["/static/js/d.js", "/js/d.js", "/_nuxt/d.js"],
4
    "app.js":    ["/js/app.js", "/static/js/app.js"],
5
    "d.css":     ["/static/css/d.css", "/css/d.css"],
6
    # ...
7
}
8
# 一个文件，铺到所有可能的路径

“多前缀冗余” —— 一个 d.js 同时存在于 /static/js/、/js/、/_nuxt/。哪个引用形式都能命中。

为什么有效：你不需要知道原站真正的路径结构，你只需要覆盖所有可能性。存储便宜，猜错代价高。

服务器根 = 站点根#

1
# serve_all.py — 每站独立服务器，root 指向 <slug>/local/
2
SITES = [
3
    ("01-paolovendramini", 8101),
4
    ("02-obys",            8102),
5
    # ...
6
]

关键：服务根必须是 local/，这样 /_nuxt/x.js 才能自然解析成 local/_nuxt/x.js。不需要任何路径重写。

九、阶段⑥：两个必踩的坑#

坑 1：SPA 回退把 JSON 吃掉了#

Nuxt / Next 的单页应用需要”找不到路径就返回 index.html”的回退。但如果你对所有 404 都返回 index.html：

1
// JS 请求 /_payload.json，得到的是：
2
"<!DOCTYPE html><html>..."   ← 不是 JSON
3
// 然后 JS 崩在：
4
// SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
5
// 后果：整个页面白屏

修复：只对”页面导航”请求回退，资源请求老实 404。

1
def send_error(self, code, msg=None, explain=None):
2
    p = self.path.split("?")[0]
3
    ext = os.path.splitext(p)[1].lower()
4
    is_asset = ext in (".json", ".js", ".css", ".woff2", ".jpg",
5
                       ".png", ".webp", ".ktx", ".mp4", ...)
6
    idx = os.path.join(self.directory, "index.html")
7
    if code == 404 and not is_asset and os.path.exists(idx):
8
        # 只有页面导航才回退
9
        return self.serve_index()
10
    super().send_error(code, msg, explain)   # 资源老实 404

这一个 bug 让我排查了两轮。 记住它。

坑 2：Webflow 的 `integrity` 哈希#

Webflow 站（03 / 08）的 <link> 带 integrity：

1
<link rel="stylesheet" href="/css/site.css"
2
      integrity="sha384-XyZ..." crossorigin="anonymous">

本地文件内容只要差一个字节，浏览器就拒绝加载整个 CSS。 页面会变成裸 HTML。

修复：删掉 integrity 和 crossorigin。

Terminal window

1
# 03-seventeen 处理
2
sed -i 's/ integrity="sha384-[^"]*"//g' index.html
3
sed -i 's/ crossorigin//g' index.html

坑 2.5：Webflow 的死脚本#

03 还有一个更阴的坑：一个 vendor 追踪脚本返回的是 HTML（58KB 的 <!DOCTYPE html>）。

1
<script src="/haqt6iy0yx2e.../5MuJ4xnYHv..."></script>
2
<!-- 返回 404 页面（HTML）→ SyntaxError → 阻断后面所有 JS -->

一个失效脚本能让你整站 JS 全死。 删掉它。

十、阶段⑦：验收——三重校验#

不要相信”看起来能跑”。 三重校验：

1. 截图#

CDP 在这台机器上会挂（Runtime.evaluate 永不返回）。用原生 Chrome：

Terminal window

1
chrome --headless=new --disable-gpu --no-first-run \
2
  --hide-scrollbars --window-size=1440,900 \
3
  --virtual-time-budget=15000 \
4
  --screenshot=out.png http://127.0.0.1:8101/

2. 推进加载器#

很多站有 preloader，--virtual-time-budget 推不动它。用滚轮事件驱动：

shot-scroll.js

1
for (let y = 0; y < 8; y++) {
2
  await send('Input.dispatchMouseEvent', {
3
    type: 'mouseWheel', deltaY: 700, x: 720, y: 450
4
  });
5
  await sleep(400);
6
}

02 Obys 的效果：截图从 6.9KB → 170KB。 （6.9KB 是纯黑，170KB 是完整作品集。）

3. DOM 校验#

截图小 ≠ 页面坏了。WebGL 站在 headless 里 canvas 不画（没 GPU）。

Terminal window

1
chrome --headless=new --dump-dom http://127.0.0.1:8107/ > dom.html

07 Justine 的验证：

1
canvas: 1 个         ← WebGL canvas 存在
2
请求: 54 个，0 失败

画面没出来，但代码全对。真实浏览器里正常。

三重校验的逻辑：截图看视觉，滚轮推进度，DOM 查结构。 缺一不可。

十一、两个最硬的骨头（完整复盘）#

04 Camille Mormal——从 0% 到 100%#

症状：预加载器卡在 0%，永远不动。

诊断：读它的 d.js，找到这个：

1
R.Fetch({
2
  url: route.new.url + "?webp=" + webp + "&device=" + device,
3
  type: "html",
4
  success: t => {
5
    t = JSON.parse(t);                      // ★ 拿到的是 JSON
6
    this.add(document.body, "afterbegin", t.body);  // ★ 注入 DOM
7
  }
8
})

它的架构是”动态取页”：请求 /?webp=true&device=d，服务器返回一个 JSON（含 {body, cache, routes, data}），再注入 DOM。

破法（三步）：

1
# 1. 抓到原站的 JSON 响应（106,505 bytes）
2
resp = fetch("https://camillemormal.com/?webp=true&device=d")
3
open("local/page.json", "wb").write(resp)
4

5
# 2. 给服务器加特例
6
class H(SimpleHTTPRequestHandler):
7
    def do_GET(self):
8
        if "webp=" in self.path:                    # ★ 拦截这个查询
9
            pj = os.path.join(self.directory, "page.json")
10
            if os.path.exists(pj):
11
                data = open(pj, "rb").read()
12
                self.send_response(200)
13
                self.send_header("Content-Type", "text/html; charset=UTF-8")
14
                self.send_header("Content-Length", str(len(data)))
15
                self.end_headers()
16
                self.wfile.write(data)
17
                return
18
        super().do_GET()
19

20
# 3. 补 44 个缺失资源（25 张 load/N.jpg + 8 作品 × home/hero + favicon）
21
#    结果：45/45 全下

展开收起

验证结果：

1
loadNo: "100%"           ← 加载完成！
2
titles: 8                ← 8 个作品标题全在
3
文本: Independent Designer & Art Director
4
     The Regeneration Suite / Simplicity & Tactility
5
     Reimagining Loyalty / Beyond The Canvas
6
     Sound Expressed In Full / Reinventing Wonder
7
     From Nature To Culture / From Gaggio With Love

从”卡死”到”100%“，靠的是读懂它的加载器逻辑。

06 Pacôme Pertant——穿透 Cloudflare#

症状：所有请求返回 CF 挑战页。

破法（换节点）：

本地有 Clash 代理（127.0.0.1:7897），出口是 Singapore。所有请求走代理，CF 直接放行。

Terminal window

1
curl -sS -x http://127.0.0.1:7897 --compressed \
2
  -A "Mozilla/5.0 ... Chrome/131.0.0.0 Safari/537.36" \
3
  https://pacomepertant.com/

然后：

HTML（57KB）✓
10 个 Nuxt bundle（主包 2.5MB，含 Three.js）✓
_payload.json（Nuxt devalue 格式，含 10 项目 + 35 图引用 + 23 Mux 视频）✓
Sanity 图片 —— 需要 projectId

projectId 的挖掘过程：从 HTML 里正则出 projectId: "u7lvkmbp"。然后：

Terminal window

1
curl -x http://127.0.0.1:7897 \
2
  "https://cdn.sanity.io/images/u7lvkmbp/production/<hash>-1396x786.webp"
3
# → 24,138 bytes 真 JPEG  ✓

35/35 Sanity 图片全下。

最终：零 404。 首屏是黑底白字 motion & sound designer / based in paris。

十二、成果#

01 Paolo Vendramini

02 Obys Agency

03 Seventeen

04 Camille Mormal

05 Cipher

06 Pacôme Pertant

07 Justine Soulié

08 Siena Film

09 Stefan Vitasović

最终交付：

1
D:\Saki\design-lib\
2
├── 2047 文件 / 216 MB
3
├── 9 站 × (index.html + _raw/ + local/ + _recon.md)
4
├── _snippets/          ← 抽出的组件库
5
│   ├── easing/24-easings.css        24 条命名缓动
6
│   ├── grid/grid-tokens.css         栅格断点
7
│   ├── grid/12col-obys.css          视口比例 12 列
8
│   ├── backgrounds/noise-bg.css     CSS 噪点
9
│   ├── text-anim/marquee-arrow.css  跑马灯
10
│   └── transitions/obys-logo-menu-grid.css
11
├── serve_all.py        一键启动（端口 8101–8109）
12
└── START-9站.bat       双击启动

九个站全 HTTP 200，404 清零。

十三、抽出来的东西（真正有价值的部分）#

复刻是手段，抽出来才是目的。

设计 token#

来源	内容
04 Camille	18 条缓动曲线（`--i1..i6` / `--o1..o6` / `--io1..io6`）
09 Stefan	24 条命名缓动 + 栅格 token（`--gutters:5; --cols:4; --indent:1.3888888889vw`）
08 Siena	`--duration` / `--ease` / `--easeOutBack` / `--panels-duration` / `--slider-dur`
02 Obys	12 列视口比例公式 + `mix-blend-mode: difference` logo + lerp
07 Justine	base64 噪点纹理 + 10s 箭头循环

可直接抄的缓动#

1
/* 从 09 Stefan 抽出的 24 条命名缓动的一部分 */
2
--ease-out-expo:    cubic-bezier(0.19, 1, 0.22, 1);
3
--ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1);
4
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
5
--ease-out-back:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
6
/* ... 剩余 20 条在 _snippets/easing/24-easings.css */

这些是”高级感”的物理公式。 你不用再猜为什么别人的动画好看——cubic-bezier(0.19, 1, 0.22, 1) 就是答案。

十四、工具清单（全部可复用）#

38 个脚本，按用途分类：

侦察与抓取#

工具	用途
`net-dump.js`	CDP 抓任意站全部资源 URL
`img-dump2.js`	CDP 抓页面所有请求
`fetch_all.py`	通用抓取（HTML→JS/CSS→sourcemap）
`fetch_images.py`	正则提取图片 URL 并下载
`fetch_webflow_imgs.py`	Webflow 站图片批量
`bulk_dl.py`	批量下载 URL 清单

反爬对抗#

工具	用途
`obys-dump.js`	破解 XOR 混淆（CDP 执行解密器）
`grab-cdp.js`	拦截响应体（绕防盗链/墙）
`grab-sanity.js`	专抓 Sanity CDN
`dl-by-browser.js`	浏览器下载
`one-get.js`	CDP 抓单个 URL（绕证书/reset）

本地化与启动#

工具	用途
`build_final.py`	`_raw` → `local/`（多前缀策略）
`refetch_chunks.py`	补抓懒加载 chunk
`serve_all.py`	9 站服务器（端口 8101–8109）
`START-9站.bat`	一键启动

诊断与验收#

工具	用途
`find_missing.js`	CDP 抓 404 列表（最关键）
`shot-scroll.js`	滚轮推进 + 截图
`shot-skip.js`	跳过 loader 截图
`probe.js`	运行时状态（console/异常）
`probe-camille.js`	深度状态探针
`urls.js`	列出某站所有请求
`verify3.js`	批量截图验收

十五、可复刻的操作清单#

给其他 Agent 的逐步 SOP：

1
1. 侦察
2
   curl -sSI -L <target> | head -30
3
   → 判定栈（Nuxt / Next / Webflow / 自研）
4

5
2. 抓壳
6
   curl -sSL <target> -o index.html --compressed
7
   → 若返回乱码，试 brotli.decompress()
8
   → 探测 .map：curl -sSI <target>/<main>.js.map
9

10
3. 枚举资源
11
   grep -oE '/(_nuxt|_next|static|js|css)/[A-Za-z0-9._-]+' index.html
12
   → 得到资源清单
13

14
4. 破防（按需）
15
   ├─ XOR 混淆 → CDP 执行解密器读 DOM
16
   ├─ Cloudflare → 走代理 + 完整浏览器头 + brotli 解压
17
   └─ 防盗链   → CDP Network.getResponseBody
18

19
5. 铺文件
20
   每个文件铺到所有可能的路径前缀
21
   → _raw/d.js → local/static/js/d.js + local/js/d.js
22

23
6. 起服务
24
   每站独立端口，root = local/
25

26
7. 补全循环
27
   find_missing.js → 抓 404 → 回原站下载 → 铺路径
28
   → 重复到 404 清零
29

30
8. 验收
31
   截图（--screenshot）+ 推进（滚轮）+ 结构（--dump-dom）
32
   → 三重校验
33

34
9. 抽组件
35
   从 CSS/JS 里正则出 easing / grid / color token
36
   → 整理成可复用片段

展开收起

七个必须记住的坑：

SPA 回退会吃掉 JSON → 只对页面导航回退
Webflow integrity 哈希 → 删掉
死掉的 vendor 脚本返回 HTML → 删掉，否则整站 JS 死
curl --compressed 不解 brotli → 手动 brotli.decompress()
CDP 在某些环境会挂 → 用原生 chrome --headless --screenshot
headless WebGL 不画 → 用 --dump-dom 验证结构
预加载器推不动 → 用滚轮事件驱动

十六、合法边界#

这一节必须说清楚。

行为	性质
公开 GET 侦察（无鉴权绕过）	✅ 合法
本地下载代码/资源自用	⚠️ 民法意义上的「复制」，不涉刑
公开发布/部署	❌ 「信息网络传播」
逐字复用代码 / 分发媒体	❌ 侵权
破解付费墙 / 绕过登录	❌ 刑事风险

我的定位：本地自用、研究、学习。不公开部署。

明确不可用的：

Impact 字体（MyFonts 商业授权，“其他方明确禁止使用”）→ 用 Anton / Oswald（OFL）替代
NeueMontreal / ObysSans / ABC Favorit / HelveticaNowDisplay —— 商业字体，不可部署
站内图片、视频 —— 第三方版权

要真部署：替换全部媒体、全部字体、重写文案。

十七、这套东西怎么用#

回到最初的问题：vibecoding 效果垃圾，因为 Agent 缺参照物。

现在你有九个了。

用法一：当审美基准。 让 Agent 改首页之前，先让它读 02 Obys 的 CSS。它看到 cubic-bezier(0.19, 1, 0.22, 1) 和你写”丝滑一点”，是两回事。

用法二：当组件库。 _snippets/ 里已经抽好了缓动、栅格、噪点、跑马灯。直接 import。

用法三：当抄袭对象（合法的抄袭）。 它们的方法可以学——12 列视口比例怎么算、mix-blend-mode: difference 怎么用、Three.js 纹理怎么组织。方法不受版权保护，表达才受。

用法四：当对照。 你让 Agent 写一个瀑布流，它给你一个 jQuery 味的。你打开 08 Siena 的 local/，看真东西怎么写。

九个站，216 MB，零 404，全本地可跑。

工具在 D:\Saki\design-lib\，38 个脚本，全部可复用。

这一篇到此。下一个要扒的站，照上面的 SOP 走。

对照面板#

十个站都跑在本机，一条一条对照着看。

先启动服务（D:\Saki\design-lib\ 下双击 START-9站.bat，或跑 python serve_all.py），jiejoe 在 D:\Saki\projects\jiejoe-original\ 下 npm run dev。

#站点技术栈本地复刻原站

01Paolo VendraminiNuxt 3 + Strapilocalhost ↗原站 ↗

02Obys Agency自研 + XOR 反爬localhost ↗原站 ↗

03SeventeenWebflow + GSAPlocalhost ↗原站 ↗

04Camille MormalPHP + 自研localhost ↗原站 ↗

05CipherNuxt 3 + Three.jslocalhost ↗原站 ↗

06Pacôme PertantNuxt 3 + Sanitylocalhost ↗原站 ↗

07Justine SouliéNuxt 3 + Prismic + Three.jslocalhost ↗原站 ↗

08Siena FilmWebflowlocalhost ↗原站 ↗

09Stefan VitasovićNext.js + Three.jslocalhost ↗原站 ↗

00jiejoeVue 2 + GSAP + Lenislocalhost ↗原站 ↗

本站协议见规矩。

「取图」：把帖子里的图，放到一张桌上

Wed, 16 Sep 2026 00:00:00 GMT

刷到一组好看的图，最烦的是什么？不是找不到，是散落在四个 App 里——有的要进帖子长按，有的要开网页再另存，有的一次只能下一张。我想要的很简单：把链接丢进去，图就整整齐齐摊在一张桌上，想下几张下几张。

于是站上多了一个独立工具页：取图。

下面这块是文章里的活演示（不会真的请求外站）。点一下渠道，走一遍「粘贴 → 提取」，就能大概明白它怎么用。

LIVE DEMO · 不会真的请求外站

把链接丢上来，图会铺到一张桌上。

全部INS抖音小红书微博

帖子 / Reels / 分享口令

网页链接、短链，或 App 分享口令

粘贴示例识别并提取

点「粘贴示例」→「识别并提取」，看图是怎么摊开的。

打开真正的取图页 ↗

它解决什么#

取图支持四条渠道：

Instagram：网页帖、Reels、App 分享口令
抖音：图文笔记、短链、App「复制链接」整段口令
小红书：笔记网页、xhslink、分享口令
微博：正文页、t.cn、App 分享链接

你也可以不选手动选渠道，直接把链接丢进输入框——它会尽量自己识别。抽出来的图可以单选、多选，按「已选 / 全部」下载；本机还能存一份「我的图集」，下次打开再抽一遍（只存在当前浏览器，不上传服务器）。

为什么做成「本地界面」#

一开始我想过：取图是不是该嵌进主页那套侧栏框架里？试过之后发现不对劲——工具页需要整屏专注，侧栏资料卡和时钟只会抢注意力。

所以现在取图是整页跳转的独立界面，跟 TFT 组队器那一类工具页一个思路；文章、更新日志这些阅读向的页面，才继续待在主页框架里。

你怎么用#

打开 /pull/，或导航里的「取图」。
选一个渠道（也可以不选）。
从 App / 网页复制链接或分享口令，贴进去。
点「识别并提取」，等图铺到桌上。
勾选要下的，下载；想留着下次再下，可以存进「我的图集」。

小红书和微博本身网页/App 往往也能存图——取图更适合你想一次收下多张、或打包带走的时候。

一点实话#

公开帖最稳。登录墙、风控、临时短链失效，都会让某次提取空手而归。Instagram 在本机开发时常常要走代理，线上环境也取决于服务器能不能够到对应 CDN。这些坑我写进工具页的提示里了，遇到空结果先换一条公开链接试试。

如果你也经常从社媒「抠图」——欢迎直接用取图。这张书桌是给你的。

「期末数学超级联赛」

Wed, 26 Aug 2026 00:00:00 GMT

期末复习最怕的不是”不会做”，而是不想做。题目再经典，落到”反正还有明天”的念头里，就都白搭了。

所以我想了个办法：把复习变成一场联赛。一共 19 张卷子，49 个人，五个赛制层层嵌套，每人从进赛到终局都有一条自己的积分与晋级线——而你赚的不是单一的分数，而是代币，可以在每阶段的商店里换成真实奖励。

这篇文章不只是在复述规则，我把它当作一个教学系统设计案例来讲。下面先给你能直接上手玩的交互版，再拆开说设计思路。

🎮 想要真正”当一把选手”？直接进联赛模拟器，把 19 卷打完、抽海克斯、看晋级表——点下面按钮体验。

🎮体验联赛模拟器

打开完整互动版 · 建议用电脑端

🏆

期末数学超级联赛

19 卷闭环实战教学手册 · 共 19 卷 · 49 人参赛

赛程总览五种赛制选手名单代币经济海克斯技能

第一赛段第二赛段第三赛段第四赛段

第一赛段 · 白银瑞士轮

A级联赛 · G1 - G5

5 卷

标准 5 轮瑞士轮。每轮两两对决，单张卷数学分数高者得 1 分。累计 3 胜立即提前晋级，但仍继续匹配实力相当对手。第五轮有跨组对调与“以下犯上/炸鱼”分类讨论。

机制设计

防摆烂机制：全程定期反馈家长群，只陈述事实；错误一次下次必会，屡次不订正扣1代币。

激励机制：完成“以下犯上”成就获1代币；团队赛每队MVP获1代币；每小局选“最不可思议”赛果获1代币；瑞士轮完成两次“复仇”获1代币。

防作弊机制：出现作弊行为扣1代币，一视同仁，保留面子但反馈家长且银行自动扣。

为什么是”联赛”而不是”刷题计划”#

一张练习卷做完了，刷题者面对的是一串对错；而一个选手面对的是一个排名、一段赛程、一种可能晋级或降级的命运。差别不是答案，而是动力结构。

联赛把”做得对”这种抽象反馈，置换成了几种具体的东西：

对阵：你每次的成绩会变成”这局你赢了谁 / 输了谁”。
段位：从 48 强瑞士轮一路打到 8 强大师赛，你能看到自己在一个金字塔里的位置。
代币：净胜、小组第一、团队名次……每一样都对应一份可兑换的收益。

也就是说，这个赛制的目的不是”考得更难”，而是让每一种学习行为都有即时的、可累积的回报。越到后面，冲突越精彩，人反而越容易被”还想再打一场”推着往前走。

五种赛制，其实是对”公平”的五种理解#

整个联赛只用了一套题库，却配了五种赛制。这不是为了炫技，而是因为它们各自解决了一个不同的问题。

瑞士轮：胜者打胜者，越到后面对手越接近自己真实水平。它压制”运气”，把强者稳定地往上推。
小组赛：随机分进 A/B/C/D 组单循环。强者也被迫有一个”死亡小组”的变数——它的残酷，恰恰让”晋级”有了戏剧性。
双败淘汰：给一次容错。它能接受高手发挥失常，又确保只有真正扛到最后的人夺冠。
团队赛：把个人题分变四个人的均分。这一制更看运气，也更能照出”愿意为团队复习”和”只想躺平”的人。
个人积分赛：只看总分，最纯粹的一刀切。

这五种轮着来，等于在同一套题目上，用不同的”评价函数”反复衡量每个人——既避免单一赛制偏心，也让整个周期不至于过早定型。

代币经济：把”学习”变成可交易的东西#

规则的骨架是赛制，而让骨架活起来的是代币。它在每个阶段发放，每个阶段结算，也能存到下一阶段。

不同联赛的设计，其实刻意做到了获得机会大致对等：有时更低级的联赛反而能赚更多。这样每个选手，无论实力高低，都有”继续做题”的动机。代币只存在于系统银行里、不能私下交易，但兑换后的奖品可以随意分享——防止的是一套，鼓励的是另一套。

海克斯（Hex）：给战局加一点随机变量#

“海克斯”是我从自走棋那里借来的概念——一种局外技能，在第一、第三赛段开始前抽给每个人。

作用是在确定的赛制上，叠一层玩家可主动选择/被动触发的策略变量。比如”意外之财”直接给代币、“掀桌”能和同分对手换位、“正义报复”赢了就掠夺对手代币。它让”公平的赛制”多了一点”不公平但可博弈”的趣味，也让每个玩家有自己的一张暗牌。

防摆烂、防作弊：规则的另一半#

再好的奖励也有漏洞。所以另一半规则是”兜底”：

防摆烂：全程定期反馈家长群，只陈述事实；错题下次必须会，屡次不订正就扣代币。
防作弊：出现作弊行为扣 1 代币，一视同仁，但不当面点破，由系统银行自动扣。
激励：完成”以下犯上”成就、当上团队 MVP、打出”最不可思议”赛果、瑞士轮完成两次复仇，都能额外拿代币。

这本质上是在说：奖励要够诱人，但偷懒和作假必须明确有代价，而代价由系统执行、不由人执行——这样老师不必当那个”说了算”的人，规则本身在起作用。

最后：规则是手段，不是目的#

这套联赛的初衷，自始至终是”激励各位好好复习，备考期末”。规则只是把”好好复习”这种喊口号的话，变成了一套能被看到、被追到、被奖励的流程。真正重要的是那句写在法典里的话：

不会就是不会，真正踏踏实实地自己花时间搞懂就行。

如果你也想在自己班里试一套类似的机制，不用照搬这个复杂度——抓住”即时反馈 + 可累积回报 + 明确的代价”这三点，就已经能撬动很多原本不想刷题的人了。

星域幻想

Wed, 26 Aug 2026 00:00:00 GMT

旅行者黄壹甄穿过星海、幻象与恶作剧，在荒诞的宇宙旅途中寻找生命、归属与自我的答案。

前往网站阅读完整分章版《星域幻想》

永恒欲望上线了

Wed, 26 Aug 2026 00:00:00 GMT

这是永恒欲望的第一篇。

站点基于 Firefly 搭建，部署在 Vercel，域名是 stulanez.com。现在还很空，之后会把想留下的东西慢慢写进来。

如果页面哪里看起来还像演示站，告诉我就行，我们继续改。

永恒欲望

「扒站」：把九个顶级设计站搬回家，一次讲完方法论

一、先明确一件事：什么叫「完整复刻」#

二、九个目标，四种难度#

三、管线总览：七个阶段#

四、阶段①：侦察——三分钟判定一个站的栈#

五、阶段②：抓壳——HTML + JS + sourcemap#

六、阶段③：破防——三种反爬，三种破法#

6.1 XOR 混淆资源路径（02 Obys）#

服务器根 = 站点根#

九、阶段⑥：两个必踩的坑#

坑 1：SPA 回退把 JSON 吃掉了#

坑 2：Webflow 的 integrity 哈希#

坑 2.5：Webflow 的死脚本#

十、阶段⑦：验收——三重校验#

1. 截图#

2. 推进加载器#

3. DOM 校验#

十一、两个最硬的骨头（完整复盘）#

04 Camille Mormal——从 0% 到 100%#

06 Pacôme Pertant——穿透 Cloudflare#

十二、成果#

十三、抽出来的东西（真正有价值的部分）#

设计 token#

可直接抄的缓动#

十四、工具清单（全部可复用）#

侦察与抓取#

反爬对抗#

本地化与启动#

诊断与验收#

十五、可复刻的操作清单#

十六、合法边界#

十七、这套东西怎么用#

对照面板#

「取图」：把帖子里的图，放到一张桌上

它解决什么#

为什么做成「本地界面」#

你怎么用#

一点实话#

「期末数学超级联赛」

期末数学超级联赛

为什么是”联赛”而不是”刷题计划”#

五种赛制，其实是对”公平”的五种理解#

代币经济：把”学习”变成可交易的东西#

海克斯（Hex）：给战局加一点随机变量#

防摆烂、防作弊：规则的另一半#

最后：规则是手段，不是目的#

星域幻想

永恒欲望上线了

坑 2：Webflow 的 `integrity` 哈希#