拆解 DataFast：如何逆向一个网站的技术栈、配色和设计规范

刷 Twitter 时看到有人分享 DataFast 的公开网站分析面板，一眼觉得好看：暖白色的底、赤陶橘的按钮、蓝色的图表，卡片浮在页面上但看不到一条生硬的边框线。想把这套设计借鉴到自己的项目里，光靠肉眼抄是抄不准确的——于是我花了点时间把它的技术栈和设计系统完整逆向了一遍，顺手把方法论沉淀成了一个 skill。

先看结论，再讲过程。

技术栈全景

整个判断过程不需要打开 DevTools 的 Sources 面板人工翻代码，四步就能走完。

第一步：HTML 指纹识别框架

curl 拿到原始 HTML，框架特征一眼可辨：

• /_next/static/chunks/ 开头的资源路径和 self.__next_f 流式数据——Next.js App Router
• class="__className_0d7163 bg-base-300"——__className_ 前缀是 next/font 的字体类名注入，bg-base-300 是 DaisyUI 的语义色命名（原生 Tailwind 没有这个类）
• class="lucide lucide-chevron-down"——Lucide 图标
• class="btn btn-primary join-item"——DaisyUI 组件类

类名是比 meta 标签更可靠的指纹，因为它们直接来自构建产物，伪造的动机和成本都高。

第二步：CSS 变量提取主题色板

DaisyUI 5 的主题用 OKLCH 定义在 CSS 变量里。下载 /_next/static/css/*.css 后，正则提取 :root 和 [data-theme=dark] 块里的变量：

:root {
  --p: 65.3083% 0.163661 37.224155;  /* primary */
  --s: 82.3561% 0.096247 242.823018; /* secondary */
  --b1: 100% 0 0;                     /* base-100 */
}
[data-theme=dark] {
  --b1: 26.8618% 0 0;  --bc: 89.8042% 0.001746 67.800407;
}

OKLCH 不能直接用，写十几行代码转成 hex（OKLab 到 sRGB 的标准矩阵变换），再用 culori 库交叉验证。明暗两套色板就齐了：

注意暗色模式那组：#262626 系暖灰黑，不是流行的 #0A0A0A 蓝黑；文字 #DEDDDC 是带 67.8° 暖色相的米白。这是它和 Vercel、Linear 风格拉开观感差异的关键——更「纸感」，更柔和。

第三步：Playwright 采样计算样式

静态 CSS 只能告诉你「定义了什么」，渲染后的计算样式才能告诉你「实际用了什么」。一段 Playwright 脚本打开页面，采样关键元素：

await page.evaluate(() => {
  const btn = getComputedStyle(document.querySelector('.btn-primary'));
  return { bg: btn.backgroundColor, radius: btn.borderRadius };
});
// => { bg: "oklch(0.653083 0.163661 37.2242)", radius: "8px" }

这一步有两个坑值得记：

坑一：视觉模型的色觉不可靠。 我把整页截图丢给视觉模型分析，它信誓旦旦说按钮是蓝色的——因为图表线条大面积是浅蓝，把它的判断带偏了。截取单个按钮元素的特写再问一次，它才给出正确的 #E16540。结论要以计算样式为准，视觉模型只用来理解布局。

坑二：headless 环境的 WebGL 会挂。 页面里的世界地图组件在无 GPU 环境下会弹「Map Visualization Unavailable」错误框挡住主体，加 --enable-unsafe-swiftshader 参数用软件渲染解决。

切换暗色主题不需要点 UI：browser.newContext({ colorScheme: 'dark' }) 让 next-themes 自动跟随系统偏好。

第四步：JS chunk 指纹确认依赖库

最后下载 JS chunk 做依赖指纹。混淆后的代码库特征仍然清晰：recharts-curve 类名字符串出现 168 次、ComposableMap 地图组件 4 次、sonner 的混淆 keyframes go2264125279、react-tooltip 的 --rt-color-* 变量。连营销工具都能认出来——r.wdfl.co 域名的 preload 是 Rewardful 联盟追踪脚本。

最值得偷的设计手法

「无实线边框的卡片」 是整套设计里性价比最高的一招。custom-card 不用 border，用三层极淡阴影，第一层 0 0 0 1px 充当描边：

.custom-card {
  border-radius: 1.3rem;                    /* 比常规圆角更大更柔和 */
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06),   /* 1px 描边 */
              0 1px 2px -1px rgba(0,0,0,.06),
              0 2px 4px 0 rgba(0,0,0,.04);
}
[data-theme="dark"] .custom-card {
  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08); /* 深色下换白色描边 */
}

卡片浮在页面上但不脏，明暗主题只需换描边颜色。配套细节也讲究：卡片头分隔线用「内容色 5% 透明度」而不是固定灰色；hover 时阴影加深并加一层大扩散柔影，0.2s 过渡；标题 text-wrap: balance、副标题 text-wrap: pretty。

整套设计的色彩纪律同样值得学：品牌色与数据色严格分离——赤陶橘只出现在 CTA 按钮和品牌元素上，所有图表、地图一律浅蓝系（地图还有 #EBF7FF 到 #1E88E5 的七档蓝阶），仪表板不会变成「橘子摊」。字体只用 DM Sans 一个字族，靠 extrabold/semibold/medium 三档字重加 tracking-tight 拉层级，加载轻、观感统一。

沉淀成 skill：rf-site-design-extractor

这套流程本身比单次分析的结论更值钱。我把它沉淀成了 rf-site-design-extractor skill，核心资产是两块：

指纹对照表：Next.js、Astro、Nuxt、SvelteKit 的资源路径特征，Tailwind/DaisyUI/shadcn 的变量命名差异，styled-jsx/CSS Modules/emotion 的类名哈希格式，Recharts/chart.js/d3 的 DOM 特征，常见商业脚本的域名……把这次踩过的特征全部固化成表，下次分析新网站直接查。

一体化脚本：analyze_site.mjs <url> 一条命令跑完四步——抓 HTML 识别框架、下载 CSS 提取主题变量并转 hex、拉 JS chunk 做依赖指纹、可选 --render 参数用 Playwright 采样计算样式和明暗截图，最后输出结构化的设计规范报告。

以后再看到好看的设计，就不用「肉眼抄」了。

结语

逆向设计系统本质上是在做减法：把「这个网站好看」拆解成「暖灰黑代替蓝黑」「1px ring 代替边框」「品牌色与数据色分离」这些可以单独执行的小决策。工具都是现成的——curl、正则、Playwright、十几行颜色转换代码，门槛不在技术，在于愿不愿意把模糊的审美偏好翻译成精确的数值和规则。

skill 已入库，下次遇到值得学的设计，一条命令的事。