用途：为 Framer 插件和代码组件建立快速本地开发工作流，支持 Vite 热重载、TypeScript 与测试。前提是已完成 framer-install-auth 设置、Node.js 18+ 与 npm、并打开 Framer 编辑器。
主要能力与用法：
- 插件开发环境：运行 npx create-framer-plugin@latest my-plugin，进入目录后 npm install，再 npm run dev 启动 Vite 开发服务器并热重载到 Framer 编辑器。项目结构含 src/App.tsx、src/main.tsx、src/framer.d.ts、vite.config.ts、tsconfig.json。
- 连接编辑器：在 Framer 项目中点击 Plugins > Development，选择本地开发插件，修改 src/App.tsx 即时热重载。
- 测试插件逻辑：用 Vitest 在 Framer 之外测试数据转换，建议抽取纯函数，如 transformPosts 将文章转为 CMS 条目字段。
- 代码组件开发：代码组件直接在 Framer 编辑器编辑；共享组件库可本地建目录，npm install react framer typescript @types/react，用 addPropertyControls 与 ControlType 定义属性控件后粘贴进 Framer。
- Server API 开发：用 framer-api 的 framer.connect 配合环境变量 FRAMER_API_KEY、FRAMER_SITE_ID 本地测试 CMS 操作。
限制与错误处理：插件不显示通常是开发服务器未运行，需 npm run dev；热重载失效需确认 framer-plugin 的 Vite 插件已配置；测试中 framer 未定义属编辑器专用 API，需 mock 或抽取纯函数；组件类型报错需安装 @types/framer 或使用 framer.d.ts。本地测试应使用虚构页面、CMS 记录与表单提交，确认无需生产凭据、日志脱敏并在验证后清理临时产物。后续可参考 framer-sdk-patterns 获取生产级模式。