截图 + 热图输入
上传要改进的 UI 局部或整站截图，再上传同一区域的热图图片。要求两者必须对应同一部分，否则无法用于生成。
价格Basic $9/月，Pro $29/月，Enterprise 起价另询
平台Web
归类图像编辑与设计
收录2025-01-01
复核2025-01-01
编辑评分
4.4 / 5
★★★★☆
Heatbot编辑总结
Heatbot 是一款数据驱动的生成式 UI 构建器，由 AI 根据用户行为热图直接生成优化后的网站代码。使用流程分四步：上传网站截图、上传同一区域的热图、选择或自定义改进目标、由 AI 输出改进版 HTML/CSS/JavaScript 并附一份改进报告。Basic 档 $9/月，含 1 个席位、2 个项目、每月 1350 额度；Pro 档 $29/月，含 3 个席位、15 个项目、每月 4350 额度，并可切换 Claude Sonnet 4.5/3.7/3.5、GPT-4o 等模型。明显的短板是：截图与热图必须来自同一区域，人工对齐这一步无法省；免费额度官网未公开，想低成本试用的团队缺少缓冲。
Heatbot是什么？
Heatbot 是一款数据驱动的生成式 UI 构建器，定位是把用户行为热图转成网站改版方案。它面向的是需要依据数据分析来调整界面的团队，包括独立开发者、小型项目组和需要跨职能协作的业务团队。官网把它的角色描述为「一个工具里的 UX 代理机构」，替代的是「UX 设计师 + 市场人员 + 业务方 + A/B 测试 + 额外人力 + 数千美元开发费用」这一整套流程。
工作流分四步。第一步，截取想要改进的 UI 局部或整个网站截图；第二步，从自己的热图追踪软件导出同一区域的热图图片——官网明确要求热图必须与第一步的截图属于同一部分；第三步，从预置的改进目标提示库中选择，或自己写目标，这些目标会与热图数据一起作为 AI 生成的指导；第四步，AI 分析热图数据并按目标生成改进后的 HTML/CSS/JavaScript，同时写出一份改进报告。
不同角色的用法有差异。个人开发者和小项目用 Basic 档即可，支持纯 CSS 或 Bootstrap，但没有自定义目标提示和改进报告；团队和进阶用户需要 Pro 档，才有自定义目标、改进报告、Tailwindcss/Foundation 等框架支持，以及多模型切换；需要无限席位、无限项目和无限次生成的企业则走 Enterprise，该档还包含自定义集成开发、24/7 支持和 SSO（SAML 2.0）。
Heatbot核心功能
目标提示库
提供预置的改进目标提示库，也可以自己写目标。所选目标会与热图数据结合，作为 AI 生成改进 UI 时的指导。自定义目标仅 Pro 及以上可用。
生成改进 UI
AI 分析热图数据后按指定目标生成改进后的 HTML/CSS/JavaScript，输出的是可直接使用的代码，而不只是设计建议。
改进报告
生成改进代码的同时输出一份改进报告，说明做了哪些调整。Basic 档不含该功能，需 Pro 档及以上才能生成完整改进报告。
多框架支持
Basic 支持纯 CSS 或 Bootstrap；Pro 额外支持 Tailwindcss、Foundation 及其他流行框架，适配不同技术栈的项目。
多模型切换
Pro 档可在 Claude Sonnet 4.5、3.7、3.5、GPT-4o、GPT-4o Mini、GPT-3.5 Turbo 之间切换，按任务选择不同模型。
额度与项目数
Basic 含每月 1350 额度、最多 2 个项目；Pro 含每月 4350 额度、最多 15 个项目。额度不可转让，额外席位每席 $5/月。
企业级能力
Enterprise 提供无限席位、无限项目、每日无限次生成，并包含自定义集成开发、24/7 支持与 SSO（SAML 2.0）。
Heatbot值不值得用？
把它当作「热图读不懂之后的下一步」时最值得用：你已经有一份行为热图，但不确定该改哪里、改了会不会更差，Heatbot 能直接给出改进后的 HTML/CSS/JavaScript 和一份改进报告，省掉与设计师和开发来回沟通的环节。个人项目选 Basic 的 $9/月 即可，但要接受没有自定义目标和改进报告；团队用 Pro 的 $29/月 更实际，3 个席位、15 个项目、4350 额度，还能切换模型。不适合的情况也很明确：手上还没有热图数据的团队用不上它，因为输入必须来自你自己的热图追踪软件；只想拿到设计稿而非代码的团队也要注意，它的输出是代码。
建议选它的情况
- 已有热图数据、需要快速得到改版代码的独立开发者或小团队
- 要在一个工具里同时拿到改进代码与改进报告的 UX 或增长团队
- 需要按项目切换 Claude 与 GPT 系列模型的使用者
- 有合规要求、需要 SSO（SAML 2.0）与 24/7 支持的企业
不建议选它的情况
- 还没有部署热图追踪、拿不出热图图片的团队
- 只需要设计稿、不接手 HTML/CSS/JavaScript 的设计流程
- 预算极度受限且不接受 $9/月 起步的方案的个人使用者
Heatbot使用建议
入门先把路子走对
- 先把两张图对齐热图必须与截图属于同一区域、同一尺寸，建议从同一份追踪软件里导出同一时间段的同一屏内容，再同时上传。
- 从预置目标跑第一轮第一次生成先用预置改进目标提示库里的选项，避免自定义目标写得含糊导致生成结果方向跑偏。
- 保留原始截图与热图同一组截图与热图可以配合不同改进目标反复生成，多跑几轮对比结果比重做素材更省额度。
进阶省时间也省钱
- 按任务选模型Pro 档可切换 Claude Sonnet 4.5/3.7/3.5、GPT-4o、GPT-4o Mini、GPT-3.5 Turbo，结构复杂的大改动用强模型，小调整可用轻量模型省额度。
- 掐准早鸟名额Pro 档有针对早期采用者的折扣名额，官网明确写着仅 20 个，准备长期用的团队建议在名额用尽前决定。
- 额度按项目分Basic 每月 1350 额度、最多 2 个项目，Pro 每月 4350 额度、最多 15 个项目，额度不可转让，多项目并行要按项目分配用量。
- 从改进报告反推目标Pro 档生成的改进报告会说明做了哪些调整，可以把它反过来当作下一轮自定义改进目标的素材，形成迭代闭环。
Heatbot适合谁用？
有热图数据的独立开发者
推荐自己项目已经装了热图追踪，能导出图片。Basic $9/月 含 1 席位、2 个项目、1350 额度，足够支撑小项目持续改版。
需要改版报告的 UX 团队
推荐Pro $29/月 含 3 席位、15 个项目、4350 额度，有自定义改进目标与完整改进报告，适合把改版结论同步给业务方。
多框架技术栈的小团队
有条件用 Tailwindcss 或 Foundation 的项目需要 Pro 档才支持，Basic 只支持纯 CSS 或 Bootstrap，选档前先确认自己的框架。
预算敏感的初次尝鲜者
有条件未公开免费额度，最低档为 $9/月，没有先免费跑一遍的缓冲；只想试一次效果的可以先从 Basic 起。
不产出代码的设计流程
不推荐Heatbot 的输出是 HTML/CSS/JavaScript，不是设计稿文件。团队如果只交付 Figma 稿、不做前端改动，用不上它的产出。
尚未部署热图追踪的团队
不推荐输入的热图必须来自你自己的追踪软件，且要与截图同一区域。还没有热图数据的情况下无法启动第一轮生成。
Heatbot优点和缺点
优点
- 四步流程即可出改版代码：截图、热图、设目标、生成 HTML/CSS/JavaScript。
- Basic $9/月 门槛低，含 1 席位、2 个项目、每月 1350 额度。
- Pro $29/月 含 3 席位、15 个项目、每月 4350 额度，额外席位 $5/月。
- Pro 可切换 Claude Sonnet 4.5/3.7/3.5、GPT-4o、GPT-4o Mini、GPT-3.5 Turbo。
- 生成代码的同时输出改进报告，改版依据可追溯。
- Pro 支持 Tailwindcss、Foundation 等流行框架，不限于 Bootstrap。
- Enterprise 提供无限席位与无限项目，并含 SSO（SAML 2.0）。
缺点
- 热图必须与截图同一区域，人工对齐是绕不开的前置步骤。
- 未公开免费额度，最低付费门槛为 $9/月。
- 自定义改进目标与改进报告都只在 Pro 及以上提供。
- 额度不可转让，Basic 每月 1350 额度用不完也不能挪到下月或他处。
- 官方未说明国内可用性与支持的界面语言范围。
Heatbot版本与计费对比
| 方案 | 价格 | 包含内容 | 说明 |
|---|---|---|---|
| Basic | $9.00 / month | 1 用户席位，最多 2 个项目，每月 1350 额度（不可转让） | 面向个人和小项目，使用 Bootstrap；支持生成 HTML、CSS、JavaScript，可用纯 CSS 或 Bootstrap，可从预置改进目标中选择；不含自定义改进目标提示，不含改进报告。 |
| Pro | $29.00 / month | 含 3 个用户席位，额外席位 $5/month each，最多 15 个项目，每月 4350 额度（不可转让） | 面向高级用户、团队和小型企业；含 Basic 全部功能，支持 Bootstrap、Tailwindcss、Foundation 及其他流行框架，可用预置与自定义改进目标，生成完整改进报告，可切换 Claude Sonnet 4.5/3.7/3.5、GPT-4o、GPT-4o Mini、GPT-3.5 Turbo，含优先支持。为 Best value，并为早期采用者提供仅 20 个的 Pro 折扣名额。 |
| Enterprise | From（具体价格需咨询） | 无限席位，无限项目，每日无限次生成 | 面向需要更强能力与定制方案的企业；含 Pro 全部功能，另加自定义集成开发、24/7 支持与 SSO（SAML 2.0）。 |
以上为公开费率整理，厂商保留调价权利，实际以官方页面为准。
Heatbot关键指标
Heatbot常见问题
Heatbot 多少钱？有免费档吗？＋
Basic 档 $9.00/月，含 1 个用户席位、最多 2 个项目、每月 1350 额度，支持生成 HTML、CSS、JavaScript 并使用纯 CSS 或 Bootstrap。Pro 档 $29.00/月，含 3 个席位、最多 15 个项目、每月 4350 额度，额外席位 $5/月。Enterprise 起价需另行咨询。未公开免费额度。
它到底是怎么把热图变成改版的？＋
分四步：先截取要改进的 UI 局部或整站截图；再上传同一区域的热图图片，热图来自你自己的追踪软件；然后从预置目标提示库中选择或自己写改进目标；最后 AI 分析热图数据并按目标生成改进后的 HTML/CSS/JavaScript，同时写出一份改进报告。
生成的代码用的是什么技术栈？＋
Basic 档支持纯 CSS 或 Bootstrap。Pro 档在此之上支持 Bootstrap、Tailwindcss、Foundation 及其他流行框架，可以在不同技术栈的项目里使用生成结果。
能自己指定 AI 模型吗？＋
可以，但需要 Pro 档。Pro 支持在 Claude Sonnet 4.5、Claude Sonnet 3.7、Claude Sonnet 3.5、GPT-4o、GPT-4o Mini、GPT-3.5 Turbo 之间切换。
热图可以用任何软件导出的吗？＋
官网的说法是从你的热图追踪软件导出热图图片即可，并未限定具体品牌。硬性要求是热图必须与第一步上传的网站截图属于同一部分，否则无法用于生成改进 UI。
Pro 档的早鸟折扣是什么？＋
官网为 Pro 档提供面向早期采用者的折扣名额，明确写着仅有 20 个。有长期使用打算的团队建议在该名额用尽前完成订阅决策。
团队多人一起用，席位够吗？＋
Basic 含 1 个用户席位，Pro 默认含 3 个席位、额外席位每席 $5/月，Enterprise 为无限席位。需要跨 UX、市场、业务多方协作时，Pro 及以上更合适。
企业版有什么额外能力？＋
Enterprise 面向需要更强算力与定制方案的企业，包含无限席位、无限项目、每日无限次生成，并具备 Pro 的全部功能，另加自定义集成开发、24/7 支持与 SSO（SAML 2.0）。
