SuperAPI AI 工具集

framer-plugins

智能体与模型

查看项目

更新于 10-15 21:47

技能介绍

用途:为构建、调试或修改 Framer 插件的开发者提供 SDK 参考,并提示先检查项目 CLAUDE.md 中的覆盖配置。

主要能力与关键事实:SDK 包为 @framer/plugin(v4+),旧名 framer-plugin 已废弃;脚手架命令 npm create framer-plugin@latest,构建使用 Vite + vite-plugin-framer。基础样式导入 "@framer/plugin/framer.css",核心导入 import { framer } from "@framer/plugin"。开发流程为 npm run dev,再在 Framer 的 Developer Tools 中选择 Development Plugin。每个插件需在项目根目录提供 framer.json,含唯一 id、name、modes 与 icon。插件模式包括 canvas、configureManagedCollection、syncManagedCollection、image、editImage、collection、code、localization;CMS 插件同时使用 configure 与 sync 两个模式。

核心 API 覆盖 UI 管理(showUI、hideUI、closePlugin、notify、setCloseWarning、setMenu、showContextMenu、navigateTo、subscribeToOpenCodeFile)、集合访问、画布方法(addImage、setImage、addText、addSVG、addComponentInstance 等)与权限(isAllowedTo、useIsAllowedTo)。数据存储按用途选择 localStorage 或 pluginData(每项 2kB、总计 4kB),授权状态建议放在后端并以用户 id 关联。代码文件可通过 createCodeFile 等 API 创建与更新,画布实例应按 componentIdentifier 匹配。

限制与注意:受保护方法调用需显式 isAllowedTo 检查、try/catch 与 UI 禁用;项目 remix 会复制 pluginData,需检测并清除陈旧凭证。代码文件仅 react、react-dom、framer、framer-motion 支持裸 npm 导入,其它依赖需 URL 导入。其余细节如 CMS 同步算法、市场审核流程等资料未在本次内容中展开。