@zyvra-labs/pi-stitch-tools
在编码会话中直接生成、编辑和管理Google Stitch UI设计
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@zyvra-labs/pi-stitch-tools。 它的用途是：在编码会话中直接生成、编辑和管理Google Stitch UI设计 完整的 Skill 内容见：https://321skill.com/skills/zyvra-labs-pi-stitch-tools/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为我的登录页面生成一个Stitch设计按钮组件，并导出为React代码。’，它会调用Stitch工具创建符合你项目风格指南的按钮，并生成可直接粘贴使用的React组件代码。或者，你可以说：‘打开当前用户卡片的设计稿，让我调整一下间距。’，AI便会调出设计工具供你在线编辑。
介绍
这个Skill解决了开发者在编码过程中需要频繁切换环境去处理UI设计稿的问题。它允许你在IDE或代码编辑器中直接调用Google Stitch的设计工具，无缝衔接代码编写与UI设计工作流。
使用方式非常简单，通过npm安装后，你可以在你的开发环境中直接运行相关命令或调用API，生成设计组件、编辑现有设计或管理设计资产，所有操作都无需离开你当前的编码会话。
它非常适合全栈开发者、前端工程师以及任何在Pi开发环境中工作，并希望将UI设计流程深度整合到编码工作流中的技术人员。
建议在开始前确保你的开发环境已正确配置Pi和相关的设计资源访问权限。使用时注意网络连接，因为可能需要与Google Stitch服务进行交互。对于复杂的设计系统，建议先从小范围组件开始尝试集成。
核心特点
它深度集成了Google Stitch的设计能力到Pi开发环境中，实现了在编码会话中直接操作设计资产，而同类工具往往需要独立的GUI应用或在浏览器中操作，导致工作流割裂。
注意事项
不适合需要高度复杂视觉交互或离线环境下的精细UI设计场景。
常见问题
需要先安装Google Stitch吗？
不需要单独安装完整Stitch，但需要有效的Stitch服务访问权限。
支持哪些设计文件格式？
主要支持Stitch原生格式，可与常见代码组件格式交互。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/zyvra-labs-pi-stitch-tools/raw/index.md 读取 @zyvra-labs/pi-stitch-tools 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/zyvra-labs-pi-stitch-tools/raw/index.md（查看排版版本）