用途：把设计令牌与 Framer 打通，让原型和生产站点使用同一套样式变量，保持设计系统一致。
主要能力：支持四种集成方式——CSS 变量（全局令牌导入，简单）、代码组件（自定义 React 组件，中等）、覆盖 Overrides（动态样式，简单）、Framer Library（共享组件库，进阶）。提供 Button、Card、Input 等代码组件示例，均通过 var(--...) 引用令牌，并用 addPropertyControls 暴露属性控制；覆盖示例包含主按钮样式、卡片样式、响应式文字与主题切换。
使用方式：先在 Framer 站点设置 → Custom Code → Head 中注入 :root 的 CSS 自定义属性，或通过 link 引入外部 tokens.css；再创建引用令牌的代码组件；随后用 Overrides 应用动态样式；最后发布并维护令牌同步。令牌同步可用脚本把 tokens.json 转为 CSS 输出到 framer/tokens.css。共享组件库通过 package.json 声明 framer、framer-motion、react 为 peerDependencies，并用 framer-cli publish 发布。
适用场景：在 Framer 中搭建带设计系统的交互原型、发布样式统一的 Framer 站点、构建可复用的 Framer 组件库。
限制：资料未提供具体收费、价格、平台支持范围与效果数据；示例代码需按实际项目调整，深色模式依赖 data-framer-theme 属性切换，需自行测试。