今天橘子的新產品可以一分鐘將任何內容變成播客的 ListenHub發布了，照例想用提示詞為他做一張長圖。

剛好這幾天 Airbnb 的新擬物風格圖標特別火，我就想能不能把擬物圖標融合到長圖網頁里面去。

搞了一下結果真沒問題，效果意外的非常好，整個圖片的表現力高了非常多。

所以這篇內容教大家如何用 4o 生成擬物圖標搭配藏師傅網頁提示詞制作上流宣傳圖。

生成圖標

首先我們需要生成對應的圖標，這里模仿的是 Airbnb 的風格。

我們需要根據文章內容生成跟產品宣傳內容搭配的圖標這時候可以將搭配下面的提示詞都扔給 GPT，讓他幫你分析出每部分用什么圖標表示。

下面這是一篇產品介紹文章，如果我想要為他生成一個宣傳圖，上面主要介紹功能，我需要在卡片上生成一些圖標，幫我分析一下我應該生成哪些圖標：

然后把 GPT 給出的圖標對應物品填寫到下面的提示詞里面就行，右邊就是我為ListenHub生成的九個圖標。

然后將 GPT 推出來的圖標詞語放到提示詞的[ ]里面，都是搭配左邊第一張圖片墊圖使用。

幾天我推了一個提示詞出來，然后海外的一個設計師（x.com/hemeon/status/1923060589401612647）還有另一套融合了迪特拉姆斯風格的提示詞，這兩個一個色彩多一個簡潔統一你選一個就行。

藏師傅還原風格：

生成一套 1:1 比例[文件夾棧＋播放按鈕]圖標圖片，每個圖標是一個由多個相關物品組成的微縮場景，風格參考我上傳的 Airbnb 新版圖標圖片，強調真實材質與細膩光影，具有木材、金屬、塑料、織物等材質細節。整體采用柔和打光、輕擬物風格，構圖干凈、空間緊湊，沒有過度使用圓潤邊角，像一組擺放在白色桌面上的迷你立體模型。統一視角、柔焦背景、無人物干擾，呈現精致、可信、具備情緒感染力的服務場景圖標，整體風格3D渲染，像是早期 iOS 擬物化設計的圖標，具有夢幻感，使用 C4D制作，材質有光澤感，圖片上不要有文字。

海外設計師迪特拉姆斯風格：

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.

然后我們找一個批量摳圖的產品把這些背景都扣掉，當然你也可以直接讓 GPT 生成帶透明背景的。

上傳圖片

我們現在已經有了對應的圖標了，接下來的問題就是如何將圖片上傳到生成的網頁上。

這里藏師傅前幾天做了一個產品，可以將你的圖片變成一串 Markdown 鏈接，這樣你就能圖片變成文本形式的鏈接。

我們就可以把圖片輸入到 AI 的輸入框里面。

這個使用很方便，填寫你的 ImgBB API 和 Gemini API（網頁有引導），然后上傳圖片點確定，等待生成后復制結果就行。

這里使用這個工具：https://www.youware.com/project/k0irw7xr7h

生成網頁

最后就是生成網頁了，這部分就很簡單，輸入提示詞、圖標圖片的 Markdown 鏈接，以及你需要 AI 參考的產品介紹文檔或者其他文檔，等待結果就行。

網頁生成提示詞：

基于下面產品介紹文章關鍵信息，幫我用類似蘋果發布會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. 不要省略內容要點

圖標的圖片鏈接為：


比如我這里就是用 Gemini 生成代碼，然后用 Youware 部署的。

到這里教程就結束了，如果你還想要優化一下 Gemini 生成的結果的話，可以看我第一篇寫的如何用 figma 優化我們的網頁《》。

如果你覺的教程對你有幫助的話可以幫我點個贊或者喜歡，也可以推薦給你需要的朋友們！

最后歡迎在評論區或者其他平臺 @ 我，交作業