Stitch 界面生成器
用文字或图片生成、编辑并探索 Stitch 界面设计。
技能明确要求通过 Stitch MCP 处理项目、屏幕和设计资产，并声明部分工具权限；但同时授予 Bash、Write 和 web_fetch，要求下载远程 HTML/截图并覆盖本地文件，缺少用户确认、最小权限说明、数据流/敏感数据处理、回滚和来源验证，因此扣分。未见恶意外传、凭据窃取或破坏性默认行为。
文本为四种主要流程提供了较完整的步骤、参数示例和迭代建议，但没有针对项目不存在、工具失败、无效输出、下载失败或元数据冲突的诊断式错误处理；`run_command` 与允许工具列表也存在命名不一致。静态证据不足以超过10分上限，因此扣分。
文本清楚覆盖文本生成、图片生成、编辑和变体场景，并给出基本输入与设备类型；但未明确非适用范围、触发排除条件、中文交互支持或网络可达性。核心功能依赖 Stitch MCP、凭据及可能的海外服务，面向中国大陆用户的可用性未得到说明，因此扣分。
技能采用分层结构，包含流程、提示词模板、参考资料和示例；仓库提供 Apache-2.0、Security Policy 及有限的 CI 信息。但选定技能没有版本、变更记录、维护责任、更新路径、故障排查或依赖安装说明，且依赖其他技能的关系未充分落地，因此扣分。
目标、流程和预期的 Stitch 输出组件及本地设计资产基本明确，核心任务在 happy path 上具有直接价值；但 HTML/截图下载、元数据更新和结果验证依赖未展示的工具行为与外部服务，且没有可验证的代表性结果。静态校准下不超过7分，故扣分。
选定文件及其引用资料可审计，且仓库存在真实 CI 工作流；但该 CI 仅验证 react-components 的示例，不覆盖 generate-design 的关键路径，也没有针对本技能的测试、第三方执行证据或多源交叉验证，因此仅给有限分数。
- 使用前应确认 Stitch MCP、凭据和相关依赖已配置，并评估中国大陆网络可达性。
- Bash、web_fetch 和 Write 权限较宽；下载或覆盖 `.stitch/designs`、更新 `.stitch/metadata.json` 前应要求用户确认并保留可恢复副本。
- 应补充失败反馈、输入校验、版本/变更记录，以及覆盖本技能关键路径的测试。
- 需要核实被引用的 manage-design-system、upload-to-stitch 技能和 references/examples 文件在安装包中可达且版本一致。
这个 Skill 能做什么，适合哪些场景？
这是一个面向 Google Stitch MCP 的界面设计技能。它可从文字描述或图片生成新屏幕，编辑已有屏幕，并创建布局、配色或内容变体。技能会先分析项目和设计系统，再将模糊需求整理为结构化 UI/UX 提示词。使用前需要在代理环境中配置并运行 Stitch MCP 服务器。
读取用户的文字描述、图片或现有屏幕需求；通过 Stitch MCP 的项目、设计系统和屏幕工具查找或创建项目；增强提示词并调用 generate_screen_from_text、edit_screens 或 generate_variants；展示 outputComponents 中的文字描述和建议；将生成或编辑结果的 HTML 与截图下载到 .stitch/designs；编辑流程还会更新 .stitch/metadata.json。
- 产品设计师需要根据一句产品构想快速生成桌面端或移动端新屏幕。
- 前端或产品团队需要根据截图或 mockup 在 Stitch 中重建界面。
- 设计师需要对已有登录页、首页或仪表盘进行局部结构和内容修改。
- 设计团队需要为现有屏幕探索多个布局、配色、图片或文本方向。
- 使用 Stitch MCP 的开发者希望把生成结果保存为本地 HTML 和截图资产。
这个 Skill 有哪些优点和局限？
- 覆盖文字生成、图片重建、已有屏幕编辑和设计变体四类流程。
- 包含项目识别、设计系统检查、提示词增强和结果下载步骤。
- 支持将 HTML、截图及编辑后的元数据保存到本地 .stitch 目录。
- 遵循 Agent Skills 开放标准，并兼容 Codex、Claude Code 等编码代理。
- 必须配置并运行 Stitch MCP 服务器，且需要相应环境变量和凭据。
- 图片生成流程依赖 upload-to-stitch 技能，缺少设计系统时还需 manage-design-system 技能。
- 源材料未提供测试套件、性能指标或各平台的实际验证结果。
- 生成流程禁止加入颜色、字体和主题指令，部分视觉调整需要改用编辑流程。
如何安装这个 Skill？
先确保代理环境已配置并运行 Stitch MCP 服务器。安装整个技能集合可运行：npx skills add google-labs-code/stitch-skills。使用 Codex 时，也可将 https://github.com/google-labs-code/stitch-skills 添加为插件市场，并安装 stitch-design 插件。源材料未提供只安装 generate-design 单个技能的独立命令。
如何使用这个 Skill？
配置 Stitch MCP 后，用自然语言描述任务，例如：“Make a browse tab for a mobile app for romance and date night ideas.”；也可请求：“Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue.”，或：“Generate 3 design variants of the home screen with dark mode and high-density layouts.”。技能会根据请求选择文字生成、图片生成、编辑或变体流程。若项目没有设计系统，生成前需先处理设计系统；图片流程还依赖 upload-to-stitch 技能。