10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

提示词:如何根据产品项目需求用 GPT-4o 生成Airbnb拟物风格图标库

前天 94 0

最近在折腾一个生活服务类产品的界面设计,恰好刷到了 Airbnb 最新的UI更新,那个图标风格属实让我眼前一亮——浓浓的拟物风格,既复古又新潮,有点像早期iOS黄金时代的感觉。作为一个每天都在探索AI工具的产品经理,我第一反应就是:这玩意儿,能不能用 AI 直接“抄”过来自己用?

别说,还真能。

网上已经有很多人用 GPT-4o 模拟生成了类似的图标,但大多是“看看好不好玩”那种,我更关心的是:能不能根据自己产品的需求,直接生成一整套拟物图标库?而不是孤零零一两个图标。

所以,今天这篇就跟你们聊聊我亲测的一个小流程:如何用 GPT-4o 快速生成一套符合产品项目需求的 Airbnb 拟物风格图标库。

生成图标方案

首先我们需要的不是“生成图标”,而是“生成图标方案”

我们先别急着喂提示词生成图标,第一步是——把产品核心功能点罗列出来。

举个例子:我这次是做一个AI播客平台,核心功能模块包括:多样化输入与智能生成、超真实人声与角色定制、多语言支持与实时信息整合、音频编辑与发布……

这时候,我就把这些模块点列成一张功能表,然后直接丢给 GPT-4o,告诉它:

“我要设计一套符合 Airbnb 拟物风格的图标库,分别对应以下功能,AI播客平台核心功能模块包括:多样化输入与智能生成、超真实人声与角色定制、多语言支持与实时信息整合、音频编辑与发布,能不能帮我拆解每个功能适合用什么物品拟物来表达?”

结果 GPT 给我输出了非常贴切的建议,比如:

  • 多样化输入与智能生成 → 拟物图标建议:铅笔和纸张、老式打字机、录音笔、书写中笔记本

  • 超真实人声与角色定制 → 戏剧面具、收音机麦克风、调音旋钮面板

  • 多语言支持与实时信息整合 → 地球仪/翻开的地图、翻译书籍(带多个国家旗帜的小书)、指南针与天气图标组合

  • 音频编辑与发布 → 剪刀与磁带、录音带和混音台、胶卷+时间轴卷尺、邮筒或快递箱

这些图标建议本身就很具象,非常适合生成拟物图标。

生成图标素材

接下来,把 GPT 给出的物品描述填入这段提示词模板中:

以下提示词是根据X上一位设计师(迪特拉姆斯)的提示词翻译而来

x.com/hemeon/status/1923060589401612647

原提示词:
A highly detailed 3D isometric icon of a [文件夹栈+播放按钮], inspired by a Dieter Rams Braun design.
Style: Airbnb 2024 icon language — miniature diorama / emoji-like object with crisp edges, realistic textures, and soft handcrafted realism.
Material: a mix of matte plastic, brushed aluminum, ceramic or leather depending on the original object.
View: three-quarter front-left isometric view with a slight top-down angle.
Lighting: soft neutral studio lighting from the top-left with subtle shadows and gentle gloss highlights.
Color palette: warm, natural tones with subtle gradients and no harsh contrasts.
Background: clean white, no drop shadow or noise.
Mood: minimal, charming, utilitarian, premium.
Rendering: hyper-detailed, photorealistic object with depth and tactility, like a designer lifestyle emoji or miniature product model.
Optional Add-on for Replication:
Use the attached photo as a reference for proportions and layout. Do not copy exactly — reinterpret it in the Airbnb icon aesthetic.
转译后提示词:
生成一套 1:1 比例[文件夹栈+播放按钮]图标图片,每个图标是一个由多个相关物品组成的微缩场景,风格参考我上传的 Airbnb 新版图标图片,强调真实材质与细腻光影,具有木材、金属、塑料、织物等材质细节。整体采用柔和打光、轻拟物风格,构图干净、空间紧凑,没有过度使用圆润边角,像一组摆放在白色桌面上的迷你立体模型。统一视角、柔焦背景、无人物干扰,呈现精致、可信、具备情绪感染力的服务场景图标,整体风格3D渲染,像是早期 iOS 拟物化设计的图标,具有梦幻感,使用 C4D制作,材质有光泽感,图片上不要有文字。

这些提示词可以直接在 GPT-4o 里跑,。生成出来的图标风格统一、有氛围感,完全能直接放进设计稿里用。

下面是我使用GPT-4o 生成出来的一组图标方案:

如果希望与网页项目更加贴合,还需要进行一步操作,那就是把图标扣出来,我直接用即梦AI扣的,不过是需要一张一张扣,如果你有批量扣图的,也可以直接批量扣,省事一些!

另外,如果你希望图标风格进一步贴合自己的项目风格,还可以把你的项目介绍文档、产品视觉参考一并丢给 GPT,让它在生成时考虑一致性。

生成网页

最后就是生成网页了,这部分就很简单,输入提示词、图标图片的 Markdown 链接,以及你需要 AI 参考的产品介绍文档或者其他文档,等待结果就行。

苏米就以前面分享过的《Bento Grid “便当盒子”网格布局风格探索》为例子,生成一个产品的介绍信息页

网页生成提示词:

基于上面产品介绍文章关键信息,帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示,具体要求为:
​
1. 尽量在一页展示全部信息,背景为#F8F6F5、卡片背景为白色,文字颜色为#010101,高亮按钮和文字背景色为#F69AAC-DF95E3-7DBDE9 的渐变 ,卡片内的布局为主标题简短表述加大图标
2. 将 Markdown 格式的图片链接的图标放到合适的卡片中,防止图标跟文字重叠
3. 强调超大字体或数字突出核心要点,画面中有超大视觉元素强调重点,与小元素的比例形成反差
4. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
5. 中英文混用,中文大字体粗体,英文小字作为点缀
6. 简洁的勾线图形化作为数据可视化或者配图元素
7. 运用高亮色自身透明度渐变制造科技感,但是不同高亮色不要互相渐变
8. 数据可以引用在线的图表组件,样式需要跟主题一致
9. 使用HTML5、TailwindCSS 3.0+(通过CDN引入)和必要的JavaScript
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
​
​
图标的图片链接为:![这是一张三维效果图,展示了一个浏览器窗口和一个鼠标指针。 800x800](https://i.ibb.co/nNQmqDJ5/image051902.png)

可以使用Gemini,如果你没有Pro,那么我建议直接使用DeepSeek-V3生成的效果也是一样的

生成效果:

生成后需要替换生成的代码中的图片地址,最终就是这样子的

演示地址:https://www.showyourcode.app/share/c26d0ad7-26d9-46f0-8725-96e747f381f2

总结

AI生成图标的终极意义不是“好看”,而是“好用”,很多人看到拟物图标只想着“能不能复刻”,但作为产品人,我们真正需要思考的是:如何把 AI 生成力应用到产品实际落地中,把它变成一种能“提高沟通效率”和“加快迭代速度”的新工作方式。

最后,推荐你也试试这个方法,选一个你正在做的产品,按照这个流程撸一套属于你自己的图标库,如果你也想让AI设计真正服务于业务,不妨从建一套属于自己的拟物图标库开始——毕竟,能落地的设计才是好设计。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#AI生成图标 #生成图标提示词 #网页生成提示词 #Bento Grid 
收藏 1
推荐阅读
  • 提示词:如何根据产品项目需求用 GPT-4o 生成Airbnb拟物风格图标库
  • 2025最新AI指令合集,AI提示词从入门到精通:学习+工具+实战,轻松搞定DeepSeek
  • 震惊!我竟然用一个指令就解锁了DeepSeek的隐藏能力Ai绘画功能,吉卜力风格堪比GPT-4o平替
  • ChatGPT中文调教prompt
  • 提示词:用豆包复刻治愈系IP图文,轻松用AI做出各种治愈系漫画插图
评论 (0)
请登录后发表评论
分类精选
震惊!我竟然用一个指令就解锁了DeepSeek的隐藏能力Ai绘画功能,吉卜力风格堪比GPT-4o平替
4770 1月前
2025最新AI指令合集,AI提示词从入门到精通:学习+工具+实战,轻松搞定DeepSeek
1903 2月前
ChatGPT中文调教prompt
889 10月前
提示词:豆包生成真实美女生活照自拍,豆包美女自拍提示词生成器(附下载)
330 1周前
提示词:如何根据产品项目需求用 GPT-4o 生成Airbnb拟物风格图标库
95 前天
提示词:用豆包复刻治愈系IP图文,轻松用AI做出各种治愈系漫画插图
32 12小时前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 提示词:用豆包复刻治愈系IP图文,轻松用AI做出各种治愈系漫画插图
2 提示词:如何根据产品项目需求用 GPT-4o 生成Airbnb拟物风格图标库
3 提示词:豆包生成真实美女生活照自拍,豆包美女自拍提示词生成器(附下载)
4 震惊!我竟然用一个指令就解锁了DeepSeek的隐藏能力Ai绘画功能,吉卜力风格堪比GPT-4o平替
5 2025最新AI指令合集,AI提示词从入门到精通:学习+工具+实战,轻松搞定DeepSeek
6 ChatGPT中文调教prompt
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联