本文目录
很多人用 Codex 做 AI 编程时，会卡在一个很现实的问题上：功能可以让 Agent 写，但页面设计从哪里来？
如果只是让 Codex 凭空写一个网页，它能生成布局，也能补 CSS，但结果经常会偏模板化。真正想做一个能看的产品页面，最好先有一个更清晰的设计输入：页面目标、用户场景、视觉方向、组件层级、交互重点，以及可以继续落地的前端结构。
这就是 Stitch Skills 值得关注的地方。它不是单纯又多了一个“输入一句话出页面”的玩具，而是把 Google Stitch 的 AI 设计能力接进 Codex 这类编程 Agent，让网页设计、设计系统和前端实现可以进入同一条工作流。
Stitch 是什么？#
Stitch 是 Google Labs 推出的 AI UI 设计工具。Google 在官方介绍里把它称为 AI-native software design canvas，也就是一个用 AI 辅助创建、迭代和协作的设计画布。
你可以用自然语言描述页面，也可以上传图片、线框图或截图作为参考，让 Stitch 生成网页或 App 界面。生成后可以继续调整设计、探索多个版本，并把结果交接到 Figma 或开发工具中。
从开发者视角看，Stitch 的价值不只是“出图快”，而是它能把模糊的页面想法先变成一个可讨论、可迭代、可交付的界面基础。
Stitch Skills 是什么？#
google-labs-code/stitch-skills 是 Google Labs Code 在 GitHub 上开源的 Agent Skills 仓库。它遵循 Agent Skills 开放标准，目标是让 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等编码 Agent 都能使用 Stitch 相关能力。
简单理解：
- Stitch 负责生成和管理设计
- Stitch MCP 负责让 Agent 访问 Stitch 项目
- Stitch Skills 负责告诉 Codex 这类 Agent 应该怎样调用、整理、转换和落地这些设计能力
所以它解决的不是单点生成问题，而是“从设计到交付”的流程问题。
仓库里也明确提醒：这些 Skills 需要配置并运行 Stitch MCP。如果没有 MCP 和对应凭证，插件装上以后也无法真正访问你的 Stitch 项目。
三组核心能力#
Stitch Skills 主要分成三组：设计、构建和工具。
1. stitch-design：从想法到设计稿#
stitch-design 偏设计阶段，适合用来生成页面、编辑已有设计、管理设计系统，或者从本地前端项目里提取设计资料。
它覆盖的典型任务包括：
- 根据文字或图片生成新的页面设计
- 对已有登录页、首页、仪表盘等界面做改版
- 生成多个设计变体进行比较
- 管理和应用
DESIGN.md设计系统 - 从本地前端代码中提取设计系统
- 从运行中的网页提取静态 HTML 快照
- 把本地图片、HTML 或 mockup 上传到 Stitch 项目
如果你想让 Codex 做网页设计，但又不希望它凭空发挥，stitch-design 更适合作为第一步。
2. stitch-build：从设计稿到代码#
stitch-build 偏实现阶段。它的重点是把 Stitch 里的页面继续变成可以进入工程项目的前端代码。
仓库里列出的方向包括：
- 把 Stitch 页面转换成 React 组件系统
- 生成 React Native 相关实现
- 结合 shadcn/ui 做组件化应用
- 用 Remotion 生成设计 walkthrough 或演示视频
这组能力更适合已经有设计稿，希望 Codex 继续做代码落地的人。
比如你已经在 Stitch 里确认了一个 SaaS 首页结构，就可以让 Codex 基于这个设计输出 React 组件，并检查响应式布局、设计 token 和组件一致性。
3. stitch-utilities：提示词、规范和多页网站#
stitch-utilities 更像辅助工具箱。
它可以帮你把模糊的界面想法改写成更适合 Stitch 的设计提示词，也可以从 Stitch 项目生成 DESIGN.md，还可以用循环工作流生成多页网站。
适合的场景包括：
- 你只有一句“做一个设置页”，需要把它扩展成更完整的设计提示词
- 你想把某个 Stitch 项目的视觉风格沉淀成设计规范
- 你想生成一个多页作品集、官网或产品介绍站
- 你想让多个页面保持统一的视觉标准
我的建议是：新手不要一上来就跑多页网站。先用一个页面验证效果，确认提示词、设计风格、导出质量和 Codex 实现方式都能跑通，再扩展到更多页面。
不太写代码的人怎么用？#
如果你不太写代码，只是想快速做一个网页草图，最短路径不是先安装整套插件，而是先去 Stitch 网页版做一张真实页面。
你可以这样写需求：
页面目标：为一个 AI 编程教程网站设计 Skill 栏目首页。
主要用户：正在学习 Codex、Claude Code、MCP 和 AI Agent 的中文开发者。
必须出现：栏目标题、精选 Skill 卡片、适用场景、安装方式、最新文章列表。
风格限制：信息密度适中，偏开发者工具站，不要营销感太重，不要大面积紫色渐变。
输出要求：生成两个不同版本，一个偏文档目录，一个偏产品推荐页。先生成两个版本，对比信息结构和视觉方向。确认后再导出 HTML 或转到 Figma。这个时候再让 Codex 接着实现，效果通常比直接让 Codex 从零写页面更稳定。
Codex 里怎么接 Stitch Skills？#
如果你想在 Codex 中使用 Stitch Skills，可以走插件市场方式。
在 Codex 的 Settings → Plugin Marketplaces 中添加仓库：
Source: https://github.com/google-labs-code/stitch-skills
Git ref: main添加 marketplace 后，再按需要安装：
stitch-design
stitch-build
stitch-utilities不建议一次性把所有能力都装上。你只是做设计草图，就先装 stitch-design；你要把设计转 React，再补 stitch-build；你要做提示词增强、多页循环或设计规范，再考虑 stitch-utilities。
如果你更习惯命令行，仓库 README 也提供了 Codex CLI 形式的 marketplace 添加命令。实际使用前建议直接查看仓库最新 README，因为插件路径、稀疏拉取路径和依赖说明可能会更新。
还有一个更简单的办法：在 Codex 里新建一个对话，把 https://github.com/google-labs-code/stitch-skills 发给它，让 Codex 帮你检查仓库说明、添加 marketplace、选择需要安装的 Skill，并提醒你配置 MCP。
但这里要注意，Codex 能帮你安装和改配置，不等于它能自动拿到 Stitch 权限。Stitch MCP、环境变量、账号凭证仍然需要你自己确认和授权。
推荐工作流：先设计，再实现#
我更推荐下面这条路径：
1. 先用 Stitch 网页版或 stitch-design 生成单页设计
2. 对比 2 到 3 个版本，选出信息结构最清楚的一版
3. 导出 HTML、Figma，或通过 Stitch MCP 让 Codex 读取项目
4. 让 Codex 按当前项目技术栈实现页面
5. 要求 Codex 做移动端、桌面端和关键组件自检
6. 最后再由你检查视觉细节和真实内容
给 Codex 的实现提示词可以这样写：
请基于 Stitch 生成的这个页面设计，实现到当前项目中。
要求：
- 先阅读项目结构、样式系统和组件写法，不要立即改文件
- 保留设计中的信息层级、间距节奏和主要视觉特征
- 使用当前项目已有组件和 CSS 变量，不引入新 UI 框架
- 移动端和桌面端都要可用
- 不要只追求像截图，要保证页面内容真实、结构可维护
- 完成后运行语法检查，并说明哪些地方和原设计存在差异这个提示词的重点是让 Codex 把 Stitch 当成设计输入，而不是让它机械复制一张图。真实项目里，组件规范、响应式布局、可维护性往往比像素级复刻更重要。
什么时候不适合用 Stitch Skills？#
Stitch Skills 很适合网页设计探索和设计到代码的衔接，但不是所有场景都应该上这套流程。
如果你只是想做一张很简单的活动页，网页版 Stitch 可能就够了。
如果你已经有成熟的 Figma 设计系统，团队也有严格组件库，那么 Codex 直接从 Figma 或项目组件库实现，可能更贴近生产规范。
如果你没有配置 MCP，也不想处理凭证和项目授权，那就不要急着装插件。先用 Stitch 网页版生成设计，再把导出的 HTML、截图或 Figma 结果交给 Codex，会更省事。
使用建议#
我的建议很简单：
- 只做灵感图：用 Stitch 网页版
- 做单页设计探索：用
stitch-design - 从设计转 React：再加
stitch-build - 做多页网站或设计规范：再考虑
stitch-utilities - 没配置 Stitch MCP：不要期待 Codex 能直接访问 Stitch 项目
- 不确定效果：先做一个页面，不要一上来全站重构
Skill 的价值不在于装得多，而在于让某个重复流程变得稳定。Stitch Skills 真正值得关注的地方，是它把设计稿、设计系统和代码实现放进了同一条 Agent 工作流。
先从一个页面试，跑通再扩。对大多数 Codex 用户来说，这比直接追求“一句话生成整站”更可靠。