前言

不知道你有沒(méi)有這樣的痛點(diǎn)，使用AI生成的頁(yè)面總是能夠被一眼認(rèn)出來(lái)，典型的紫色漸變色。

那么有沒(méi)有解決方案呢？

有！歐陽(yáng)1分鐘教會(huì)你。

加入歐陽(yáng)的AI交流群

步驟1：截圖和生成json樣式文件

找到你喜歡（參考、抄襲）的網(wǎng)站進(jìn)行截圖。

如果你只想?yún)⒖寄繕?biāo)網(wǎng)站的部分UI，那么就使用微信或者電腦的截圖軟件只截取參考UI部分。

如果想?yún)⒖颊麄€(gè)網(wǎng)站的UI，就需要截網(wǎng)站全圖了，方法如下：

• F12打開(kāi)谷歌瀏覽器的控制臺(tái)，按下 Ctrl + Shift + P（Windows） 或 Cmd + Shift + P（Mac）

• 打開(kāi)命令面板輸入screenshot，選擇Capture full size screenshot進(jìn)行截圖，如圖：
  

然后將截圖丟給任何AI或者AI工具都可以，比如GPT、Cursor、Claude等，加上這樣的提示詞：

創(chuàng)建一個(gè)能體現(xiàn)該布局風(fēng)格的設(shè)計(jì).json 文件。包含結(jié)構(gòu)、間距、字體和顏色等要素，以便我將其作為應(yīng)用程序的設(shè)計(jì)系統(tǒng)使用。目標(biāo)是幫助 AI 精準(zhǔn)復(fù)現(xiàn)這種視覺(jué)效果。

我這里是使用的codex，如圖：

經(jīng)過(guò)這一步我們就已經(jīng)有了參考網(wǎng)站的design.json樣式文件。

步驟2：根據(jù)樣式j(luò)son文件生成頁(yè)面

和平時(shí)讓AI生成頁(yè)面的提示詞一樣，只是需要加一個(gè)限制：

要求使用design.json 進(jìn)行樣式設(shè)計(jì)

比如我想做一個(gè)nano banana模型生成圖片的落地頁(yè)，我給AI的提示詞就是這樣的：

這個(gè)是最終生成的效果對(duì)比圖，左邊是我使用這一句提示詞生成的網(wǎng)頁(yè)，右邊是參考的網(wǎng)頁(yè)：

總結(jié)

使用樣式j(luò)son文件約束AI應(yīng)該是目前最簡(jiǎn)單直接的方案了，除此之外還有一些其他的方案，比如：不讓AI一次性生成整個(gè)頁(yè)面，而是拆分成多個(gè)步驟，首先生成頁(yè)面的UI框架，然后再一個(gè)個(gè)模塊的填充內(nèi)容。