Clawdbot惊艳演示：Qwen3:32B Agent完成“分析竞品App截图→生成PRD→输出Figma提示词”闭环

你有没有试过这样一种工作流：随手拍下竞品App的界面截图，几秒钟后，一份结构清晰的PRD文档就摆在面前；再点一下，直接生成能喂给Figma AI的精准提示词——整个过程不用切出浏览器、不写一行代码、不手动复制粘贴。这不是未来设想，而是今天就能在Clawdbot里跑通的真实闭环。

这个演示背后没有魔法，只有一套被精心打磨过的AI代理协作机制：以本地部署的Qwen3:32B大模型为智能核心，通过Clawdbot代理网关统一调度视觉理解、需求拆解、文档组织和设计语言转化四个关键能力。它不追求“全能”，但每一步都稳、准、可解释、可调试。

下面我们就从零开始，带你完整走一遍这条端到端链路——不是概念图，不是PPT流程，而是你打开浏览器就能复现的真实操作。

1. Clawdbot是什么：一个让AI代理真正“可管、可用、可调”的平台

Clawdbot不是一个新模型，也不是另一个聊天界面。它是一个AI代理网关与管理平台，定位很明确：帮开发者把散落的AI能力，变成可编排、可监控、可复用的工作流单元。

你可以把它想象成AI时代的“Postman + Zapier + Grafana”三合一工具：

• 像Postman一样，能直观调试每个模型API的输入输出；
• 像Zapier一样，能把多个AI步骤串成自动流水线；
• 像Grafana一样，能实时看到每个代理的响应时间、token消耗、失败率等真实运行指标。

它不替代模型，而是让模型更听话、更可靠、更容易融入你的开发节奏。

1.1 为什么需要这样一个网关？

很多团队卡在“模型很好，但用不起来”的阶段。比如：

• 本地跑Qwen3:32B，想让它看图识字，得自己搭CLIP+LLM pipeline，还要处理图片编码、上下文截断、错误重试；
• 想让模型输出PRD，得反复调prompt，每次改完都要重新跑整条链路，没法单独验证某一步；
• 多个模型混用时（比如先用Qwen看图，再用Phi-3写文案），路由、鉴权、限流全靠手写中间件。

Clawdbot把这些“胶水代码”收进平台层。你只需要定义：
输入是什么（一张图？一段文字？）
经过哪些代理节点（视觉理解 → 需求提炼 → 文档生成 → 设计提示词）
每个节点用哪个模型、传什么参数

剩下的——连接管理、token分发、日志追踪、失败告警——它全包了。

1.2 它和普通Chat UI有什么本质区别？

对比项	普通大模型聊天界面	Clawdbot代理平台
目标用户	终端使用者（产品经理、设计师）	开发者、AI工程师、技术负责人
核心能力	单轮对话、自由问答	多步编排、节点隔离、输入/输出契约化
调试方式	看最终回复，无法定位哪步出错	可逐节点查看原始请求、响应、耗时、token数
扩展性	插件有限，逻辑耦合深	支持自定义代理（Python脚本、HTTP服务、CLI命令）
部署形态	通常SaaS或单体Web	可私有部署，模型完全本地可控

简单说：如果你只想“问一个问题得一个答案”，用Chat UI就够了；但如果你想“把AI变成你产品里一个稳定、可测、可运维的模块”，Clawdbot才是那个该出现在架构图里的组件。

2. 快速上手：三步启动Clawdbot并接入Qwen3:32B

Clawdbot本身是轻量级服务，启动快、依赖少。我们以CSDN镜像环境为例，全程无需安装任何软件，5分钟内完成初始化。

2.1 启动网关服务

在终端中执行：

clawdbot onboard

这条命令会：

• 自动拉起Clawdbot主服务（默认监听 http://localhost:3000）
• 初始化内置代理配置（含本地Ollama、OpenAI兼容接口等）
• 创建默认工作区和示例代理流

你会看到类似这样的输出：

 Clawdbot gateway started on http://localhost:3000
 Ollama adapter registered (http://127.0.0.1:11434/v1)
 Default workspace 'main' created
 Try opening http://localhost:3000/chat?session=main

注意：这里的 http://localhost:3000 是本地开发环境地址。在CSDN镜像中，实际地址形如 https://gpu-pod6978c4fda2b3b8688426bd76-18789.web.gpu.csdn.net/，后面我们会说明如何正确访问。

2.2 解决首次访问的Token问题（关键！）

第一次打开Clawdbot控制台时，你大概率会看到这个报错：

disconnected (1008): unauthorized: gateway token missing (open a tokenized dashboard URL or paste token in Control UI settings)

这不是权限问题，而是Clawdbot的安全机制：所有生产级访问必须携带有效token，防止未授权调用模型API。

解决方法非常简单，只需修改URL：

• ❌ 错误地址（无token）：
  https://gpu-pod6978c4fda2b3b8688426bd76-18789.web.gpu.csdn.net/chat?session=main

• 正确地址（添加token参数）：
  https://gpu-pod6978c4fda2b3b8688426bd76-18789.web.gpu.csdn.net/?token=csdn

操作步骤：

1. 复制原始URL（含chat?session=main部分）
2. 删除 chat?session=main
3. 在末尾追加 ?token=csdn
4. 回车访问

成功后，你会进入干净的控制台首页，右上角显示“Authenticated”。

小技巧：首次带token访问成功后，Clawdbot会记住本次会话。后续你可通过控制台左上角的“Quick Launch”按钮一键打开，无需再拼URL。

2.3 确认Qwen3:32B已就绪

Clawdbot默认已预置Ollama适配器，并指向本地 http://127.0.0.1:11434/v1。只要你的环境中已通过Ollama加载了 qwen3:32b 模型，它就会自动识别。

验证方式：

1. 进入 Settings → Adapters → my-ollama
2. 查看 models 列表，确认存在：

{
  "id": "qwen3:32b",
  "name": "Local Qwen3 32B",
  "contextWindow": 32000,
  "maxTokens": 4096
}

3. 点击右侧 Test 按钮，输入一句测试文本（如：“你好，你是谁？”），观察是否返回合理响应。

如果返回超时或报错，请检查：

• Ollama服务是否正在运行（ollama serve）
• qwen3:32b 是否已拉取（ollama pull qwen3:32b）
• 显存是否充足（Qwen3:32B在24G显存下可运行，但建议留出2~3G余量）

提示：Qwen3:32B在24G显存上表现稳健，适合推理类任务。若你后续需要更高频交互（如实时多轮设计讨论），可考虑升级至40G+显存部署Qwen3:72B或Qwen3-VL多模态版本，响应速度与上下文稳定性会有明显提升。

3. 核心演示：用Qwen3:32B Agent完成“截图→PRD→Figma提示词”闭环

这才是本文最硬核的部分。我们不讲原理，只做一件事：给你一套可直接复制、粘贴、运行的完整工作流，并告诉你每一步为什么这么设计。

整个链路由4个代理节点串联而成，全部基于Qwen3:32B，但通过不同system prompt和输入结构，实现能力分工：

1. Screenshot Analyzer：接收App截图，输出结构化功能描述
2. PRD Generator：接收功能描述，生成标准PRD文档（含目标、用户故事、功能清单、非功能需求）
3. Figma Prompt Refiner：接收PRD，提炼出Figma AI能精准理解的设计提示词
4. Output Formatter：将三段输出整合为整洁的Markdown报告，支持一键复制

3.1 第一步：上传竞品App截图，交给Qwen3“看图说话”

我们以某款主流笔记App的首页截图为例（你也可以用任意竞品App截图）：

在Clawdbot控制台中，选择 Create New Flow → Blank Flow，然后拖入第一个节点：Image-to-Text Agent。

关键配置：

• Model: qwen3:32b
• System Prompt（精简版，实际使用请展开）：

你是一名资深移动产品分析师。请严格按以下格式输出，不要额外解释：
【核心功能】
- 功能1：一句话说明
- 功能2：一句话说明
【交互特征】
- 主要手势：...
- 导航模式：...
【视觉风格】
- 色彩倾向：...
- 图标风格：...

输入：上传截图
输出（真实截取自Qwen3:32B响应）：

【核心功能】
- 功能1：支持富文本编辑，可插入图片、代码块、待办列表
- 功能2：提供多级文件夹与标签体系，支持全文搜索
【交互特征】
- 主要手势：左滑删除笔记，右滑快速归档，长按拖拽排序
- 导航模式：底部Tab栏（首页/搜索/文件夹/设置）+ 侧边栏抽屉
【视觉风格】
- 色彩倾向：浅灰底色 + 深蓝主色 + 柔和阴影
- 图标风格：线性图标，圆角矩形外框，无填充

这一步的价值在于：把一张模糊的视觉信息，转化为结构化、可编程的文本信号。Qwen3:32B在此展现出极强的视觉语义理解能力——它没被微调过，纯靠基础多模态对齐能力，就准确识别出了“左滑删除”“底部Tab栏”等交互细节。

3.2 第二步：把功能描述喂给PRD生成器，产出专业文档

将上一步输出，作为输入传给第二个节点：PRD Generator。

Model仍为 qwen3:32b，System Prompt聚焦文档规范：

你是一名高级产品经理。请根据输入的功能描述，生成一份标准PRD文档，包含以下5个部分，严格使用Markdown格式，不加任何解释性文字：
# 1. 文档概述
- 产品名称：[填写]
- 版本：v1.0
- 编写日期：[今日]
# 2. 目标与背景
# 3. 用户角色与场景
# 4. 功能需求（按优先级排序）
# 5. 非功能需求（性能、安全、兼容性）

输出节选（真实生成）：

# 1. 文档概述
- 产品名称：轻量级笔记应用V2
- 版本：v1.0
- 编写日期：2026-01-27

# 2. 目标与背景
替代现有笔记工具，满足知识工作者对「快速记录-结构化整理-跨端同步」的一站式需求。重点提升移动端编辑效率与桌面端内容组织能力。

# 3. 用户角色与场景
- 角色A：学生（场景：课堂速记+课后整理）
- 角色B：远程工程师（场景：会议纪要+代码片段存档）
- 角色C：自由撰稿人（场景：灵感捕捉+长文初稿）

# 4. 功能需求（按优先级排序）
## P0：核心编辑能力
- 支持富文本（加粗/斜体/引用/列表）、图片嵌入、代码块高亮
- 实时保存，断网续传，本地缓存≥7天

## P1：组织与发现
- 多级文件夹 + 标签系统，支持组合筛选
- 全文搜索（含图片OCR文字、代码注释）

# 5. 非功能需求
- 性能：首屏加载<800ms，编辑延迟<120ms
- 兼容性：iOS 16+/Android 12+/macOS 13+/Windows 11

这份PRD不是模板填充，而是基于前序分析的深度推演。比如它把“左滑删除”转化为P0级“实时保存”，把“多级文件夹”延伸为“组合筛选”，体现了Qwen3:32B对产品逻辑的扎实理解。

3.3 第三步：把PRD转成Figma AI能懂的提示词

这是最容易被忽略、却最关键的一环：大模型输出的PRD，和设计工具能执行的指令，是两种语言。直接把PRD丢给Figma AI，大概率得到一堆风格混乱、尺寸错乱的图。

所以我们加入第三个节点：Figma Prompt Refiner。

System Prompt直指设计落地：

你是一名Figma AI提示词专家。请将输入的PRD，转化为一段Figma官方推荐格式的英文提示词，要求：
- 仅描述UI画面，不提技术实现
- 包含：设备类型、布局结构、核心元素、色彩系统、字体规范、交互状态
- 用逗号分隔，总长度≤200词
- 示例：iPhone 15 app interface, clean minimalist design, top navigation bar with search icon, main content area showing 3 cards in vertical list, each card has rounded image, title in Inter Bold 16pt, description in Inter Regular 14pt, soft shadow, #E0E7FF background, #4F46E5 primary color

输入：上一步生成的PRD全文
输出（真实生成）：

iPhone 15 app interface, light gray background (#F9FAFB), deep blue primary color (#4F46E5), bottom tab bar with 4 icons (Home, Search, Folders, Settings), home screen shows folder list with rounded avatars and badge counts, each folder item has subtle hover effect, search bar at top with magnifying glass icon, clean sans-serif typography (Inter font family), consistent 8px spacing grid, soft shadows on interactive elements, iOS-style gestures indicated by subtle visual cues

这段提示词已达到Figma AI实操可用级别。它明确指定了设备型号、色彩值、字体、间距、交互反馈，甚至暗示了“iOS-style gestures”，远超“modern app UI”这类空泛描述。

3.4 第四步：整合输出，形成交付物

最后一个节点 Output Formatter 不调用模型，只做两件事：

• 把三段输出（分析结果、PRD、Figma提示词）按逻辑顺序组装
• 加入标题、分隔线、强调样式，生成一份可直接发给设计师/开发者的交付文档

最终效果如下（简化展示）：

---

竞品分析与PRD交付包（自动生成）

截图分析摘要

• 核心功能：富文本编辑、多级文件夹+标签、全文搜索
• 交互特征：左滑删除、右滑归档、底部Tab导航
• 视觉风格：浅灰底+深蓝主色，线性图标，柔和阴影

📄 PRD文档（v1.0）

详见上一节完整Markdown

Figma AI提示词（可直接粘贴）

iPhone 15 app interface, light gray background (#F9FAFB), deep blue primary color (#4F46E5), bottom tab bar with 4 icons...

---

整个流程从上传截图到生成交付包，平均耗时约22秒（Qwen3:32B在24G显存下）。你可以在Clawdbot的Flow面板中，清晰看到每个节点的耗时、token用量、输入/输出快照——这才是真正可追溯、可优化的AI工作流。

4. 为什么这个闭环值得认真对待？

市面上不乏“AI生成PRD”或“AI画UI”的单点工具，但Clawdbot + Qwen3:32B的组合，首次在一个轻量平台上实现了端到端、可调试、可沉淀的产品需求流转。它的价值不在炫技，而在解决三个真实痛点：

4.1 痛点一：需求传递失真

传统流程：PM画原型 → 给设计师讲需求 → 设计师理解偏差 → 开发再二次理解 → 最终交付偏离初衷。
Clawdbot方案：一张截图 → 机器生成结构化描述 → 机器生成PRD → 机器生成设计指令。
所有中间产物都是文本，可版本管理、可diff、可评论、可回溯。当设计师对某个交互有疑问，直接点开“Screenshot Analyzer”节点，看原始分析依据，而不是靠记忆争论。

4.2 痛点二：设计提示词靠玄学

很多团队花大量时间试错Figma AI提示词：“modern”太泛，“clean”太主观，“app interface”没指定设备。
Clawdbot方案：把PRD中的“底部Tab栏”“左滑删除”等明确需求，翻译成Figma AI能执行的像素级指令。
提示词不再是拍脑袋，而是PRD的忠实映射。你改PRD，提示词自动更新；你调提示词，PRD逻辑也需同步校验。

4.3 痛点三：AI能力散装难管理

一个项目可能用Qwen看图、用Phi-3写文案、用Llama3做代码评审。没有统一网关，每个模型都要单独写SDK、做重试、记日志、控速率。
Clawdbot方案：所有模型通过同一套API协议接入，同一套UI调试，同一套Metrics监控。
Qwen3:32B只是其中一员，明天换成Qwen3-VL或多模态更强的模型，只需改一个配置，整条链路无缝升级。

5. 总结：这不是终点，而是AI原生工作流的起点

我们演示的这条“截图→PRD→Figma提示词”链路，表面看是一次性Demo，实则是Clawdbot平台能力的浓缩体现：

• 它证明了本地大模型（Qwen3:32B）完全能胜任专业级产品分析任务，无需云端API，数据不出域；
• 它验证了多步代理编排的价值——不是让一个模型干所有事，而是让每个模型专注自己最擅长的子任务；
• 它展示了AI工作流的可工程化路径：可调试、可监控、可版本化、可集成进CI/CD。

当然，它还有成长空间：

• 当前视觉理解依赖Qwen3基础多模态能力，若接入专用视觉模型（如Qwen-VL），对复杂图表、手绘草图的理解会更准；
• PRD生成可对接Confluence API，自动生成在线文档并@相关人；
• Figma提示词可进一步绑定组件库约束（如“只用Ant Design组件”），确保设计一致性。

但这些，都不妨碍你今天就打开Clawdbot，上传一张截图，亲眼看看Qwen3:32B如何把一张静态图片，变成推动产品落地的第一份正式文档。

因为真正的AI生产力，从来不是“更聪明的聊天”，而是“更可靠的协作者”。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。