不会设计也能做站:我用 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 设计工具的区别：

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

02 接入 Stitch：两种方式

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

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

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

# 安装 stitch-mcp CLInpm install -g @_davideast/stitch-mcp# 认证（需要 Google Cloud 账号）gcloud auth application-default login# 或者用 Stitch API Key（从 Stitch 设置页获取）export STITCH_API_KEY="your_key"

MCP 核心命令：

# 创建项目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 个字段：

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 做 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 支持在已有设计上迭代。不需要从头重来。

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

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

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

# 导出单个页面的 HTML/CSSnpx @_davideast/stitch-mcp tool get_screen_code \  -d '{"projectId": "xxx", "screenId": "yyy"}'# 导出完整 Astro 项目（所有页面打包）npx @_davideast/stitch-mcp tool build_site \  -d '{"projectId": "xxx"}'

开发拿到后做什么：

09 完整流程和时间对比

传统流程：

1. 看竞品 → 10 分钟
2. 画线框图 → 30 分钟
3. Figma 出高保真 → 2-4 小时
4. 开发还原设计 → 1-2 天
5. 改稿 × 3 轮 → 半天
6. 总计：2-3 天

Stitch 流程：

1. 看竞品 → 10 分钟
2. 写 8 字段 prompt → 5 分钟
3. Stitch 生成 3 个方向 → 6 分钟（2 分钟 × 3）
4. 选方向 + 精修 → 5 分钟
5. 检查 + 导出代码 → 5 分钟
6. SEO 矩阵页（6 个）→ 12 分钟
7. 总计：~45 分钟

从 2-3 天压缩到 45 分钟。而且输出的不是设计图，是可直接使用的代码。

10 你自己动手需要什么

1. Google 账号
   （Stitch 完全免费）
2. PRD 或至少知道页面要有哪些 section
   （没有结构就开始做设计 = 返工）
3. 文案定稿
   （没有文案就开始做设计 = 返工 × 2）
4. 竞品 URL 2-3 个
   （不看竞品就开始做 = 跟别人长一样）

如果要自动化（OpenClaw 方式）：5. 安装 stitch-mcp CLI6. 配置 gcloud 认证或 Stitch API Key7. 给设计 Agent 写一个 playbook（包含 8 字段 prompt 模板 + 7 项检查清单）

📍 最后说一句。

以前独立开发者做站最头疼的就是设计。代码你会写，文案你能想，但设计——要么花钱请人，要么自己做出一个"技术人审美"的页面。

Stitch 2.0 把这个门槛彻底拉平了。免费、无需设计基础、输出质量高、还带代码。

你现在唯一需要的能力是写一段好的 prompt。而好的 prompt 就是上面那 8 个字段——产品定位、目标用户、配色、页面结构、消息层级、定价、调性、反 AI 味。

工具就摆在那里。30 分钟，出一套以前需要设计师花三天的页面。

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

🚀 想要与更多AI爱好者交流，共同成长吗？

和一群志同道合的人，持续精进 AI 的每一天