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

剛好這幾天 Airbnb 的新擬物風(fēng)格圖標(biāo)特別火，我就想能不能把擬物圖標(biāo)融合到長圖網(wǎng)頁里面去。

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

所以這篇內(nèi)容教大家如何用 4o 生成擬物圖標(biāo)搭配藏師傅網(wǎng)頁提示詞制作上流宣傳圖。

生成圖標(biāo)

首先我們需要生成對應(yīng)的圖標(biāo)，這里模仿的是 Airbnb 的風(fēng)格。

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

下面這是一篇產(chǎn)品介紹文章，如果我想要為他生成一個宣傳圖，上面主要介紹功能，我需要在卡片上生成一些圖標(biāo)，幫我分析一下我應(yīng)該生成哪些圖標(biāo)：

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

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

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

藏師傅還原風(fēng)格：

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

海外設(shè)計師迪特拉姆斯風(fēng)格：

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.

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

上傳圖片

我們現(xiàn)在已經(jīng)有了對應(yīng)的圖標(biāo)了，接下來的問題就是如何將圖片上傳到生成的網(wǎng)頁上。

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

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

這個使用很方便，填寫你的 ImgBB API 和 Gemini API（網(wǎng)頁有引導(dǎo)），然后上傳圖片點確定，等待生成后復(fù)制結(jié)果就行。

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

生成網(wǎng)頁

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

網(wǎng)頁生成提示詞：

基于下面產(chǎn)品介紹文章關(guān)鍵信息，幫我用類似蘋果發(fā)布會PPT的Bento Grid風(fēng)格的視覺設(shè)計生成一個中文動態(tài)網(wǎng)頁展示，具體要求為：

1. 盡量在一頁展示全部信息，背景為#F8F6F5、卡片背景為白色，文字顏色為#010101，高亮按鈕和文字背景色為#F69AAC-DF95E3-7DBDE9 的漸變 ，卡片內(nèi)的布局為主標(biāo)題簡短表述加大圖標(biāo)
2. 將 Markdown 格式的圖片鏈接的圖標(biāo)放到合適的卡片中，防止圖標(biāo)跟文字重疊
3. 強調(diào)超大字體或數(shù)字突出核心要點，畫面中有超大視覺元素強調(diào)重點，與小元素的比例形成反差
4. 網(wǎng)頁需要以響應(yīng)式兼容更大的顯示器寬度比如1920px及以上
5. 中英文混用，中文大字體粗體，英文小字作為點綴
6. 簡潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素
7. 運用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變
8. 數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致
9. 使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript
10. 避免使用emoji作為主要圖標(biāo)
11. 不要省略內(nèi)容要點

圖標(biāo)的圖片鏈接為：


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

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

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

最后歡迎在評論區(qū)或者其他平臺 @ 我，交作業(yè)