做网站的方法

数值

/* card 画廊 Cover Flow（gallery.js 按舞台尺寸算） */
正中一张：rotate 0，最大最近（宽 .50H）
两侧：rotateY ±60° 后退、等距重叠（宽 .44H），越远越暗到 .45
透视2.2H、透视原点正中；切换380ms 苹果 ease，减弱动效直接切

用在哪

card画廊的选卡台（替代转盘、球两档）；中间卡上下留白对称、倒影住在下边距里，见总览留白对称那条。

为什么

你正对着看的那一张是注意力所在，它歪一点就整个不对劲；球形排布让每张都带着曲面的倾角，正中那张也不例外。Cover Flow把「歪」全留给两侧让位的卡，正中永远端正。按card当时球档几何画的球和Cover Flow并排在否掉的方向「球形选卡」，两边都能拖。

三版

1. 实心双开门：门板是色块色（昼橄榄 / 夜青黛）＋把手＋中缝发丝线；合门0.45s藏住路由加载，开门0.75s透视外摆。被否。
2. 纸色格心门：纸色门板＋双圈发丝线格心＋黄铜圆钮。被否。
3. 洇一层纸：纸色水痕带颜料边从中央洇开、纸下切路由、水干褪去；只动scale与opacity，走合成器。定稿。

为什么

门是新造的物件：它要自己的材质、把手、开合逻辑，站里别处都没有它；水彩洇纸是小屋本来就在说的话（画是水彩、底是纸），转场只是把这句话说一遍。以后加任何「过场」，先问它借的是不是这个站自己的东西。两扇门按当时提交里的原值重演在否掉的方向「换房间的门」。

用在哪

小屋换页（page-veil.tsx与xw-veil样式）。工具类的切页是另一种语言：正文淡入上移8px、侧栏不动，见动画章「切页进场」。

用在哪

小屋工具架的3D文具：刷刷五张闪卡正面、岗岗封面和八个纸面（按a–d四张循环；没有背面、书脊的就用素纸 / 素橄榄），海报也按画稿重渲。

为什么

「少」是画的一部分：手作气质靠的就是这点不满。拿「看起来没画完」当理由去补色、补细节，或者换成生成的满图，等于把屋主自己那只手从站上拿掉。拿不准是不是占位，问一句，别替他补。

清单

• 结构：页脚（版权、备案号、社交图标、回到顶部、Powered by）、/about、面包屑、侧边目录、分页器、搜索框、标签云、分类导航。
• 内容：自我介绍、简历、技能条、经历时间线；联系方式（邮箱、GitHub、微信……）；版权与备案展示；门厅上的项目 / 随笔预览列表；工具卡上的外链按钮。
• 功能：评论、点赞、收藏、订阅、RSS、分享；注册、会员；访问统计（页面上看得见的访问量、阅读数这类计数）、看板、广告、弹窗、Cookie同意条。

为什么

陌生访客30秒内知道这是谁的地方，且不被要求做任何事。每多一件「常见网站都有」的东西，名片就更像一份简历或一个门户。清单的用处是让人不用每次重新论证——「顺手补上」是最常见的走样。

本站例外

设计合集是工具，不是名片：有搜索、有目录、有更新记录。这一条只管小屋。

用在哪

小屋工具页/projects的展台：一件一整屏、左文右图、巨字、规格条、3D展品随滚动登场。身份色只落在序号、图标块、「打开」按钮、焦点环四处。

为什么

发布会页面好的是节奏：一次只讲一件事、字大、空多、一个按钮。它的大黑底、产品摄影和戏剧化渐变是另一套语言，和小屋的暖纸中性色放在一起就是两种气质混用（总览第一条）。

六条

1. 名片优先：门厅只交付一件事，不放列表、预览、统计、引导按钮（见名片为主那条的清单）。
2. 少即是真：每个元素要么承载内容，要么承载导航；唯一例外是四处绿植装饰，完全不占布局、不接事件、不带动画。
3. 手作气质，工程克制：楷 / 行楷 / 宋只出现在少数标题与数字上，正文一律黑体；饱和色严格限量、限位置。
4. 零固定高度：内容多就往下长，内容少就居中留白。
5. 不阻塞：开场动画、自托管字体、装饰SVG都不能挡住内容首屏，也不能延迟数据获取。
6. 两个时辰，一间屋子：夜里不是反相，是同一间屋子的夜里——冷夜暖灯；切换入口是顶栏的墙壁开关（交互页墙壁开关）。

为什么

这六条把「小屋是一张名片、一间手作的屋子」拆成能核对的句子。新需求来了先过一遍：违背哪条就不做，或者换个不违背的做法。

验收

1440×900下和改动前的构建逐像素比：滚动位置0、没动过鼠标的三页 × 亮 / 夜；减弱动效、800px宽、触摸、省流量、禁用JS、WebGL失败六档都动过鼠标——差异像素0，而且一档都没有画布挂上。首屏多出来的只有那个岛本身（约1.3KB gzip、一个请求）。

为什么

降级档的访客没有「看到增强」，他该看到的就是没有增强时那一页；任何「降级了但还留点什么」都是给他的页面平白加了东西。逐像素比是唯一不靠眼睛的判法：0就是0。

实例

周回顾本可以「工作库已解锁就合并显示两个库」。但工作库上锁时是加密存的，密钥只在它自己那个已解锁页面的内存里，生活库页面读不到——所以「合并」只在工作库从没设过口令时才会发生。屋主会看到回顾页一会儿有工作、一会儿没有，而完全不会把它和「当初设没设口令」联系起来。现行：周回顾只看当前库，「另一个库上锁了」这种提示也不出现。

为什么

用户解释不了的行为就是bug，哪怕代码完全按设计在跑。控制室原话：这条理由比隔离原则本身还硬。代价（某天看起来像普通空天）是隔离该付的钱。

护栏

「只看当前库」三条测试走整个<App />（真实的读库键路径），不给组件喂数组——喂数组的话「读错键」根本没机会发生。先让它红过一次：组件临时去读另一个库，三条当场全红。

数值

台式：  2040 × 1019  DPR 1.25  Microsoft Basic Render Driver（WARP 软件渲染）  --scale 1.417（未封顶）
笔记本：2552 × 1274  DPR 1.5   RTX 4060 Laptop                                 --scale 1.45（封顶，2088起）
手机：   417 × 750   DPR 3.5   Adreno 750      （地址栏收起后417 × 903）
Mac：   1440 × 900             （开发机，等比基准，1440及以下一个数都不许变）

怎么用

• 大屏两档都拍：2040那档看「未封顶的纯等比」，2552那档才看得出1.45封顶后的样子。
• 「为什么没有3D」只属于台式那台；笔记本、手机本来就有。
• 手机按417拍图；判「装不装得下」用750（最坏），判「会不会显得空」用903。高度相关的尺寸一律dvh / svh，不用裸vh。

为什么

台式机物理2560宽、Windows缩放125%，视口其实是2040。按2560推出来的「1.45封顶在他机器上触得到」「填满与等比要取舍」全错了；公式也因此必须是「视口÷1440」，线性爬坡在2040处只给1.241，比等比的1.417小约12.4%（反过来说等比大14%；plan的SPEC原来写成「小14%」，是比反了，plan提交ab7bbd4已改正）。

档位

• 1440×900@1浅 / 深：等比基准；1440及以下数值一个都不许变。对比度在这两档按最不利角两法验收，见色彩页对比度两法。
• 1100（侧栏还在的窄桌面）、768（900以下收成顶栏、还没到600换底部tab bar）。
• 390@3与417×750@3.5都跑：390更窄，反而会掩盖「417才刚好放不下」那一类。
• 2040×1019@1.25带软件渲染旗标：屋主台式机，看长帧；2552×1274@1.5：只有它看得出封顶。
• 带工具栏的真实高度：台式2040×930、笔记本2552×1180，断言scrollHeight === clientHeight。
• ⌘+缩放：等价视口变窄，不许出横向滚动条。

为什么

每一档对应一类只在那里露馅的错：封顶后的形态只在2552、浏览器工具栏吃掉的高度只在930、软件合成的卡顿只在台式那档。档位清单就是「错会躲在哪」的地图。

做法

// 量具里：设视口2040×1019@1.25 → 灌探针数据 → 量 → 回报数字 → 删探针
const r = el.getBoundingClientRect();
const row = rowEl.getBoundingClientRect();
report({ leftGap: r.left - row.left, rightGap: row.right - r.right, vw: innerWidth });

为什么

控制室两次把大屏规则定错（整壳居中留白、≥1600多列），都是只看截图不量数。plan停靠位「1100×scale在2040只比行宽小几像素、视觉上等于右对齐」这个结论也是量出来的，截图看不出。判断「像不像停住」「留白够不够」用数字说话。

代码

async function setViewport(c, w, h, dpr, mobile) {
  await c.send("Emulation.setDeviceMetricsOverride",
    { width: w, height: h, deviceScaleFactor: dpr, mobile, screenWidth: w, screenHeight: h });
  const got = await evaluate(c, "({w: innerWidth, dpr: devicePixelRatio})");   // 已经 navigate 过
  if (got.w !== w || Math.abs(got.dpr - dpr) > 1e-6) throw new Error("viewport mismatch");
}

三个成因

1. --window-size设的是窗口：macOS最小宽度把它夹到500，不报错，PNG照样是390×844，布局按500排、手机断点没命中。
2. 页面没有<meta name="viewport">又开了mobile:true：Chrome给980的默认布局视口。
3. 在还没navigate的about:blank上读：读到980（读的是上一页）。

三种现象一模一样、都不报错，只能靠对账断言分开；护栏要真红一次：拿掉viewport meta的副本读到980、断言抛错，正常页面读到390、通过。

代码

const W = 417;                                    // 目标宽度，不是此刻的 innerWidth
const doc = Math.max(document.documentElement.scrollWidth, innerWidth);
const over = [...document.querySelectorAll("body *")]
  .filter((el) => el.getBoundingClientRect().right > W + 0.5);
ok(doc === W && over.length === 0);

先红一次

注入撑破块要写min-width加max-width:none，并先确认注入物自己真的越界了——否则块被页面的max-width夹住、根本没撑破，判据「绿」只是因为没东西可抓。

七条

1. 不许拿可变的显示文案当判定依据。
2. 测试先让它红一次再修绿；突变要精确，一次只坏一件事。
3. 门禁跑在验证过的稳定快照上（连续两轮、每轮3秒源树无变化才放行）。
4. 判据里不许掺我们自己加的量（限帧、节流、去抖、人为延迟）。
5. 断言「零件接没接上」，不断言「零件在不在」：断言按规则算出来的最终结果。
6. 阴性结论必须附阳性证据：先问「我的量具看不看得见我要否认的东西」。
7. 判据先在改动前的树上跑一遍，改前也红就是在量环境。

另一条配套：复核子代理要复现它声称的现象，不能只核结论安不安全。

为什么

这几种错最像成功：全绿、零错误、一片安静。规矩的作用是在它们长出来之前就挡住。

代码

// 行为判据：真派一个组字中的回车，断言什么都没发生；再派普通回车，断言记了一条
input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", isComposing: true }));
expect(list.length).toBe(0);
input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
expect(list.length).toBe(1);

两条要领

1. 突变要精确，一次只坏一件事：把整个文件弄崩只证明「测试能发现文件坏了」。plan那次：子代理的破坏让15条全红（没区分力）；换成精确破坏，恰好3条红、12条绿，红的正是库隔离那三条。
2. 护栏要够得到真正会出错的那一层；突变按「一个坏人会怎么绕过它」来写。

用在哪

输入法回车的规矩（交互页输入法回车）就是这样钉住的：先发isComposing:true的回车断言什么都没发生，再发普通回车断言正常提交。

代码

el.style.transform = `translateX(${x}px)`;          // 触发过渡
await new Promise((r) => el.addEventListener("transitionend", r, { once: true }));
const m = new DOMMatrix(getComputedStyle(el).transform);  // 终值
// 判「有没有动」：同一刻读两次 computed，不读 el.style

用在哪

本站外壳判「大图还压在顶栏底下」时，正文还在做进场位移（page-in的8px），第一帧量会判错；star.js按布局位置算、扣掉此刻的进场translateY，进场animationend再判一次。量具里「读早」也是常用的红探针：故意早读一次，判据必须红。

实例

小屋3D看门狗量帧间隔，间隔里掺着自己加的29ms限帧（rAF 60Hz ⇒ 只能是33.3 / 50 / 66.7），阈值恰好50压在台阶上，同一构建三次量到47.7 / 49.7 / 59.6——这就是屋主说的「有时候有3D有时候没有」。

做法

1. 相对阈值：按「这一档自己要求的帧率」的比例写，不写绝对毫秒，人为限帧就被除掉了。
2. 量连续的量：均值＝这一秒真送出去几帧，不在量化台阶上取中位数。做对之后，「限了帧」那类分支应当整个消失。
3. 多条件相与时，至少一个是干净量、并且它能独立决定结果；更好的问法是「是不是我造成的」，而不是「现在好不好」。

代码

// 先存一份快照，按名字查，排掉自己和整条祖先链；同一快照、同一过滤要先看见一个已知存在的进程
const ps = execFileSync("ps", ["-axo", "pid=,comm=,command="], { encoding: "utf8" });
const ctrl = spawn(process.execPath, ["-e", "setTimeout(()=>{},20000)", "prof-xx-ctrl"]);
// 命中 ctrl 恰好1个 → 杀掉 → 0个，这把尺子才算看得见东西；然后再查真名字

实例

• 验「30Hz屏上不许误杀」时第一版写坏了，岛压根没画，tier=high是假通过；重写成「每次请求等两个真实帧」才拿到435帧那个真数。
• 汇报「进程都清干净了」用的是查监听端口，残留的是个客户端（挂在已关掉的服务上42分钟），那条命令天生看不见它。

三个实例

• 本站背景模糊「自动」：没测过显卡时先按lite（只压暗、不模糊）。误判成full是没显卡那台整页卡；误判成lite只是第一次打开少一点景深。
• 刷刷3D帧守卫：误判会关掉好机器上的3D、并且整个会话记住；漏判只是让一个匀速偏慢、还能看的画面继续跑。所以判据的盲区落在漏判那一侧；丢弃超长卡顿的上限也不放宽，放宽会把被节流的后台标签页误判成慢机器。
• 输入法：拦「提交」只认isComposing，不认229——安卓软键盘不在合成时也常报229，拦了会让键盘上的搜索键按了没反应（后果重）；「提前return不处理」可以两个都认（后果轻）。

用在哪

本站boot.js：「背景模糊：自动」在star-gpu没测过时先落lite，star.js空闲时测一次再改。

诊断法

阈值老调不准时，先构造两个方向的反例：刷刷那次证明同一个判据「放过22帧的卡顿，却把流畅的30Hz屏判成慢」，两句同时成立，就说明光调阈值永远修不好，必须换判据。

代码

const args = ["--headless=new", "--mute-audio", "--user-data-dir=" + profDir, …];
// 要验「在播」：读 audio.paused === false、currentTime 在走——静音不影响这两个值
// 要测音频文件：say -o 生成到文件（不出声），测完删掉

为什么

无头Chrome默认的自动播放策略就是「允许」，声音照样从扬声器出来。那次还叠了两个坑：测试页设了循环播放；脚本结束时chrome.kill()只杀了主进程，残留的渲染进程一直在循环放测试语音。

代码

// 两段式：严格先要（有显卡的机器行为一字不变），拒了再放宽
const strict = canvas.getContext("webgl", { failIfMajorPerformanceCaveat: true });
const loose  = strict || canvas.getContext("webgl", { antialias: false });
// 两段都拿不到：安安静静回静态版——零请求、控制台零输出

为什么

四家3D都带failIfMajorPerformanceCaveat:true，这个标志专门拒绝软件渲染，屋主没显卡的台式机因此永远看静态版。验「拿掉它能不能跑」时，带了unsafe旗标测出来「能」，不带测出来「照样拿不到」；屋主的浏览器不会带旗标，所以带旗标那次不能单独拿来下结论——Windows上行不行用工作区根目录的3D诊断.html在真机上跑。

还有一层

没显卡时瓶颈其实是玻璃模糊，不是3D：一个24px方块在玻璃卡里变色，整页只有4fps；放到玻璃外120fps。量合成开销要用有窗口的浏览器，无头每帧整屏重画、数字偏悲观；新加的面挂不挂磨砂，用A/B量长帧个数（只看P95会漏掉稀疏卡顿）。

量具里

--disable-background-timer-throttling --disable-backgrounding-occluded-windows
--disable-renderer-backgrounding
Emulation.setFocusEmulationEnabled { enabled: true }
// 每项结束断言 document.hidden === false；进了后台就作废重跑，不算红

为什么

浏览器面板的标签页常在后台，调门厅视差时在这上面耗了好几轮；无头Chrome加CDP也会中招：长跑的验收脚本跑到一半页面进了后台，rAF停、WAAPI不推进、对话框的close事件不来，判据红得冤。在面板里调rAF动效，把断言和触发放进同一批操作，前面先截一张图把标签页顶到前台。

为什么

草稿区是会话级的，而且会被清：2026-09-28刷刷的续做回归脚本就这样被删，是从会话记录里捞回heredoc再重放后续改动才恢复的；岗岗第十一轮放在草稿区的那批也被清掉。长期留的东西不放系统临时目录。

用在哪

本站的量具都在本机验收目录的star/下，各有一节说明怎么跑（不进仓库）。

三种形态

1. 数字过期（最好找）：拿旧值当关键词全仓grep。那次一把捞出13处，四个岛的实现和改动点旁的注释全对，漏的全是文件头总述块和文档正文——改一个值，要连「所有复述这个值的地方」一起改。
2. 一个正确的指针指向一句错话：改动点写着「上限1.5（不再钉1，见文件头）」，文件头还写着「像素比1」。明确的「见X」是在命令下一个人去信那句错话——写「见X」时顺手打开X看一眼。
3. 结论还对、理由已经悬空（最难找）：里面没有一个过期数字可grep，只能改完一个值，回头读一遍所有「解释这个值为什么是这个值」的段落。

另外三条

• 跨文档引用一条规矩写内容短语，不写编号（编号会错位）。
• 撤掉一处实现时，要连带找出「哪些数字是在它身上量的」。
• 相似只是线索不是结论：看到相似的句子别一起改，每一处单独核。

为什么

1. 从工作树删根本不省体积：文件还在git历史里，.git一个字节不变；真要省得改写历史，那是拿追溯能力永久换几兆。
2. 屋主要的是一份干净的能带走的副本，不是「尽可能小」；作废方案的样张，价值正在有人问「为什么不是那样」的时候。
3. 白名单本来就会排掉概念图这类，目的已经达到，不需要再动仓库。

用在哪

本站发布到老站的脚本scripts/publish-static.mjs：只拷白名单里的文件，EXCLUDE是明确不放的，两张表都没写到的文件直接报错（新文件类型要显式加）；另扫本机路径、Key形态、实名线索。