前言

不知道你有沒有這樣的痛點，使用AI生成的頁面總是能夠被一眼認出來，典型的紫色漸變色。

那么(me)有(you)沒有(you)解決方案呢？

有！歐陽1分鐘教會你(ni)。

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

找(zhao)到你喜歡（參(can)考、抄襲）的網站進行截(jie)圖。

如果你(ni)只想參(can)考目(mu)標網站(zhan)的(de)部(bu)分UI，那么就(jiu)使用微信或者電腦(nao)的(de)截(jie)圖軟件只截(jie)取參(can)考UI部(bu)分。

如果想參考整(zheng)個網站(zhan)的(de)UI，就(jiu)需要截網站(zhan)全(quan)圖了(le)，方法(fa)如下：

• F12打開谷歌瀏覽器的控制臺，按下 Ctrl + Shift + P（Windows） 或 Cmd + Shift + P（Mac）

• 打開命令面板輸入screenshot，選擇Capture full size screenshot進行截圖，如圖：
  

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

創建一個能體現該布局風格的設計.json 文件。包含結構、間距、字體和顏色等要素，以便我將其作為應用程序的設計系統使用。目標是幫助 AI 精準復現這種視覺效果。

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

經過這一步我們就已經有了參考網站的design.json樣式文件。

步驟2：根據樣式json文件生成頁面

和平時(shi)讓(rang)AI生成頁面的提示(shi)詞一樣，只是(shi)需要(yao)加一個(ge)限(xian)制(zhi)：

要求使用design.json 進行樣式設計

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

這個是最終生成的效果對比圖，左邊是我使用這一句提示詞生成的網頁，右邊是參考的網頁：

總結

使用樣式json文件約(yue)束AI應該是目前(qian)最簡單直接的方案了，除此之外還有一(yi)些(xie)其他的方案，比如：不讓AI一(yi)次性(xing)生(sheng)成(cheng)整個(ge)頁面(mian)，而是拆分成(cheng)多個(ge)步驟，首先(xian)生(sheng)成(cheng)頁面(mian)的UI框(kuang)架，然后再一(yi)個(ge)個(ge)模塊的填(tian)充內容。