N°01
节奏网格
用 12 列栅格重新定义留白。
做法容器查询 + 动态间距令牌，断点从 4 个减到 1 个。
栏目 02 / Selected Works
六个小实验，都从「别处」长出来。
同一个设计系统，用不同的 DOM 顺序与视觉权重重写。悬停看看背面——我们习惯把思考留在正面，把方法藏在反面。
N°02
微光按钮
一次点击的三种反馈层级。
做法scale / 光晕 / 声音提示三轨并行，尊重 prefers-reduced-motion。
N°03
滚动叙事
让长页面自己会讲故事。
做法IntersectionObserver 驱动状态机，滚动距离即进度条。
N°04
色板生成器
从一张图抽一套可访问配色。
做法对比度实时校验，WCAG AA 以下直接告警。
N°05
空状态剧场
没有数据的时候，也不冷场。
做法SVG 小剧场 + 一句有人味的提示文案。
N°06
表单呼吸
校验提示不再是红字恐吓。
做法内联引导 + 渐进校验，错误率下降 38%。
栏目 03 / How We Build
一条不太省事的流水线。
慢的那一半，是为了让上线后的每一次改动都变便宜。
STEP 01拆词
先把业务目标翻译成用户动作：「他此刻想做什么」，而不是「我们要卖什么」。
- 关键词意图表
- 任务路径图
- 退出点预判
STEP 02定骨
先写语义化 DOM，再谈视觉。结构对了，SEO 与无障碍自然就位。
- landmark 分区
- 标题层级校验
- 无 JS 可用兜底
STEP 03上色与动
动效只服务两件事：方向感与反馈感。花哨的部分我们另外收费（开玩笑的）。
- 缓动曲线令牌
- reduced-motion 分支
- 60fps 预算
STEP 04压测与交付
在 4G 低速、小屏、键盘导航三种条件下各跑一遍，才肯交出去。
- Core Web Vitals
- 语义快照 diff
- 设计令牌文档
栏目 04 / Motion Lab
拖一拖，这里的东西会听话。
纯前端小玩具，用来验证「形态变化不打断注意力」这件事。参数只存在你的浏览器里，我们什么都没收集。
形态
border-radius: 50%
栏目 05 / About
为什么叫「91你懂的」？
最早只是内部一个用来放动效录屏的文件夹，编号到第 91 个的时候，发现它已经比文档长得还清楚了——能动的界面，胜过三千字说明。名字就这么留了下来。
现在它是我们对外的一个小窗口：不追热点，不堆功能，只把「点下去那一刻的感觉」反复磨到顺手。
站点完全静态、无第三方追踪、无广告脚本，字体与交互均尊重系统级「减少动态效果」偏好。
91编号起源
∞可复用组件
100%静态可爬取
栏目 06 / Get in Touch
有想磨的那一下，聊两句？
描述你的界面、你的用户、你最想改掉的那一个别扭瞬间。我们会在一到两个工作日内回信。