技能介绍

界面设计与代理工作流之间的断层

UI 设计交付长期存在一个断点：人用 Stitch 画原型、调布局、定视觉，代码却要在另一个工具链里重写。哪怕团队已经把 agent 接入 Cursor、Claude Code 或 Codex，生成的页面仍然脱离设计稿，配色、间距、组件层级都要重新沟通。这个技能要解决的问题很直接：把 Stitch 的 MCP 工具链和 Agent Skills 接起来，让 agent 在同一个工作流里生成屏幕、上传设计资产、提取设计系统，并把 Stitch 设计转成可落地的应用代码。

技能如何接入代理工作流

技能的核心是给运行时补上 Stitch 能力。前提是 agent 能加载 Agent Skills 或插件，并且已经按 Google Stitch 文档配置好 Stitch MCP server。运行时启动后，技能会把以下能力挂进工作流：

生成界面：根据需求描述或截图，在 Stitch 里产出可预览的屏幕，而不是只输出文字方案。
资产同步：把现有设计资产上传到 Stitch，让 agent 有可引用的上下文。
设计系统提取：从已有设计中抽离颜色、组件、排版规则，减少每次生成的漂移。
设计转代码：把 Stitch 设计转换成应用代码，让界面不再停留在原型阶段。

适用时要注意边界。上游技能之间常有依赖，不要只挑一两个安装，否则运行时可能找不到前置能力。OpenCode 对技能命名有 lowercase kebab-case 要求，目录名和 frontmatter 的 name 必须一致；如果上游用了 stitch::… 这类非 kebab 名称，需要先改名才能加载。它也不是一键产出生产代码的魔法盒，而是把 Stitch 的设计操作变成 agent 可调用的步骤，最终质量和稳定性仍取决于 MCP 配置、设计系统规范和下游工程约束。