寫了一篇詳細的教程 教大家如何生成這種一圖流模型或者產品介紹宣傳圖 順便教一下怎麼用 Figma 修改從網頁生成的圖片

如果等不及施工可以看這裡：mp.weixin.qq.com/s/uQQ7R8rBUXZ...

也可以參考橘子這個：x.com/oran_ge/status/191721521...

生成網頁 我們就以 DeepSeek-Prover-V2 這個例子介紹一下，還是我之前講 Vibe Coding 說的第一次生成結果至關重要，所以我們需要準備一些東西。 首先是模型的論文或者介紹博客： 如果你要介紹產品更新也是一樣，需要上傳文檔，論文的話就是 PDF 就行，如果是介紹博客就直接全選網頁內容保存一個

提示詞： 基於模型發佈文檔的關鍵信息，幫我用類似蘋果發佈會PPT的Bento Grid風格的視覺設計生成一箇中文動態網頁展示，具體要求為： 1. 儘量在一頁展示全部信息，背景為白色、文字和按鈕顏色為純黑色，高亮色為#4D6BFE 2.

一般這個時候第一次生的結果就已經不錯了，如果沒有問題的話你就可以用最大的顯示面積截圖就行。 但是經常會有一些小問題，比如在佈局上可能會出現的問題有標題沒有加上卡片和邊框，或者在某個部分的卡片沒有佔滿全部的空間，比如我 Deepseek 這個就有問題。 這種問題讓 AI

Figma 微調設計稿 首先我們需要找到這次要用的核心 Figma 插件 html. to. design 只需要在隨便一個 Figma 文件裡面點擊下方 Tab 欄圈住的圖標之後搜索就行。

然後我們輸入需要導入的網頁地址，如果你沒有的話可以用 Youware 部署，然後點擊 Import 按鈕就行. 之後導入一般的之後他會讓你選一下其他選項，這裡除了不讓開的開關你都開了就行，然後 Font Mappings 字體設置這裡需要選替換字體，如果你的網頁有中文的話我推薦你換成 Pingfang SC。

然後你就能看到導入的網頁了，是一個完整的畫板，裡面還有 Youware 的下導航這裡有很多我們不需要的部分，你就可以直接選中這部分刪掉就行。 刪掉沒用的 tab 欄之後我們發現 Iframe 這個裡面也沒有內容，然後實際的內容都在紅框沒有權重的那個 Iframe 裡面。

終於要進行我們的改動了 首先我們希望給頭部的標題也加上卡片，這時候我們選了一下發現頭部 Header 的寬度比下面所有卡片加起來的寬度是要寬的所以先把他們的寬度統一改成 1472px。

最後我們做導出前的最後一步，整個卡片四周的邊距有些問題，左右很寬上下很窄，我們想要他們一樣，這個時候我們只需要選中 html-Body 這個圖層，然後把紅框部分的間距都改成統一的 32 就行。 之後將html-Body 寬度這裡改成適應內容。 最後將最上面的 Iframe

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

好了，今天的圖片生成教程就到這裡了。 最後歡迎在評論區或者其他平臺 @ 我，交作業