夜雨聆风
01 为什么要做这次测评
很多研发团队都在尝试让产品经理通过与AI对话直接生成可用的产品原型，最好可以进一步直接生成可用的前端页面，以减少传统模式中原型绘制、前端编程的人力投入，这个方向并不新鲜，市场上号称“一句话生成页面”的工具早已层出不穷。但实际效果到底怎么样？能不能真正落地？哪款工具更值得投入精力研究？
带着这些疑问，我选了目前市面上较为主流的三款工具——Google Stitch、CodeBuddy和Claude Design，基于同一份真实需求，分别进行原型生成测试。
同时也引入了两款设计风格Skill：Huashu‑Design（侧重高保真视觉展示）和Ant Design Skill（侧重可直接复用的React代码，适用面广，antd组件在国内中后台领域属于绝对头部），看看不同设计规范对生成效果的影响。
02 测试需求：一个典型的资源管理功能
为了贴近实际工作场景，我们没有用"电商首页""管理后台"这类通用模板，而是选取了一个在B端系统中具代表性的管理型功能需求，具体如下（数据为第三方社区公开内容）：
平台内置模型数据，可用于经济学分析研究，搭配的分析工具为Stata软件。现需新增“ADO资源”功能模块，作为独立菜单，帮助用户了解系统内置的自定义命令范围及具体使用方法。
具体要求如下：
1. 资源目录：根据系统内置文件，按字母（区分大小写a-z、A-Z）、特殊字符（仅“_”）及指定文件夹名（“style”）展示一级目录，支持查看全部命令及每个目录下的命令数量；
2. 命令列表：根据左侧目录筛选，仅展示.ado和.style两类命令，以分页模式呈现，每条命令包含使用说明和详情，支持模糊查询；
3. 命令导出：支持将筛选结果打包为ZIP文件下载。
这个需求涉及目录结构、列表筛选、分页、详情展示、模糊搜索、文件导出等多个典型交互场景，用来检验工具的“需求理解能力”和“功能还原度”。（注：功能细节还原度调整不在本次的测评范围内，会涉及业务上细化确认并进行多轮对话的调整）
03 测评工具说明
本次测评涉及三款生成工具与两款辅助Skill：
生成工具：
Google Stitch——Google出品的 AI 界面设计工具，主打Figma到页面的工作流；
CodeBuddy——国内流行的AI编程助手，内置Skill市场，扩展能力较强；
Claude Design——Anthropic 于 2026 年 4 月推出的 AI 视觉设计工具，由 Claude Opus 4.7 驱动，输入需求即可生成交互原型、产品线框图、演示文稿等视觉内容。
辅助Skill：
Huashu‑Design：一键生成多风格、带完整交互动效的高保真演示原型，视觉冲击力强，适合对外汇报展示；
Ant Design Skill：严格遵循Ant Design规范，输出可直接投入开发的React交互页面代码，减少前端重复编码。
04 测评结果
一、Google Stitch
默认生成效果：静态页面，无交互，布局较为基础。
引入Huashu‑Design风格：由于Huashu并非Stitch原生插件，无法直接打通，我们采用“提示词迁移”方式——将Huashu的设计规范与提示词模板作为约束条件输入Stitch，以期接近Huashu风格。
引入Ant Design规范：同样通过提示词引导，让Stitch参照Ant Design的视觉体系生成页面。
实际表现：
生成的始终为静态页面，没有任何点击、筛选、分页等交互行为，模拟数据也较为偏移；
即便引入了Ant Design，也只是在“视觉层”做了模仿，底层代码生成逻辑并未实现；
需求识别不完整：左侧目录结构展示多次调整效果不佳，功能存在明显缺失；
优点是内容可导出复制到Figma等工具中进一步细化。
测评小结：
一句话评价：适合作为“视觉参考”或Figma前序素材，离“可用原型”还有较大距离
二、CodeBuddy
默认生成效果：令人惊喜的是，默认状态下CodeBuddy就已生成带交互的原型页面——目录可筛选、命令可查看详情、支持导出操作，功能完整度较高，样式上稍微欠缺了点。
引入Huashu‑Design：在SkillHub市场直接搜索“Huashu”即可一键安装。选择设计任务类型后，调用该Skill输入需求，生成页面主题风格较为自由，视觉表现力提升明显。
引入Ant Design规范：同样通过Skill市场安装Ant Design Skill，生成的页面在视觉上更加规整规范，且输出的是可复用的前端代码，可直接进入开发流程。
实际表现：
功能与交互能力突出：目录筛选、分页、详情弹窗、模糊搜索、导出功能全部实现，且可操作；
适配性强：内置 Skill 市场，可一键安装 Huashu-Design、Ant Design 技能；
原型成果可复用：Ant Design模式下可生成前端代码，规范性好，真正做到了“减少从0编码”的预期目标。
测评小结：
一句话评价：表现很均衡，功能与交互覆盖全面，Ant Design模式在本次测试场景下，生成的前端代码可直接调整复用。Huashu‑Design模式下输出的原型页面美观度上表现很好
三、Claude Design
由于官网使用限制，本次通过代理网站访问，底层引擎为Claude Opus 4.7（Claude Design依托的是该模型生成），任务输入时统一选择该模型。
默认生成效果：精准解读业务逻辑，完整实现目录分类、命令详情、搜索、导出等核心功能，页面信息排版规整。
引入Huashu‑Design：在任务描述中直接要求“使用Huashu Design提示词内容进行原型页面生成”，生成结果在视觉风格上有明显提升，界面更精致，细节呈现完善。
引入Ant Design规范：同样通过自然语言指令要求参照Ant Design规范，生成的页面组件、布局贴合 Ant Design 体系，命令详情页、目录筛选、下载弹窗等交互场景全覆盖，命令语法、使用示例等业务细节还原度较高。
实际表现：
需求理解能力顶尖，无论是视觉设计还是业务细节还原都表现优异
兼顾展示效果与交互实用性，适合复杂 B 端系统原型制作
唯一限制为国内访问需借助代理，使用门槛略高
测评小结：
一句话评价：依托 Opus 4.7 模型，需求理解与细节还原能力出众，搭配两类设计 Skill的提示词内容 均可生成功能、视觉、交互俱佳的可交互原型，唯一不足是国内访问需借助代理
05 横向对比总览
核心差异点补充
1. 能力定位侧重
Google Stitch：主打视觉素材生成，不支持交互功能，仅可作为 Figma 前置素材，偏向设计辅助工具。
CodeBuddy：偏向开发级原型产出，交互完整、代码可直接复用，深度贴合国内研发流程。
Claude Design：擅长精准解读复杂业务需求，原型细节、视觉与交互表现出色，偏向高精度原型制作。
2. 落地使用门槛
Google Stitch：国内使用门槛高，需代理访问，且有地区限制，目前是免费,有限额（约400次/天，不同统计口径有差异），上手简单，无需复杂配置，但原型产出能力有限。
CodeBuddy：本土工具，无访问障碍，免费，有限额（个人体验版每月500 Credits），内置 Skill 市场即装即用，团队上手成本低。
Claude Design：国内使用门槛高，需借助代理访问，搭配设计规范需优化提示词，使用与学习门槛相对更高。无免费版本，必须订阅Pro，约$20/月。
3. 场景适配方向
Google Stitch：适合快速产出视觉草稿，导入 Figma 二次加工，仅用于轻量化视觉参考。
CodeBuddy：适配企业内部 B 端系统，可完成「原型验证 + 代码交付」全流程，是研发提效主力工具。
Claude Design：适配复杂业务系统、正式评审、对外演示汇报等对原型精度、视觉质感要求高的场景。
07 总结与建议
如果你在意的是“原型能不能动起来” → CodeBuddy等AI Coding工具应该足够产出了，其成果交互体验能满足基本的使用需求，唯一就是产品经理看到IDE窗口会有点难受；
如果你关注“生成的代码能不能直接用” → AI Coding + Ant Design模式最值得投入，可显著减少前端重复编码（公司内使用的是AntD组件）；
如果你只是需要“快速出一版好看的高保真视觉稿” → Claude Design + Huashu‑Design的组合视觉表现最佳，适合演示汇报场景，当然存在一定的使用门槛（需订阅Claude Pro，$20/月）；
如果你习惯Figma工作流 → Google Stitch可作为辅助工具，但暂不建议作为主力。
最后想说的是：AI生成原型这件事，选对工具比反复调试提示词更重要。当好的生成工具与适配的Skill（如设计Skill、前端代码生成Skill）协同配合，产品经理便能从繁琐的框线绘制中解放出来，将精力聚焦于需求逻辑与用户体验的打磨；同时，研发下游也能跳过重复性的代码堆砌，直接进入业务逻辑开发层面——这才是AI提效的真正价值所在。
—End—
如果觉得不错 随手点个 赞、在看、转发 三连吧
关注+星标 可第一时间收到更多精彩思考和总结
您的支持是我继续写下去的动力
注：原创不易，合作请在公众号后台留言，未经许可，不得随意修改及盗用原文。
