miro-ai
将AI编程助手连接到Miro白板，通过对话进行设计、编码与协作。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：miro-ai。 它的用途是：将AI编程助手连接到Miro白板，通过对话进行设计、编码与协作。 完整的 Skill 内容见：https://321skill.com/skills/miro-ai/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请浏览‘项目架构’白板，根据上面的组件关系图，为我生成对应的React组件代码框架。”，它会读取白板上的图形和文字，理解组件层级与关系，然后输出结构清晰的JSX代码。或者你说：“把这段API接口代码放到白板的‘代码评审区’，并创建一个待办项。”，它会将代码作为卡片粘贴到指定位置，并添加一个任务标签。
介绍
Miro AI开发工具包解决了AI助手与可视化协作平台Miro之间的割裂问题。它通过一个标准的MCP服务器，让Claude、Gemini等AI助手能够直接读取、操作你的Miro白板，实现从设计图生成代码、提取白板上下文、创建图表、管理任务等一系列操作，将自然语言对话转化为可视化的生产力。
使用方式非常简单：根据你使用的AI工具（如Claude Code、Gemini CLI、Cursor等），通过插件市场、命令行或配置文件安装对应的集成。安装后，AI助手便获得了访问指定Miro白板的权限，你可以直接通过对话指令让它“根据白板上的架构图生成React组件”或“将这段代码添加到白板的评审区域”。
这个工具非常适合需要频繁在视觉设计和具体代码间切换的开发者、产品经理和设计师。无论是全栈开发根据线框图快速搭建前端，还是团队利用白板进行代码评审和任务跟踪，它都能显著提升从想法到实现的流转效率。
建议在使用前，先在Miro中清晰组织你的白板内容，并为AI助手分配具有适当权限的API令牌。初次使用可能需要对指令进行微调，以达到最佳效果。注意，它主要增强的是基于现有白板内容的创作和提取能力，而非完全替代专业的UI设计或项目管理工具。
核心特点
核心区别在于它深度集成了Miro这一主流可视化协作平台，提供了标准化的MCP服务器和针对各主流AI助手的开箱即用插件，让AI能直接“看见”并操作白板上的视觉元素，实现了设计、代码与项目管理的闭环。
注意事项
不适合完全脱离Miro平台进行独立代码开发或设计的场景，其能力高度依赖于Miro白板的内容与结构。
常见问题
支持哪些AI编程助手？
支持Claude Code（插件）、Gemini CLI（扩展）、Cursor/VSCode等MCP客户端，以及通过Agent Skills跨平台使用。
需要Miro付费账户吗？
需要Miro账户，部分高级功能可能需要对应Miro订阅计划的支持，具体请参考Miro开发者文档。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/miro-ai/raw/index.md 读取 miro-ai 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/miro-ai/raw/index.md（查看排版版本）