不会设计也能做站：我用 OpenClaw + Stitch 2.0 半小时出了整套设计稿和代码

大家好，我是孟健。

我用 Google Stitch 2.0 + OpenClaw，30 分钟出了一套完整的 Landing Page 设计稿------带 HTML/CSS 代码，可以直接交给开发。

不需要 Figma，不需要设计基础，不需要请设计师。你只需要一段文字描述，Stitch 就能生成高保真设计 + Tailwind 代码。

今天完整拆解：怎么接入 Stitch、怎么写 prompt 才能出好设计、怎么避免"一眼 AI 味"、以及整套设计流程的每一步具体操作。

01 Stitch 2.0 是什么：不是 Figma 插件，是独立的 AI 设计平台

Google 今年推出的免费 AI 设计工具。核心能力：

你用文字描述想要的页面 → 它生成高保真设计（不是线框图，是真实网站效果）
同时输出完整 HTML/CSS 代码（Tailwind），可以直接用
支持多屏原型、Design System 自动生成、一键导出 Astro 项目

跟其他 AI 设计工具的区别：

工具	输出	代码	价格
v0 (Vercel)	React 组件	✅ 但风格固定	免费额度少
Bolt.new	全栈应用	✅ 但偏重功能	订阅制
Lovable	全栈应用	✅ 但设计一般	订阅制
Stitch 2.0	高保真设计 + Tailwind	✅ 设计质量最高	完全免费

Stitch 的差异化在于：它是 Google 做的，设计审美比同类工具高一个档次，而且完全免费。

02 接入 Stitch：两种方式

方式一：网页版（最简单，适合手动操作）

打开 stitch.withgoogle.com
Google 账号登录
创建项目，输入描述，等 2 分钟
拿到设计稿 + 代码

方式二：MCP 命令行（适合自动化，OpenClaw 用这种）

bash 复制代码

# 安装 stitch-mcp CLI
npm install -g @_davideast/stitch-mcp

# 认证（需要 Google Cloud 账号）
gcloud auth application-default login
# 或者用 Stitch API Key（从 Stitch 设置页获取）
export STITCH_API_KEY="your_key"

MCP 核心命令：

bash 复制代码

# 创建项目
npx @_davideast/stitch-mcp tool create_project \
  -d '{"title": "CharGen.ai"}'

# 从文本生成设计稿
npx @_davideast/stitch-mcp tool generate_screen_from_text \
  -d '{"projectId": "xxx", "prompt": "你的描述", "deviceType": "DESKTOP"}'

# 获取 HTML/CSS 代码
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 导出完整 Astro 项目
npx @_davideast/stitch-mcp tool build_site \
  -d '{"projectId": "xxx"}'

在 OpenClaw 里，墨影（设计 Agent）直接调这些命令，全自动。

03 Prompt 怎么写：8 个字段，缺一不可

Stitch 的输出质量 90% 取决于你的 prompt。乱写一句"帮我做一个 AI 工具的落地页"，出来的就是千篇一律的 AI 味模板。

一个好的 Stitch prompt 包含 8 个字段：

markdown 复制代码

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 --- Free

6. 定价信息
   Free：3/天 | Pro $9/月（200次）| Lifetime $199

7. 设计调性关键词
   Gaming、Fantasy、Premium、Dark Mode

8. 反 AI 味要求（重要！）
   不要紫蓝渐变、不要对称 3 列、不要 emoji 做 icon、
   不要每个 section 背景色交替白/灰

为什么要写"反 AI 味要求"？

因为 AI 生成的设计有一些典型特征------紫蓝渐变、完美对称三列布局、抽象 3D 球体、大量 emoji 做 icon。用户一眼就能看出来"这是 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 部分）：

同时自动生成了 Design System "Aether Forge"：

字体：Space Grotesk
主色：深色 #0A0F1C 底 + 赛博青 #00E5CC
琥珀金辅助色
圆角、阴影、间距全部定义好

并且输出了完整的 HTML/CSS 代码------13KB+ 的 Tailwind 代码，直接可用。

05 设计审查：出来后还要检查什么

Stitch 的输出质量很高，但不是拿来就能直接上线。有 7 项必须检查：

Stitch 专属检查清单：

配色是否和你要的一致（有时 Stitch 会微调色值）
文案是否用了占位符（Stitch 经常用 Lorem ipsum 或自己编的文案）→ 必须替换成你的定稿文案
图片是否用了 Google CDN 临时图（src 指向 Google 服务器）→ 必须替换成你自己的图
有没有 emoji 做 icon（有的话让开发替换成 SVG）
移动端响应式是否合理（大部分时候 Tailwind 处理得不错，但复杂布局要检查）
字体是否和品牌要求一致（Stitch 可能用默认字体）
定价数字是否用了审查后的版本（不是 PRD 原始数字）

反 AI 味二次检查：

❌ 紫蓝渐变 + 白色大标题 + 居中布局
❌ 所有 icon 同一套线性图标 + 完美对称 3 列
❌ Hero 区放抽象 3D 渲染球体
❌ 每个 section 背景色交替白/灰
❌ "Revolutionize" / "Empower" / "Seamless" 这类 AI 味文案

06 精修和迭代：不满意就改

Stitch 支持在已有设计上迭代。不需要从头重来。

bash 复制代码

# 修改已有设计
npx @_davideast/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 分钟

bash 复制代码

npx @_davideast/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 代码导出：拿走就能开发

最后一步：把设计稿的代码导出来。

bash 复制代码

# 导出单个页面的 HTML/CSS
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 导出完整 Astro 项目（所有页面打包）
npx @_davideast/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 天
改稿 × 3 轮 → 半天
总计：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（没有结构就开始做设计 = 返工）
文案定稿（没有文案就开始做设计 = 返工 × 2）
竞品 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 分钟，出一套以前需要设计师花三天的页面。

你打算做什么站？评论区聊，我每条都看。

👋 我是孟健，前腾讯 T11 / 前字节技术 Leader，现在全职做 AI 编程。

🔥 更多 AI 编程实战：

GitHub：@mengjian-github
专栏：AI编程实战

觉得有用？点赞+收藏 就是最大支持 🙏