老板明天要看 Demo？用 Claude 30 分钟搞定 10 页产品原型

昨晚十一点，你打开 Figma，盯着空白画布发了三分钟呆，然后关掉了。

不是不想做，是真的不会。组件怎么对齐、字体用哪套、配色怎么搭——每一个问题都像一道墙。外包报价三千起步，还要等三天。PPT 凑合做一版，自己看着都嫌丑。

这个场景，在产品经理、独立创业者、运营同学里每周都在上演。

但现在这件事有了另一种解法：你不需要会设计，不需要写代码，只需要会说话。 Claude 的多模态对话能力，正在把"做 Demo"这件事的门槛打到地板。

本文用一个真实的虚拟案例——一款面向中小企业的 B 端 SaaS 工具"FlowDesk"（合同管理平台）——带你完整跑一遍 30 分钟出 10 页 Demo 的全流程。每个 Prompt 可以直接复制，每个阶段结束我告诉你手里多了什么。不讲虚的，直接开干。

---

一、你真的需要一个设计师吗？

先说结论：做 Demo，不需要。

做 Demo 的目的是什么？是让老板、投资人、客户看懂你在做什么，感受到产品的逻辑和价值。它不需要像素级还原，不需要完美的视觉体系，它需要的是清晰的信息架构 + 足够的说服力。

这两件事，Claude 都能帮你做。

传统流程：需求 → 找设计师 → 沟通对齐 → 出稿 → 修改 → 再修改 → 交付。最快两天，贵的要命，沟通成本还不算。

新流程：需求 → Claude 对话 → 迭代追问 → 导出文档。30 分钟，免费（或极低成本），改到满意为止。

差距在哪？Claude 不会理解偏差，因为你随时可以纠正它；Claude 不会摆烂，因为它没有情绪；Claude 不会涨价，因为它按 token 计费。

---

二、开跑前的 3 分钟准备

你需要准备三样东西

1. 一个 Claude 账号或 API 接入

网页版可以跑，但有轮次限制——做到第六七页可能就被截断了。如果你认真想跑通 10 页，API 是更稳的选择。

如果你不想被网页版的轮次限制卡住，直接用 API 是更稳的选择。国内用户可以通过 [api.884819.xyz](https://api.884819.xyz) 接入 Claude API，配置方式和下面的代码示例完全兼容，新用户注册即送体验 token，开箱即用。
2. 产品的一句话描述

不要超过两行。以 FlowDesk 为例：

FlowDesk 是一款面向中小企业的合同管理 SaaS，帮助法务和销售团队在线创建、审批、签署合同，减少 80% 的邮件来回。
3. 目标用户画像

同样简短即可：

主要用户：企业法务专员（25-35 岁，日常处理大量合同审批）和销售经理（需要快速发起合同、追踪签署进度）。

三样东西备齐，开始计时。

---

API 调用示例（给进阶用户）

如果你想批量生成多页内容，用 Python 脚本比手动对话效率高 3 倍以上：

import anthropic


client = anthropic.Anthropic(


base_url="https://api.884819.xyz",


api_key="your_api_key_here"


)



pages = ["首页", "功能介绍页", "定价页", "客户案例页", "注册引导页"]



for page in pages:


message = client.messages.create(


model="claude-sonnet-4-6",


max_tokens=1024,


messages=[


{"role": "user", "content": f"为FlowDesk合同管理SaaS生成{page}的完整文案和布局描述，包含标题、副标题、正文、CTA按钮文案。"}


]


)


print(f"=== {page} ===")


print(message.content[0].text)

10 行代码，批量跑完 5 个页面，每页约 30 秒出结果。

---

三、30 分钟操作流程

⏱ 时间轴总览

| 阶段 | 时间 | 任务 | 产出 | | 第一阶段 | 0–5 分钟 | 生成信息架构 | 10 页目录 + 每页核心内容点 | | 第二阶段 | 5–12 分钟 | 逐页生成文案与布局 | 5 个核心页面的完整内容 | | 第三阶段 | 12–20 分钟 | 追问迭代细节 | 风格统一、数据填充、语气调整 | | 第四阶段 | 20–25 分钟 | 导出为可用格式 | HTML / Markdown / JSON | | 第五阶段 | 25–30 分钟 | 组装完整 Demo 文档 | 一份可交付的 10 页 Demo |

---

第一阶段（0–5 分钟）：用"产品简报 Prompt"生成信息架构

直接复制这个 Prompt： 
你是一位资深的 SaaS 产品设计顾问。


我的产品：FlowDesk，面向中小企业的合同管理 SaaS，帮助法务和销售团队在线创建、审批、签署合同，减少 80% 的邮件来回。



目标用户：企业法务专员和销售经理。



请为这款产品设计一份 10 页的落地页 Demo 信息架构，包括：


1. 每页的名称和核心目的


2. 每页需要传达的 1-2 个关键信息点


3. 建议的页面顺序和逻辑



输出格式：表格。
此时你手里有了什么： 一份完整的 10 页目录，每页的核心目标已经清晰，相当于做完了产品经理两小时的 PRD 前置工作。

---

第二阶段（5–12 分钟）：逐页生成文案与布局描述

拿到目录后，逐页生成。以首页为例：

Prompt 模板（首页）： 
基于上面的信息架构，现在生成【首页】的完整内容。


要求：


  • 主标题（Hero Title）：10 字以内，直击痛点
    • 

  • 副标题：25 字以内，说明解决方案
    • 

  • 三个价值点：每个不超过 15 字，配一句 30 字以内的说明
    • 

  • CTA 按钮：两个，主按钮和次按钮
    • 

  • 页面布局描述：用文字说明左右/上下结构，方便后续转成 HTML
    • 



品牌调性：专业、简洁、值得信赖，不要过于活泼。

用同样的结构，依次生成功能介绍页、定价页、客户案例页、注册引导页。每页约 1 分钟。

此时你手里有了什么： 5 个核心页面的完整文案，包括所有标题、正文、按钮文案，以及布局描述。

---

第三阶段（12–20 分钟）：用追问迭代细节

这是最容易被忽略、也是最能拉开质量差距的阶段。

追问 Prompt 1：风格校准 
刚才生成的首页文案语气偏正式，我们的用户是 30 岁左右的职场人，希望语气更直接、有点轻松感，但不要用网络用语。请重新调整主标题和三个价值点的表达方式。
追问 Prompt 2：数据填充 
客户案例页需要 3 个虚拟客户案例，每个包含：公司类型、使用前的痛点、使用后的量化结果（用具体数字）、一句引用话。请生成，数字要合理，不要夸张。
追问 Prompt 3：定价页细化 
定价页需要三档方案：免费版、专业版（299元/月）、企业版（定制报价）。每档列出 5 个功能点，专业版做视觉重点（加"最受欢迎"标签）。请生成完整的定价表格内容。
此时你手里有了什么： 经过至少一轮迭代的精修内容，语气统一，数据具体，定价逻辑清晰。

---

第四阶段（20–25 分钟）：导出为可用格式

Prompt：生成 HTML 结构 
请将刚才生成的首页内容，转换为一个简洁的 HTML 页面结构。


要求：


  • 使用语义化 HTML 标签
    • 

  • 内联 CSS 即可，不需要引入外部框架
    • 

  • 配色：主色 #2563EB（蓝色），背景白色，文字 #1F2937
    • 

  • 移动端友好的简单响应式布局
    • 

  • 不需要 JavaScript
    •

Claude 会输出一段可以直接在浏览器打开的 HTML 代码。复制，保存为 .html 文件，双击打开——你的第一页 Demo 就在眼前了。

此时你手里有了什么： 至少 1 个可以在浏览器里打开、可以截图、可以分享的真实页面。

---

第五阶段（25–30 分钟）：组装成完整 Demo 文档

把所有页面的 Markdown 内容整合到一个文档里，加上封面页和目录，导出为 PDF。

Prompt：生成封面和目录页 
为 FlowDesk 的产品 Demo 文档生成一个封面页和目录页的文案。


封面：产品名、一句话描述、版本号（V1.0）、日期


目录：列出 10 个页面名称和对应的简短说明



格式：Markdown。
此时你手里有了什么： 一份完整的 10 页 Demo 文档，可以用 Notion、飞书、Typora 打开，也可以直接截图发给老板。

---

四、让输出质量再上一层的 3 个进阶技巧

技巧 1：用"角色扮演 Prompt"模拟用户视角审稿

普通做法： 自己看一遍，觉得还行，就发出去了。 优化做法： 
请你扮演一位 32 岁的企业法务专员，第一次看到 FlowDesk 的落地页。


以她的视角阅读刚才生成的首页内容，指出：


1. 哪些地方让她感到困惑？


2. 哪些价值点她最在意？


3. 她会不会点击注册？为什么？

这个 Prompt 能让 Claude 帮你做一次"用户测试"，找出你自己看不出来的问题。

---

技巧 2：用"约束条件注入"控制品牌调性一致性

跑多页内容时，最常见的问题是前后风格断层——第一页很克制，第三页突然变得很煽情。

解决方法： 在每次新对话开头，先注入一段品牌约束： 
【品牌约束，本次对话全程遵守】

  • 语气：专业、直接、有温度，不用感叹号
    • 

  • 禁止词汇：赋能、颠覆、革命性、生态
    • 

  • 数字表达：优先用具体数字，不用"大幅""显著"等模糊词
    • 

  • 句式：短句优先，单句不超过 20 字
    •

把这段话放在每次对话的第一条消息里，Claude 会在整个对话中保持风格一致性。

---

技巧 3：用多轮对话建立"设计记忆"

每次新开对话，Claude 都不记得你之前说了什么。解决方法是在新对话开头粘贴一段"上下文摘要"：

【背景摘要，请记住】

产品：FlowDesk，B 端合同管理 SaaS


目标用户：法务专员 + 销售经理


已完成页面：首页、功能页、定价页


风格基调：专业克制，主色 #2563EB


接下来需要生成：客户案例页

10 秒钟的准备，能让新对话无缝衔接之前的工作，不会出现"第五页突然变成了另一个产品"的尴尬。

---

五、常见卡壳点与解决方案

卡壳 1：输出内容太模板化，像套公式

现象： 每个价值点都是"高效、安全、易用"，读起来和竞品一模一样。 修复 Prompt： 
刚才的内容太通用了，任何 SaaS 产品都能说这些。


请重新生成，要求：


  • 每个价值点必须和"合同管理"这个具体场景绑定
    • 

  • 举一个法务人员日常工作中的真实操作场景来支撑
    • 

  • 禁止使用"高效""便捷""智能"这三个词
    •

---

卡壳 2：页面逻辑前后矛盾

现象： 首页说"免费开始"，定价页最低档要收费，用户会懵。 修复 Prompt： 
请检查以下内容的逻辑一致性：

[粘贴首页和定价页的相关内容]



找出所有可能让用户产生困惑的矛盾点，并给出修改建议。

---

卡壳 3：对话轮次用完，内容没跑完

现象： 网页版对话到一半被截断，之前的上下文全丢了。 修复方法： 这是网页版的硬限制。两个解决方案：

1. 切换到 API（根本解决）：通过 [api.884819.xyz](https://api.884819.xyz) 接入，没有轮次限制，按 token 计费，10 页 Demo 的总费用通常不超过 1 元。

2. 使用"上下文摘要续接法"（临时方案）：新开对话，把技巧 3 里的摘要方法用起来，手动续接上下文。

---

六、你刚刚完成了什么

30 分钟前，你面对的是一个空白文档。

现在，你手里有：

  • ✅ 一份完整的 10 页产品 Demo，逻辑清晰，文案精炼
  • ✅ 至少一个可以在浏览器打开的真实 HTML 页面
  • ✅ 一套可以复用的 Prompt 体系，下次 15 分钟就能搞定
  • ✅ 一份经过"模拟用户视角"审稿的内容，不是自嗨

这不是"AI 帮你凑合做了个东西"。这是一套可以真正拿出去用的产品原型，它的信息架构来自专业设计逻辑，它的文案经过了多轮迭代，它的风格是你主动控制的结果。

想现在就开始？API 接入地址在这里：[api.884819.xyz](https://api.884819.xyz)——把第三章的第一个 Prompt 粘进去，你的第一页 Demo 10 秒钟就能出来。新用户注册即送体验 token。

现在打开，跑第一页。

---

下一篇预告

这篇讲的是用对话生成 Demo 文档。但如果你想让 Demo 直接变成一个可以点击的真实网页——Claude 其实也能写代码。

下一篇我们会做一件更硬核的事：用同一套对话流程，30 分钟生成一个可部署的落地页，HTML + CSS 全给你，复制粘贴就能上线，甚至连域名绑定的步骤我们也会讲。

关注 8848AI，别错过。

---

本文由8848AI原创，转载请注明出处。关注8848AI，带你从零开始学AI。

#AI教程 #Claude #产品设计 #8848AI #Prompt技巧 #SaaS #AI工具 #无代码开发