designlang如何捕获网站的动效语言getAnimations()捕获真实动画并生成Framer Motion/GSAP代码【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extractdesignlang 是一个开源设计系统提取工具它能通过浏览器的document.getAnimations()接口捕获网站正在运行的真实动画——包括加载入场、滚动揭示和悬停反馈——再把这套“动效语言”转成可直接导入的 Framer Motion、GSAP 等代码帮新手快速复刻任意网站的专业动效。什么是网站的“动效语言”每个成熟的产品网站背后都有一整套动效规范时长节奏按钮悬停是 150ms卡片入场是 400ms缓动曲线用的是标准ease-out还是带轻微回弹的 spring 曲线触发时机元素是页面加载时出现还是滚动到视口才揭示编排方式多个元素是否有 stagger交错入场的韵律以往想复用某个网站的动效只能肉眼观察 手动猜测参数。designlang 的思路是既然动画正在浏览器里真实运行那就直接读出来。getAnimations() 如何捕获真实动画核心逻辑在 src/crawler.js 的captureRuntimeMotion()中。它驱动一个真实浏览器分三个阶段“体检”页面每个阶段调用document.getAnimations()读取此刻正在运行的全部动画CSS 动画、CSS 过渡、WAAPI 动画一网打尽load加载态页面刚加载完时捕获入场动画和无限循环动画scroll滚动态把页面滚动到 1/4、1/2、3/4 位置各采样一次捕获滚动揭示、视差和 scroll-timeline 动效hover / focus交互态对按钮和链接采样悬停与聚焦捕获交互过渡动画每条观察记录都会序列化出触发器、目标元素选择器、动画类型、名称、时长、延迟、缓动曲线、重复次数以及实际变化的 CSS 属性比如opacity、transform。整个流程全程容错——某个环节失败只会少几条记录绝不会中断提取。从原始观察到结构化动效模型浏览器吐出的原始数据还很粗糙src/extractors/motion-runtime.js 负责把它整理成结构化的“动效模型”时长命名把毫秒数归一为语义化档位——xs≤150ms、sm≤250ms、md≤400ms、lg≤700ms……一眼看出网站的节奏层次缓动家族分类cubic-bezier会被分析控制点自动判断它属于 ease-in-out、ease-out还是带过冲的 spring 曲线见 src/extractors/motion.js 的classifyCubicBezier()滚动配方识别detectScrollRecipes()会根据动画触发的属性把滚动动效归类为parallax视差/ reveal揭示/ pin钉住三种可复用配方编排检测相邻元素的延迟差被识别为 stagger 间隔直接决定生成代码里的交错入场节奏也就是说designlang 提取的不是“某个元素怎么动”而是这个网站动效的语法体系。一键生成 Framer Motion / GSAP 代码提取结果由 src/formatters/ 下的多个动效发射器消费一次提取可同时产出多套代码Framer Motionsrc/formatters/framer-motion.js导出easings曲线表、transitions预设和slideUp、scaleIn、stagger等variants并会为检测到的过冲曲线反推出{ stiffness, damping, mass }弹簧参数若源站使用 scroll-timeline还会额外生成whileInView变体GSAPsrc/formatters/motion-gsap.js把提取的曲线注册成具名CustomEase保证网站的“手感”可精确复刻并输出gsap.from()揭示助手检测到滚动联动时自动生成 ScrollTrigger 批次揭示其他平台Motion One、WAAPI 原生 API、Tailwind 动效配置、纯 CSSkeyframes与动效 Tokensrc/formatters/motion-tokens.js生成的文件长这样以画廊中的真实产出为例vercel-com-motion.framer.jsstripe-com-motion.framer.jslinear-app-motion-tokens.json这些不是示例片段而是 designlang 对真实网站运行getAnimations()捕获后生成的产物——导入即用。快速上手3 步拿到任何网站的动效代码克隆仓库git clone https://gitcode.com/gh_mirrors/de/design-extract安装依赖并运行npx designlang extract https://your-site.com --motion-runtime打开输出目录直接拿到{host}-motion.framer.js、{host}-motion.gsap.js、{host}-motion.css等全套文件 小贴士--motion-runtime参数会启用getAnimations()运行时捕获拿到的时长和交错间隔是真实观测值比纯静态分析 CSS 准确得多。为什么这比“看 DevTools 抄参数”更靠谱传统方式提取动效有三个痛点designlang 都正面解决了痛点designlang 的解法动画是 JS 在运行时动态加的静态 CSS 里看不到getAnimations()读的是正在运行的活动画滚动/悬停触发的动画手动观察抓不全自动化 scroll hover focus 三阶段采样缓动参数是一串数字看不出设计意图自动归类为 ease-out / spring / stagger 等语义化语言总结designlang 把“网站的动效语言”拆成了可测量、可传递的三件事真实触发动画getAnimations 捕获→ 结构化成动效模型时长档位 缓动家族 滚动配方→ 编译成目标框架代码Framer Motion / GSAP / CSS / Token。无论你是想在 React 项目里复刻某站的入场动画还是想为自己的产品补齐动效规范一条命令就能把答案装进口袋。【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extract创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考