大厂产品经理都在这么做:AI 生成设计稿,导入到 Figma/MG/Pixso 接着编辑

2025-05-09 15:15:08

AI 生成的“设计稿”总是不完全满意?推荐使用 HTML to Figma/MasterGo/Pixso 导入到 Figma、MasterGo 或 Pixso 继续编辑,全程不花一分钱

这是我们一个用户用 Claude 生成的设计稿
对应的 Prompt 附在本文末尾
![](https://dir.demoway.cn/assets/ad33a308-318b-45ce-a793-65497bc89688)

关于 AI 生成设计稿的几个背景

  1. 实际上都是网页: 各类文章、视频里提到的 AI 生成设计稿,99% 以上实际上生成的是 HTML 网页。比如我们让它生成一个 App 的设计稿,实际上给我们的是一个或若干 HTML 网页,里面展示的是生成出来的 App 的内容。为了兼顾您的习惯,下文都使用“网页/设计稿”来代替这个意思。

  2. 只是“设计稿”而已: 这样的“网页/设计稿”只是看上去像那么回事儿,要让它成为真正的产品,还很远,因为它真的只是“设计稿”而已。

  3. Claude Sonnet 是首选: 目前来说,Claude Sonnet 是市面上最受认可的 AI 生成“网页/设计稿”的大模型。头部的 AI IDE - Cursor 和字节的 AI IDE Trae,以及相当部分的 AI 生成网页的工具,生成“网页/设计稿”的能力实际上调用的就是 Claude Sonnet。

  4. Claude 可以直接用: 跟其他大模型一样,Claude Sonnet 有网页版,可以直接使用。

  5. 也可以用截图: Claude Sonnet 除了支持用 prompt 生成“网页/设计稿”,也支持将截图转成“网页/设计稿”。

  6. 免费: 可以上面提到的 Claude Sonnet、Cursor、Trae 都有免费使用额度,甚至 Trae 看起来目前是无限量使用,所以我们可以一分钱不花。

但是,它没法用

简言之: 设计稿是有了。但是,是初步的,无法编辑。

因为生成的“网页/设计稿”实际上是网页代码,我们可以在浏览器里打开看,但除了不断跟 AI 聊天让它改设计(有时候还会给我们乱改),我们无法用 Figma 等设计软件进行精细编辑。

某国内游戏头部大厂的设计师告诉我们:

“如果生成的设计稿有 60% 符合,就够用了”

“还是需要人决策细节创意的处理。在很多细节还是不够聪明的。(这可能也是游戏 UI 和普通的互联网 UI 差异点) 可能互联网的 UI 限制尺寸可以这样搞,快速复制改下就能用”

下面这个是在 Trae 里,用 Prompt 文本生成的“网页/设计稿”

所以我们需要一个 将 AI 生成的页面转成设计稿的工具

试试我们推出的 HTML to Figma 插件和 HTML to MasterGo 插件。下面是完整的视频教程:

互相学习,一起写好 Prompt

我们有个产品经理、设计师交流 AI 设计的微信群,有兴趣加入的同学可以长按扫描添加下面的企微

附:文章开头的设计稿的 Prompt

我是一名资深B端的产品经理,想开发一款面向国内市场的移动端销售管理App类似纷享销客,现在需要输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:
1、用户体验分析:先分析这个 App 的主要功能和用户需求,确定核心交互逻辑。
2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。
3、高保真 UI 设计:作为 UI 设计师,设计贴近真实 iOS/Android 设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。
4、HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的 App 设计。拆分代码文件,保持结构清晰:
5、每个界面应作为独立的 HTML 文件存放,例如 home.html、profile.html、settings.html 等。
* index.html 作为主入口,不直接写入所有界面的 HTML 代码,而是使用 iframe 的方式嵌入这些 HTML 片段,并将所有页面直接平铺展示在 index 页面中,而不是跳转链接。
* 真实感增强:
    * 界面尺寸应模拟 iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。
    * 使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。
    * 添加顶部状态栏(模拟 iOS 状态栏),并包含 App 导航栏(类似 iOS 底部 Tab Bar)。
 请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。