用 REA 扒光 Claude Desktop:前端动效参数全被逆向

ZeYanjie · x · 2026-10-13

网友用 REA(AI 逆向工程)把 Claude Desktop 的前端样式全部提取出来,发现其丝滑质感的细节所在:

字重光渗补偿:暗色模式下白字因视网膜光渗效应视觉上比浅色粗 10%15%,Claude 通过 CSS 变量把暗色字重从 500/600 降到 460/560,双主题视觉粗细一致
打字机晕开动效:每个字符从 blur(6px) 到清晰仅 90ms,字符按 30ms 依次级联延迟,cubic-bezier(.215,.61,.355,1) 曲线
换行约束:正文用 text-wrap: pretty 消灭孤字,标题 balance 均衡分配
图标基线校准:自定义 vertical-align(-0.125em 等)解决 SVG 图标上浮 2-3px
动效设计令牌:微交互 60ms、瞬时吸附 0.12s、标准组件 0.2s、面板 0.3s,配三套专属贝塞尔曲线
技术栈为 Tailwind CSS + 原生 keyframes(文字动效,GPU 加速)+ Framer Motion(弹簧交互)

配图含完整 keyframes 代码与 Claude Storybook 复刻文档,可直接照抄复刻同款前端质感。

「编程与Agent」频道最新