Flato Design MCP

Flato Design MCP

Flato 是面向 AI 设计的原生画布运行时。

Flato 为 AI Agent 提供实时、可编辑的视觉画布，用于设计工作。通过 MCP，Agent 可以创建、检查、修改，将项目导出为 PNG、JPG、PDF 或仅包含图像的 PPTX，并对 Flato 项目进行 QA，同时用户仍可完全使用浏览器编辑器。

Flato Design MCP 将 Codex、Claude Code、Cursor 和其他支持 MCP 的 Agent 连接到这个原生画布。

https://api.flato.ai/api/mcp/editor

此仓库是官方分发包，包含设置文档、基础指南技能、Codex 插件打包内容、示例以及注册/审核元数据。它 不包含 Flato MCP 服务源代码。

定位

Flato 是面向 AI 设计的原生画布运行时，而非一次性图像 生成器或静态 HTML 演示文稿生成器。MCP 工作流围绕 可编辑页面、结构化区块、最新设计上下文、明确的页面和区块 ID、实时编辑器交接以及视觉 QA 构建。

如果你想通过 MCP 安全地让 AI Agent 操作 Flato 的可编辑视觉 画布，请使用此软件包。

包含内容

• skills/flato-design-mcp-guide：供 Agent 安装的基础指南技能。
• plugins/flato-design-mcp-codex：包含 MCP 配置和 指南技能的 Codex 插件包。
• .agents/plugins/marketplace.json：此 仓库的 Codex 市场描述文件。
• docs/：设置、OAuth、权限和故障排除说明。
• registry/：MCP 注册和平台审核元数据草案。
• examples/prompts/：用于测试集成的初始提示词。

安装 Codex

Codex 可以将此仓库安装为插件市场：

codex plugin marketplace add sologovision/flato-design-mcp --ref main
codex plugin add flato-design-mcp-codex@flato-design-mcp
codex mcp login flato-editor

然后开启新的 Codex 对话并验证：

Use Flato Design MCP. Call flato_whoami first and report the result. Do not create, edit, or write any project.

参阅 Codex 设置。

安装 Claude Code

添加托管的 Flato MCP 服务：

claude mcp add --transport http flato-editor https://api.flato.ai/api/mcp/editor

然后使用 skills/flato-design-mcp-guide 中的指南技能。

参阅 Claude Code 设置。

Cursor 和其他 MCP 客户端

使用托管的 MCP 服务 URL：

https://api.flato.ai/api/mcp/editor

然后按照 skills/flato-design-mcp-guide/SKILL.md 中的工作流操作。

参阅 Cursor 设置。

OAuth

Flato Design MCP 使用浏览器 OAuth。如有需要，Flato 会要求你先登录或 创建账户，然后再进行授权。

请勿将 Flato 密码、Bearer 令牌、刷新令牌或本地 OAuth 缓存内容粘贴到 Agent 对话中。

参阅 身份验证。

账户与订阅

OAuth 需要 Flato 账户。安装、连接或开始使用 Flato Design MCP 不需要 付费 Flato 订阅。

某些功能、导出、更高用量、团队/工作区功能，或付费图像 生成和编辑，仍可能取决于已通过身份验证的用户所用的 Flato 套餐 或额度。如果 MCP 返回套餐或额度错误，Agent 应如实告知用户，而不是 要求用户提前订阅。

Agent 首次使用工作流

连接 Flato MCP 后，Agent 应：

1. 调用 flato_whoami。
2. 使用 flato_create_project、 flato_use_project 或 flato_use_share_link 创建或选择项目。
3. 根据需要打开实时 Flato 编辑器。
4. 轮询 flato_get_project_status，直到 canWrite=true。
5. 读取 flato://canvas/fundamentals-v1，或在无法读取资源时调用 flato_get_canvas_fundamentals。
6. 在执行任何写入操作前调用 flato_get_design_context。
7. 使用最新上下文读取结果中返回的具体页面和区块 ID。
8. 写入后检查 mcpFeedback。
9. 使用 flato_export 导出重要结果；使用 PNG 或 JPG 预览导出 进行视觉 QA。

交互

页面级交互通过 flato_create_pages 和 flato_update_pages 上的 interactiveScript 编写。Agent 应依赖当前的 MCP 工具架构和 flato://canvas/fundamentals-v1 获取完整的交互约定，而不是复制此仓库中的静态架构片段。

支持的内联交互事件包括 click/input/change，以及桌面端 hover/mouse 事件，例如 onclick、onmouseover、 onmouseout、onmouseenter 和 onmouseleave。Hover 适用于桌面演示；如果需要支持移动设备上的触控用户，请添加 click/tap 行为或可见的备用方案。

已验证的冒烟测试

v0.1.3 Codex 插件包使用完整指南技能和当前托管的 Flato MCP 约定。

Codex 安装路径已通过以下方式验证：

codex plugin marketplace add sologovision/flato-design-mcp --ref main
codex plugin add flato-design-mcp-codex@flato-design-mcp
codex mcp login flato-editor

独立的 Codex CLI 会话通过已安装的 flato-editor MCP 服务成功调用了 flato_whoami，且没有创建或编辑任何 Flato 项目。

截图

GitHub 发布页面

Codex 插件安装

只读 MCP 冒烟测试

可编辑的演示文稿画布

画布编辑和内容工具

AI 辅助画布编辑

Codex 操作实时画布

发布资源

GitHub 发布包附带：

• flato-design-mcp-guide-vX.Y.Z.zip：可安装的基础指南技能。
• flato-design-mcp-codex-vX.Y.Z.zip：Codex 插件包。

安全原则

• 不要要求用户粘贴密码、Bearer 令牌或本地 OAuth 令牌。
• 不要检查本地 OAuth 或令牌存储。
• 不要猜测 pageId 或 blockId。
• 在设计写入操作使用返回的资源 URL 之前，不要声称已放置生成的资源。
• 进行大范围或高风险编辑前，请先使用备份。

相关 Flato 文档

• 用户文档：https://www.flato.ai/docs/mcp
• 面向 Agent 的指南：https://www.flato.ai/docs/mcp.md
• Flato 应用：https://www.flato.ai
• 隐私政策：https://www.flato.ai/docs/privacy-policy
• 服务条款：https://www.flato.ai/docs/terms-of-use

支持与安全

• 设置和文档问题请通过 GitHub Issues 反馈。
• 有关安全问题的报告指南，请参阅 SECURITY.md。
• 请勿在公开 Issue 中包含令牌、密码或私人项目内容。

路线图

这是基础包。诸如 flato-presentation-skill 之类的场景专用技能应基于本指南构建，而不是重复连接、OAuth、目标定位和安全工作流。