stitch-sdk
文本提示生成UI界面，获取HTML和截图
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：stitch-sdk。 它的用途是：文本提示生成UI界面，获取HTML和截图 完整的 Skill 内容见：https://321skill.com/skills/stitch-sdk/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用Stitch SDK生成一个登录页面，包含邮箱和密码输入框，以及一个深色主题的变体'。它会调用generate方法生成基础HTML和截图，再通过edit或variants方法生成深色主题变体，并返回所有可下载链接。
介绍
Stitch SDK 解决了从文本描述快速生成UI界面的需求，省去手动编写HTML/CSS的繁琐过程。它通过简单的API调用，即可将自然语言描述转化为可用的HTML页面和对应的截图，极大提升原型设计和界面迭代的效率。
使用方式很直接：安装 npm 包后，设置API密钥，调用 stitch.project('project-id').generate('描述') 即可生成界面。生成的屏幕支持编辑、批量生成变体（不同配色、布局等），并可通过 getHtml() 和 getImage() 获取下载链接。此外，它提供工具客户端（MCP）和Vercel AI SDK集成，方便智能体或自动化脚本直接调用。
适合前端开发者、UI设计师、产品经理以及需要快速验证界面方案的智能体开发者。当你需要快速搭建原型、探索多种设计方向、或为AI对话系统动态生成UI时，Stitch SDK 能显著缩短从想法到可视化的周期。
使用前需准备好Google API密钥，并注意生成结果依赖底层模型，复杂交互场景可能需多次迭代调整。建议将生成的HTML作为起点，再手动微调以满足最终设计规范。
核心特点
与同类工具（如v0.dev、Screenshot to Code）相比，Stitch SDK 提供原生Node.js SDK和Vercel AI SDK集成，可直接嵌入代码工作流，并支持项目管理、屏幕编辑、变体生成等编程化操作，更适合自动化开发流程。
注意事项
生成的UI界面精细度有限，复杂交互或高保真设计需手动调整；依赖Google API服务，需网络和API密钥。
常见问题
需要Google API密钥吗？
是的，需要设置STITCH_API_KEY环境变量，并有一个有效的项目ID。
支持生成哪些类型的UI？
任何文本描述的UI均可生成，如登录页、仪表盘、表单等，支持通过编辑和变体调整细节。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/stitch-sdk/raw/index.md 读取 stitch-sdk 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/stitch-sdk/raw/index.md（查看排版版本）