@khmuhtadin/pi-stitch-mcp
连接Pi与Google Stitch MCP服务器，实现Figma设计稿一键生成多平台代码。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@khmuhtadin/pi-stitch-mcp。 它的用途是：连接Pi与Google Stitch MCP服务器，实现Figma设计稿一键生成多平台代码。 完整的 Skill 内容见：https://321skill.com/skills/khmuhtadin-pi-stitch-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请根据这个Figma设计链接（附上链接），为我生成一个React版本的导航栏组件代码。” 它会调用Stitch服务解析设计稿，并返回结构清晰、带有基本样式的React JSX代码。你还可以进一步要求：“把它改成Flutter版本”或“为这个按钮添加点击事件的注释”。
介绍
这个Skill的核心功能是解决设计师与开发者之间的协作鸿沟。它通过将Pi与Google Stitch远程MCP服务器桥接，能够将Figma中的设计稿自动转换为Flutter、React、SwiftUI等前端框架的组件代码，极大提升了从设计到代码的实现效率。
使用时，你需要确保Pi已安装此扩展，并且能够访问Google Stitch MCP服务器。在Pi的对话环境中，你可以通过指令或自然语言描述，要求其根据指定的Figma设计文件链接或元素，生成对应平台的组件代码。
这个Skill非常适合前端开发者、全栈工程师以及希望快速将设计原型转化为可运行代码的技术团队。对于需要频繁在Figma与IDE之间切换、手动编写UI组件代码的开发者来说，它能显著减少重复劳动。
建议在使用前，先确认你的Figma设计文件结构清晰、命名规范，这有助于生成更准确、可维护的代码。同时，生成的代码通常作为基础骨架，可能仍需根据具体业务逻辑和样式细节进行微调。
核心特点
它直接桥接至Google官方的Stitch MCP服务器，提供了更稳定和官方的设计转代码能力；支持同时生成Flutter、React、SwiftUI三种主流移动与前端框架的代码，覆盖场景更广。
注意事项
对于高度定制化、包含复杂交互逻辑或非标准组件的Figma设计，生成的代码可能不完整或需要大量手动调整。
常见问题
需要自己部署Stitch服务器吗？
不需要，它连接的是Google官方的远程MCP服务器。
支持哪些设计工具？
目前主要支持从Figma设计稿生成代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/khmuhtadin-pi-stitch-mcp/raw/index.md 读取 @khmuhtadin/pi-stitch-mcp 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/khmuhtadin-pi-stitch-mcp/raw/index.md（查看排版版本）