開頭先來個(gè)福利：

我最近發(fā)現(xiàn)我自己的網(wǎng)頁提示詞在 Gemini 效果很好，但是 AI Studio 的 Gemini 2.5 是限速的。

谷歌現(xiàn)在 Gemini 應(yīng)用會(huì)給學(xué)生免費(fèi)到 2026 年，會(huì)在八月驗(yàn)證 edu 郵件，所以你起碼可以免費(fèi)試用三個(gè)月的 Gemini 高級(jí)版，這里點(diǎn)擊 Get Offer 領(lǐng)取：https://gemini.google/students/

上周發(fā)了個(gè) DeepSeek-Prover-V2 的一圖流介紹，一張圖展示了 Prover-V2 的主要信息，非常清晰直觀，很多朋友都問怎么做的。

今天就教一下大家，如何用提示詞生成網(wǎng)頁之后再將網(wǎng)頁變成對應(yīng)的圖片，而且我還會(huì)教你怎么用 Figma 調(diào)整生成之后的小問題，導(dǎo)出完美的圖片。

其實(shí)這個(gè)是從藏師傅的 3.0 網(wǎng)頁生成提示詞拓展而來的，如果你還沒看 3.0 的提示詞可以看看《》。

上周 Orange 來找我說用我的 3.0 提示詞把剛發(fā)布的千問 3 模型內(nèi)容變成類似蘋果發(fā)布會(huì) PPT 的一圖流展示非常直觀。

就是有個(gè)問題是生成的網(wǎng)頁很長不好截圖，我就提了一嘴說讓 AI 盡量在一頁生成就行，他試了一下果然行，可以看看我生成的 Gork 3 和千問 3 的模型介紹。

生成網(wǎng)頁

我們就以 DeepSeek-Prover-V2 這個(gè)例子介紹一下，還是我之前講 Vibe Coding 說的第一次生成結(jié)果至關(guān)重要，所以我們需要準(zhǔn)備一些東西。

首先是模型的論文或者介紹博客：

如果你要介紹產(chǎn)品更新也是一樣，需要上傳文檔，論文的話就是 PDF 就行，如果是介紹博客就直接全選網(wǎng)頁內(nèi)容保存一個(gè) Markdown 文件就行，也可以用我之前也介紹的 Obsidian 剪藏插件獲取。

然后就是輸入提示詞了：

這里我們只是基于藏師傅網(wǎng)頁生成 3.0 提示詞上加了一句話“盡量在一頁展示全部信息”。

這里你可以根據(jù)模型品牌的主題色更改第一條的顏色部分，比如 Qwen 就是白色背景紫色高亮，Grok 就是暗色背景橙色高亮。

基于模型發(fā)布文檔的關(guān)鍵信息，幫我用類似蘋果發(fā)布會(huì)PPT的Bento Grid風(fēng)格的視覺設(shè)計(jì)生成一個(gè)中文動(dòng)態(tài)網(wǎng)頁展示，具體要求為： 1. 盡量在一頁展示全部信息，背景為白色、文字和按鈕顏色為純黑色，高亮色為#4D6BFE 2. 強(qiáng)調(diào)超大字體或數(shù)字突出核心要點(diǎn)，畫面中有超大視覺元素強(qiáng)調(diào)重點(diǎn)，與小元素的比例形成反差 3. 網(wǎng)頁需要以響應(yīng)式兼容更大的顯示器寬度比如1920px及以上 4. 中英文混用，中文大字體粗體，英文小字作為點(diǎn)綴 5. 簡潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素 6. 運(yùn)用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變 7. 數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致 8. 使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript 9. 使用專業(yè)圖標(biāo)庫如Font Awesome或Material Icons（通過CDN引入） 10. 避免使用emoji作為主要圖標(biāo) 11. 不要省略內(nèi)容要點(diǎn)

一般這個(gè)時(shí)候第一次生的結(jié)果就已經(jīng)不錯(cuò)了，如果沒有問題的話你就可以用最大的顯示面積截圖就行。

但是經(jīng)常會(huì)有一些小問題，比如在布局上可能會(huì)出現(xiàn)的問題有標(biāo)題沒有加上卡片和邊框，或者在某個(gè)部分的卡片沒有占滿全部的空間，比如我 Deepseek 這個(gè)就有問題。

這種問題讓 AI 改的話他就會(huì)全部生成，而且我們也不好描述，這時(shí)候就可以導(dǎo)入到 Figma 我們手動(dòng)調(diào)整一下，可能就十幾秒就能搞定。

Figma 微調(diào)設(shè)計(jì)稿

首先我們需要找到這次要用的核心 Figma 插件 html.to.design 只需要在隨便一個(gè) Figma 文件里面點(diǎn)擊下方 Tab 欄圈住的圖標(biāo)之后搜索就行。

然后我們輸入需要導(dǎo)入的網(wǎng)頁地址，如果你沒有的話可以用 Youware 部署，然后點(diǎn)擊 Import 按鈕就行.

之后導(dǎo)入一般的之后他會(huì)讓你選一下其他選項(xiàng)，這里除了不讓開的開關(guān)你都開了就行，然后 Font Mappings 字體設(shè)置這里需要選替換字體，如果你的網(wǎng)頁有中文的話我推薦你換成 Pingfang SC。

然后你就能看到導(dǎo)入的網(wǎng)頁了，是一個(gè)完整的畫板，里面還有 Youware 的下導(dǎo)航這里有很多我們不需要的部分，你就可以直接選中這部分刪掉就行。

刪掉沒用的 tab 欄之后我們發(fā)現(xiàn) Iframe 這個(gè)里面也沒有內(nèi)容，然后實(shí)際的內(nèi)容都在紅框沒有權(quán)重的那個(gè) Iframe 里面。

所以我們需要?jiǎng)h掉最下面的Iframe圖層，之后講 Container 和 1920w light 取消編組，這樣我們就剩下了真正有用的部分。

終于要進(jìn)行我們的改動(dòng)了，首先我們希望給頭部的標(biāo)題也加上卡片，這時(shí)候我們選了一下發(fā)現(xiàn)頭部 Header 的寬度比下面所有卡片加起來的寬度是要寬的所以先把他們的寬度統(tǒng)一改成 1472px。

之后我們想要復(fù)制下面灰色卡片的樣式而不需要他的內(nèi)容，只需要隨便選一個(gè)下面的灰色卡片，然后右鍵-復(fù)制粘貼為-復(fù)制屬性就行，粘貼也是一樣選擇上么的 Header 卡片選擇粘貼屬性，你就發(fā)現(xiàn)標(biāo)題也有卡片了。

接下來我們修復(fù)，模型規(guī)模這里的卡片沒有占滿全部空間的問題，選中模型規(guī)模的卡片，按住 Option 按鈕我們發(fā)現(xiàn)他到雙模訓(xùn)練卡片的寬度是 398 然后他們需要有 24px 的間距。

所以模型規(guī)模的卡片寬度應(yīng)該為 350+398-24，你直接在寬度輸入框?qū)憯?shù)學(xué)公式就行，F(xiàn)igma 會(huì)幫你算好的，現(xiàn)在是不是 OK 了。

最后我們做導(dǎo)出前的最后一步，整個(gè)卡片四周的邊距有些問題，左右很寬上下很窄，我們想要他們一樣，這個(gè)時(shí)候我們只需要選中 html-Body 這個(gè)圖層，然后把紅框部分的間距都改成統(tǒng)一的 32 就行。

之后將html-Body 寬度這里改成適應(yīng)內(nèi)容。

最后將最上面的 Iframe 畫框右鍵取消編組，你會(huì)發(fā)現(xiàn)已經(jīng)搞定了，然后我們選中這個(gè)畫板，把最右側(cè)拉到底部在導(dǎo)出這里點(diǎn)一下加號(hào)，然后點(diǎn)擊導(dǎo)出按鈕就行。

如果你想要想我上面的的展示圖片那樣給圖片加個(gè)漸變邊框的話可以用 postspark（https://postspark.app/screenshot） 這類工具。

好了，今天的圖片生成教程就到這里了。

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

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