一句话生成一整套UI页面的skill

​

这里给大家介绍介绍stitch这个产品是做什么的以及怎么更好的使用它。简单说，Stitch 就是"你说，它画"。告诉它你想要什么界面，它直接给你出设计稿，还支持导出到 Figma、AI Studio 等工具里。​

​

​

​

三大更新亮点​

这次更新主要有三个亮点我很喜欢，不仅重构了整个UI，还支持了无限画布​

语音交互​

现在打开麦克风直接对着它说想法就行，Stitch 会一口气生成一系列设计图。​

​

​

实时预览​

生成的 UI 不再是一张死图。拿这个播放器UI举例，你能直接点按钮、看交互，实打实先体验一遍。​

​

​

3.统一并且复用风格​

你可以让 Stitch 读取现有网站的配色，提取后自动生成设计稿，也能导出为 DESIGN.md 文件。​

​

​

如果你已经有自己项目的 DESIGN.md，直接导入 Stitch 即可保持风格一致。​

​

​

Google 还特地起了个名叫 Vibe Design。现在你甚至可以用 一句提示词生成整个 App 流程，包含多个页面和主题。比如下面这条提示词：​

​

Create a mobile e-commerce app with home, product detail, cart, and checkout screens​

​

​

​

这是我之前生成的效果也不错​

​

​

​

Stitch SDK​

这里要强推一下 Stitch SDK——可以理解为 Stitch 的 CLI 版本，专门给 Agent 调用的。你不需要手动去网页端对话，让 Agent 根据项目需求自动调用 Stitch 就行。API Key 在这里创建，还能查看每日剩余额度。​

​

​

这几天基于 SDK 做了一个套壳Agent：​

•

仅需提供后端 API 文档​

•

自行选择/导入主题（或你自己的 DESIGN.md）​

•

一键生成对应的前端页面​

后续会开源，敬请期待。​

NotebookLM CLI​

这里再推荐自己写的一个NotebookLM cli项目：让agent能自动化操作NotebookLM ​

自己利用NotebookLM cli搭配stitch sdk打造了属于自己的每日播客app和web​

网站原理如下：​

•

NotebookLM调研+生成播客​

•

利用whisper转字幕实现自动推送​

•

github上传到vercel​

•

音频自动推送到cloudflare R2并转换成URL​

•

把URL塞进页面实现全自动推送​

​

​

Stitch 设计技能​

一套适用于Google Stitch的智能体技能与插件集合，遵循Agent Skills开放标准。兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 以及 OpenCode 等编码型智能体（需手动安装）。​

快速入门​

Install Plugins (Recommended)，在全球范围内快速搭建完整的 Stitch 插件套件的最便捷方式。​

Codex​

添加 Stitch Skills 市场，然后安装您所需的插件。​

通过 CLI（推荐）​

​

代码块​

JavaScript

codex plugin marketplace add google-labs-code/stitch-skills --ref main \​

--sparse .agents/plugins \​

--sparse plugins/stitch-design \​

--sparse plugins/stitch-build \​

--sparse plugins/stitch-utilities​

​

​

[!提示] 该--sparse标志是可选的——它们会将检出范围限制为仅包含列出的路径，从而实现更快的克隆。若省略这些标志，则会拉取整个仓库。​

​

通过 Codex UI​

Navigate to Settings → Plugin Marketplaces → Add and fill in:​

​

​

一旦市场注册完成，即可安装任意组合的：​

•

stitch-design— 以设计为主的技能​

•

stitch-build— 构建与组件技能​

OpenCode 不使用npx plugins/npx skills或 Codex/Claude 市场的布局。请手动安装技能和 Stitch MCP 服务器：​

•

stitch-utilities— 实用工具与辅助技能​

OpenCode​

技能— 将您所需的技能文件夹复制到一个可被发现的路径下：​

​

代码块​

Markdown

# Project-local (recommended)​

mkdir -p .opencode/skills​

cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design​

# repeat for other skills under plugins/*/skills/​

​

OpenCode 还能发现.claude/skills/以及.agents/skills/​

​

这是 GitHub 仓库页面，标题为“GitHub - google-labs-code/stitch-skills：一个旨在与 Stitch MCP 服务器配合使用的 Agent Skills 库。每项技能都遵循 Agent Skills 开放标准……”。这是一个名为“GitHub - google-labs-code/stitch-skills：一个旨在与 Stitch MCP 服务器配合使用的 Agent Skills 库。每项技能都遵循 Agent Skills 开放标准……”的 GitHub 仓库页面。​

​

这是 GitHub 仓库页面，标题为“GitHub - google-labs-code/stitch-skills：一个旨在与 Stitch MCP 服务器配合使用的 Agent Skills 库。每项技能均遵循 Agent Skills 开放标准……”。​

​

代码块​

Bash

​

替换YOUR_STITCH_MCP_URL使用 Stitch MCP 配置流程中的端点（该指南中的凭据/环境变量仍然适用）。​

技能说明中的工具名称可能与 OpenCode 内置工具不同（webfetch / bash而非web_fetch / run_command）。在将技能适配至 OpenCode 时，请优先使用 OpenCode 的工具名称。​

先决条件​

这些技能需要在您的代理环境中配置并运行Stitch MCP服务器。请确保您已按照Stitch MCP 安装指南完成服务器的注册，并正确设置相应的环境变量和凭据。​

​

这是 GitHub 仓库页面，标题为“GitHub - google-labs-code/stitch-skills：一个旨在与 Stitch MCP 服务器配合使用的 Agent Skills 库。每个技能都遵循 Agent Skills 开放标准……”。​

​

可用插件​

Design (stitch-design)​

在 Stitch 中创建、管理和优化设计的核心工作流。​

​

​

​

​

Build (stitch-build)​

根据 Stitch 设计进行代码生成、框架集成与资源编译。​

​

​

​

​

Utilities (stitch-utilities)​

用于增强提示、生成设计规范并落实设计标准的辅助工具。​

​

​

仓库结构​

​

代码块​

Plain Text

plugins/​

├── stitch-design/ — Core design workflow plugin​

│ ├── plugin.json​

│ └── skills/​

│ ├── code-to-design/​

│ ├── generate-design/​

│ ├── manage-design-system/​

│ ├── extract-design-md/​

│ ├── extract-static-html/​

│ └── upload-to-stitch/​

​

每项技能均遵循Agent Skills标准：​

​

代码块​

Plain Text

​