早上群里有個朋友說自己用 Gemini APP 里面的深度研究搞了一個特斯拉 Q1 財報的分析文檔，另一個朋友說轉(zhuǎn)成網(wǎng)頁，我就說我試試。

我直接把他的文檔和我最近探索出來的提示詞就放到了 Chatwise 里面，以往我都是用 Claude 3.7 生成網(wǎng)頁的，這次默認是 Gemini 2.5 Pro，我也沒看就按下了回車。

沒想到生成的網(wǎng)頁炒雞驚艷，Gemini 的網(wǎng)頁內(nèi)容很多同時理解了提示詞提到的設(shè)計風(fēng)格，非常漂亮。

可以看圖也可以在這里預(yù)覽：https://kueaqan0fo.app.yourware.so/

這是特斯拉主題色紅色的版本：https://2mfkmvgj12.app.yourware.so/

其實這套提示詞我好幾天就發(fā)過了，不過主要在 Claude 上面用，雖然好一些但是，沒這么驚艷，剛好這次 Gemini 效果這么好之后寫篇內(nèi)容回答一下使用我的提示詞的常見問題。

先看提示詞：

幫我將這個特斯拉財報文檔生成網(wǎng)頁，不要遺漏信息

根據(jù)上面內(nèi)容生成一個 HTML 動態(tài)網(wǎng)頁

1. 使用Bento Grid風(fēng)格的視覺設(shè)計，純黑色底配合特斯拉紅色#E31937顏色作為高亮

2. 強調(diào)超大字體或數(shù)字突出核心要點，畫面中有超大視覺元素強調(diào)重點，與小元素的比例形成反差

3. 中英文混用，中文大字體粗體，英文小字作為點綴

4. 簡潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素

5. 運用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變

6. 模仿 apple 官網(wǎng)的動效，向下滾動鼠標(biāo)配合動效

8. 數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致

9. 使用 Framer Motion （通過CDN引入）

10. 使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript

11. 使用專業(yè)圖標(biāo)庫如Font Awesome或Material Icons（通過CDN引入）

12. 避免使用emoji作為主要圖標(biāo)

13. 不要省略內(nèi)容要點

什么是 Bento Grid 風(fēng)格

這里主要的關(guān)鍵詞是 Bento Grid 風(fēng)格。

“Bento”來源于日語「弁當(dāng)」（べんとう），意思就是“便當(dāng)”，也就是我們常說的盒飯、便攜式餐食。

也有便當(dāng)盒的意思，所以這種風(fēng)格的特點就是所有的內(nèi)容都在卡片里面，然后不同大小的卡片相互組合，在 16:9 的 PPT 上看起來像便當(dāng)盒所以得名。

蘋果的 PPT 經(jīng)常使用這種風(fēng)格，后來在前兩年就在設(shè)計圈變成了一種潮流，大家都用類似的方式設(shè)計運營圖片或者網(wǎng)站。

甚至還有網(wǎng)站專門收集類似的設(shè)計風(fēng)格：https://bentogrids.com/

但是由于 Claude 的多模態(tài)能力和模型知識時間問題，他不理解 Bento Grid 風(fēng)格的核心要素，所以生成的網(wǎng)頁有卡片，但是不全是卡片，那就沒那味了，其他模型的情況也是類似。

Gemini 由于多模態(tài)能力強大，所以很自然的理解了核心理念，只需要一個詞就可以不需要墊圖。

提示詞到底怎么用

我發(fā)現(xiàn)我說了這么多依然有朋友不知道怎么用，這里針對 Gemini 2.5 Pro 給幾個渠道。

首先 Gemini 2.5 Pro 這個模型的 API 是免費的，雖然有速率限制但是也是夠用的。

你需要訪問https://aistudio.google.com/prompts/new_chat，然后選擇 Gemini 2.5 Pro 就可以直接用了。

也可以點擊那個「Get API Key」按鈕然后創(chuàng)建 API 密鑰在 Cursor 或者 Chatwise 這種地方使用。

當(dāng)然最方便的是在 Gemini App 中使用，但這里的模型感覺會偷懶，生成的網(wǎng)頁不會讀取太多信息。

最后就是你在生成網(wǎng)頁的時候需要有網(wǎng)頁的內(nèi)容，我的建議是吧內(nèi)容都放在一個文檔里面然后把文檔和提示詞一起發(fā)給模型就行，就像這樣。

一些其他技巧

如果你需要讓模型學(xué)習(xí)更加詳細的風(fēng)格的話是可以墊圖的，比如即使是 Bento Grid 風(fēng)格也發(fā)展出來了很多分支，我們可以找?guī)讖埾嗨频脑O(shè)計稿，把設(shè)計稿、文檔和提示詞一起發(fā)給 AI 模型。

但是這種會有個弊端，圖片會占用模型的上下文，如果圖片很大的話，AI 回復(fù)的代碼量和內(nèi)容量就會很少。

還有就是老生常談的網(wǎng)頁轉(zhuǎn)設(shè)計稿了，Bento Grid 風(fēng)格尤其適合做 PPT，我們完全可以生成網(wǎng)頁之后再轉(zhuǎn)成設(shè)計稿當(dāng)做 PPT 來用，那就需要用一下網(wǎng)頁轉(zhuǎn)設(shè)計稿的 Figma 插件，主要有兩個：

html.to.design：收費插件但是每天有免費額度，所以也夠用了。

https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css

騰訊 CoDesign-HtmltoDesign：騰訊出的網(wǎng)頁轉(zhuǎn)設(shè)計稿插件效果也不錯，而且免費無限用。

https://www.figma.com/community/plugin/1398619471957761832/codesign-htmltodesigndesigngenie

比如上面的特斯拉財報網(wǎng)頁轉(zhuǎn)成設(shè)計稿之后，稍微調(diào)整一下就是一套 PPT 了。

好了，今天的網(wǎng)頁生成教程就到這里了。

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

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