借助 Google Stitch 2.0 与 OpenClaw，仅用 30 分钟即可产出一套完整的 Landing Page 设计稿，并附带可直接交付开发的 HTML/CSS 代码。
无需使用 Figma，无需设计经验，也无需聘请设计师。你只需提供一段文字描述，Stitch 便能自动生成高保真设计以及对应的 Tailwind 代码。
本文将完整拆解：如何接入 Stitch、怎样编写 prompt 才能获得高质量设计、如何避免“一眼 AI 味”的视觉风格，以及整套设计流程的每一步具体操作。
01 Stitch 2.0 是什么：独立 AI 设计平台，而非 Figma 插件
这是 Google 今年推出的免费 AI 设计工具。它的核心能力包括：
- 你使用文字描述需要的页面 → 它生成高保真设计（不是线框图，而是真实网站效果）
- 同时输出完整的 HTML/CSS 代码（基于 Tailwind），可直接使用
- 支持多屏原型、自动生成 Design System、一键导出 Astro 项目
和其他 AI 设计工具相比，Stitch 有何不同？
| 工具 | 输出 | 代码 | 价格 |
|---|---|---|---|
| v0 (Vercel) | React 组件 | ✅ 但风格固定 | 免费额度少 |
| Bolt.new | 全栈应用 | ✅ 但偏重功能 | 订阅制 |
| Lovable | 全栈应用 | ✅ 但设计一般 | 订阅制 |
| Stitch 2.0 | 高保真设计 + Tailwind | ✅ 设计质量最高 | 完全免费 |
Stitch 的差异化优势在于：它由 Google 打造，设计审美明显优于同类工具，并且完全免费。
02 接入 Stitch：两种方式
方式一：网页版（最简便，适合手动操作）
- 打开 stitch.withgoogle.com
- 使用 Google 账号登录
- 创建项目，输入描述，等待约 2 分钟
- 获取设计稿及代码
方式二：MCP 命令行（适合自动化，OpenClaw 采用此方式）
# 安装 stitch-mcp CLInpm install -g @_da videast/stitch-mcp# 认证（需要 Google Cloud 账号）gcloud auth application-default login# 或者用 Stitch API Key（从 Stitch 设置页获取）export STITCH_API_KEY="your_key"MCP 核心命令：
# 创建项目npx @_da videast/stitch-mcp tool create_project -d '{"title": "CharGen.ai"}'# 从文本生成设计稿npx @_da videast/stitch-mcp tool generate_screen_from_text -d '{"projectId": "xxx", "prompt": "你的描述", "deviceType": "DESKTOP"}'# 获取 HTML/CSS 代码npx @_da videast/stitch-mcp tool get_screen_code -d '{"projectId": "xxx", "screenId": "yyy"}'# 导出完整 Astro 项目npx @_da videast/stitch-mcp tool build_site -d '{"projectId": "xxx"}'在 OpenClaw 环境中，墨影（设计 Agent）会直接调用这些命令，实现全自动流程。
03 Prompt 怎么写：8 个字段，缺一不可
Stitch 的输出质量 90% 取决于你的 prompt。如果随意写一句“帮我做一个 AI 工具的落地页”，得到的结果必然是千篇一律、充满 AI 味的模板。
一份优秀的 Stitch prompt 应包含以下 8 个字段：
1. 产品名 + 一句话定位 CharGen.ai — AI 角色生成器，一键生成角色头像+完整人设卡2. 目标用户 DnD 玩家、小说创作者、独立游戏开发者3. 配色要求 深色底（#0A0F1C）+ 赛博青（#00E5CC）强调 + 琥珀金辅助4. 页面结构（逐 section 描述） Hero：暗色背景 + 发光输入框 + 右侧浮现角色卡预览 Gallery：3 个不同类型角色卡（战士/动漫/科幻） How It Works：3 步流程（描述→生成→导出） Use Cases：DnD / 小说 / 游戏 / Anime 四张卡片 Features：高对比特性网格 Pricing：Pro 用赛博青发光边框 FAQ：暗色手风琴 Footer：简洁链接5. 消息层级 主标题：Generate Characters Instantly 副标题：Portrait + backstory + stats in 30 seconds CTA：Create My Character — Free6. 定价信息 Free：3/天 | Pro $9/月（200次）| Lifetime $1997. 设计调性关键词 Gaming、Fantasy、Premium、Dark Mode8. 反 AI 味要求（重要！） 不要紫蓝渐变、不要对称 3 列、不要 emoji 做 icon、 不要每个 section 背景色交替白/灰为什么要特别注明“反 AI 味要求”？
因为 AI 生成的设计常常带有一些典型特征——紫蓝渐变、完美对称的三列布局、抽象的 3D 球体、大量 emoji 作为图标。用户一眼就能辨别出“这是 AI 做的”。
在 prompt 中明确要求“避免这些特征”，最终输出的设计质量会显著提升。
04 实战：chargen.ai 的设计是怎么出来的
我们利用上述 8 字段 prompt，让 Stitch 生成了 chargen.ai 的 Landing Page。
大约 2 分钟后，Stitch 返回了一个完整的页面设计。以下是实际产出，采用 1440px 宽度的实际分辨率截图：
Hero 区：深色背景 + 赛博青强调 + 右侧浮现角色卡（附带 STR/DEX/INT 属性值），左侧输入框的 placeholder 显示“Describe a cybernetic knight in neon armor...”
角色画廊：3 个不同风格的示例角色（战士、动漫少女、魔法师），直观展示生成能力的多样性。
How It Works + 场景展示：3 步流程加上使用场景说明。
Features Grid：涵盖 6 大功能——图片与人设一键生成、多风格模板、结构化导出、DnD 模式、Anime 风格、快速生成。每个功能都配有独立的场景配图。
Pricing 区（截图中还包含了 FAQ 部分）：
与此同时，系统自动生成了名为“Aether Forge”的 Design System：
- 字体：Space Grotesk
- 主色：深色 #0A0F1C 底 + 赛博青 #00E5CC
- 琥珀金辅助色
- 圆角、阴影、间距等全部预先定义
并且输出了完整的 HTML/CSS 代码——13KB+ 的 Tailwind 代码，下载后可直接使用。
05 设计审查：出来后还要检查什么
虽然 Stitch 的输出质量很高，但并非拿来就能直接上线。以下 7 个细项必须逐一核查：
Stitch 专属检查清单：
- 配色是否与你的要求一致（Stitch 有时会微调色值）
- 文案是否使用了占位符（Stitch 常会使用 Lorem ipsum 或自行编撰的文案）→ 必须替换为你已定稿的文案
- 图片是否引用了 Google CDN 临时图（src 指向 Google 服务器）→ 必须替换为你自己的图片
- 是否有 emoji 用作图标（如有，让开发替换为 SVG）
- 移动端响应式是否合理（多数情况下 Tailwind 处理得不错，但复杂布局仍需人工检查）
- 字体是否与品牌要求一致（Stitch 可能采用默认字体）
- 定价数字是否使用了经过审核的版本（而非 PRD 原始数字）
反 AI 味二次检查：
- ❌ 紫蓝渐变 + 白色大标题 + 居中布局
- ❌ 所有图标均为同一套线性图标 + 完美对称 3 列
- ❌ Hero 区放置抽象 3D 渲染球体
- ❌ 每个 section 背景色交替白/灰
- ❌ “Revolutionize” / “Empower” / “Seamless” 等 AI 味文案
06 精修和迭代：不满意就改
Stitch 支持在已有设计的基础上进行迭代，无需从头重新生成。
# 修改已有设计npx @_da videast/stitch-mcp tool edit_screens -d '{"projectId": "xxx","prompt": "把 Hero 区的输入框改成圆角更大的样式，CTA 按钮换成琥珀金色","screenIds": ["yyy"]}'常见的精修操作包括：
- 调整配色细节
- 更改 section 顺序
- 切换 Hero 模式（Tool-First / Demo-First / Split）
- 补充缺失的 section
每次精修仅需 2 分钟。而传统设计改稿通常要耗费半天时间。
07 SEO 矩阵页：批量生成子页面
工具站通常不只有一个首页。PRD 中定义了 6 个子场景页（anime / dnd / fantasy / game / oc / random），每个页面都对应独立的目标关键词。
传统方式：每个页面单独设计 → 20 分钟/页 × 6 = 120 分钟
Stitch 方式：基于已有设计修改 prompt → 2 分钟/页 × 6 = 12 分钟
npx @_da videast/stitch-mcp tool generate_screen_from_text -d '{"projectId": "xxx","prompt": "基于已有 Landing Page 风格，为 anime character generator 生成专属页面。Hero 标题改为 AI Anime Character Generator。Demo 示例换成动漫角色。Use Cases 聚焦动漫创作者。保持相同 Design System。","deviceType": "DESKTOP"}'同一套 Design System，不同内容与侧重点，批量产出。
08 代码导出：拿走就能开发
最后一步：将设计稿的代码导出。
# 导出单个页面的 HTML/CSSnpx @_da videast/stitch-mcp tool get_screen_code -d '{"projectId": "xxx", "screenId": "yyy"}'# 导出完整 Astro 项目（所有页面打包）npx @_da videast/stitch-mcp tool build_site -d '{"projectId": "xxx"}'开发人员拿到代码后需要做什么：
| 以前（没有 Stitch） | 现在（有 Stitch） |
|---|---|
| 从零编写 HTML/CSS | 已有完整 HTML，仅需微调 |
| 猜测设计意图 | 查看设计稿截图即可明确 |
| 自行选择字体/配色 | Design System 已内置于代码中 |
| 手动实现响应式 | Tailwind 已处理 |
| 重点：全部 | 重点：替换文案 → 替换图片 → 补充 JS 交互 → 对接 API → 部署 |
09 完整流程和时间对比
传统流程：
- 调研竞品 → 10 分钟
- 绘制线框图 → 30 分钟
- Figma 出高保真设计 → 2-4 小时
- 开发还原设计 → 1-2 天
- 反复改稿三次 → 半天
- 总计：2-3 天
Stitch 流程：
- 调研竞品 → 10 分钟
- 编写 8 字段 prompt → 5 分钟
- Stitch 生成 3 个方向 → 6 分钟（2 分钟 × 3）
- 选定方向并精修 → 5 分钟
- 检查并导出代码 → 5 分钟
- SEO 矩阵页（6 个）→ 12 分钟
- 总计：约 45 分钟
从 2-3 天压缩到 45 分钟。而且输出的不再是设计图，而是可直接投入使用的代码。
10 你自己动手需要什么
- Google 账号（Stitch 完全免费）
- PRD 文档，或至少明确页面需要哪些 section（没有结构就开始设计 = 返工）
- 文案定稿（没有文案就开始设计 = 返工两次）
- 竞品 URL 2-3 个（不调研竞品就着手 = 设计风格与他人雷同）
如果要实现自动化（OpenClaw 方式）：5. 安装 stitch-mcp CLI
- 配置 gcloud 认证或 Stitch API Key
- 为设计 Agent 编写一份 playbook（包含 8 字段 prompt 模板 + 7 项检查清单）
以前独立开发者做站最头疼的就是设计环节。代码你能写，文案你能想，但设计——要么花钱请人，要么自己做出一个“技术人审美”的页面。
Stitch 2.0 把这个门槛彻底拉平了。它免费、无需设计基础、输出质量高、还附带代码。
你现在唯一需要的能力是写一段好的 prompt。而好的 prompt 就是上面那 8 个字段——产品定位、目标用户、配色、页面结构、消息层级、定价、调性、反 AI 味。
工具已经就绪。30 分钟，就能产出一套以前需要设计师花费三天才能完成的页面。
