用途:面向 Framer 设计到开发的完整工作流,提供交互原型、动画实现与生产站点开发指导。
主要能力:涵盖 Framer 画布与 Frame、Auto Layout 布局、组件与变体(variants)、属性控制;Framer Motion 动画(tween、spring、keyframes、variants、手势、拖拽、布局动画、滚动动画、useScroll/useTransform);交互原型(Tap、Hover、Press、Scroll、Drag、页面过渡);Framer CMS(集合、字段、useCollection 查询、动态路由);代码组件(addPropertyControls、ControlType)与 React 集成;SEO、性能优化、断点与流体排版;设计系统与共享库。
使用方式:文档说明可通过 Framer MCP 服务器连接,列出与访问项目、查询项目结构和组件、获取组件代码与属性、访问 CMS 集合与内容、导出设计令牌、监控构建部署。文档提到 MCP 使用前先检查可用 MCP 工具,并强调设计与代码保持同步。给出的代码示例包含 framer-motion 的导入与 motion 组件用法、useCollection、addPropertyControls 等,可按需引用。
适用场景:审计现有 Framer 项目、提取设计令牌与组件、自动化 CMS 内容操作、监控构建状态、生成组件文档、构建营销站点与交互原型。
限制:具体安装命令、收费与价格、可用的具体 MCP 工具名与调用细节、平台限制等信息暂未提供;示例代码未逐条给出运行环境要求,实际使用前需以官方文档为准。