0

0

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

心靈之曲

心靈之曲

发布时间:2025-05-30 18:00:05

|

352人浏览过

|

来源于php中文网

原创

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

别说,还真能。

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

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

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

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

生成图标方案

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

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

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

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

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

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

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

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

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

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

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

生成图标素材

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

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

FreeTTS
FreeTTS

FreeTTS是一个免费开源的在线文本到语音生成解决方案,可以将文本转换成MP3,

下载

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 生成出来的一组图标方案:

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

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

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

另外,如果你希望图标风格进一步贴合自己的项目风格,还可以把你的项目介绍文档、产品视觉参考一并丢给 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生成的效果也是一样的

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

生成效果:

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

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

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

总结

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

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

相关专题

更多
http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025

2024.08.16

ape怎么转wav
ape怎么转wav

ape可以通过使用音频转换软件、使用在线转换工具和音频编辑软件的方法转wav格式。在转换完成后,可以使用音频播放器或编辑软件打开转换后的WAV文件,以确保转换质量和文件完整性。更多关于ape相关的文章,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

323

2023.11.21

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

50

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

396

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 22.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号