用 Cursor 做 UI，有兩種最簡單又有效的方法，一個(gè)免費(fèi)一個(gè)付費(fèi)，不管你要做網(wǎng)頁 UI 還是應(yīng)用程序 UI，都能用。

我這里不推薦直接用 Cursor 自帶模型生成 UI，模型生成出來的效果比較差，就算是最強(qiáng)的 Claude 也不太行。

本文我分享的方法是我最近學(xué)到的，先說免費(fèi)的。當(dāng)我們手頭有一張 UI 圖片時(shí)，不要直接丟給 Cursor，而是先用 Google 的 Gemini 模型、Claude 或者 ChatGPT，這里我用的是 Gemini 并打開 Canvas 功能。

我把 UI 圖片放到 Gemini 中，然后讓它根據(jù) UI 截圖生成一份 JSON 格式的設(shè)計(jì)規(guī)范文件。

提示詞參考：

Create a JSON-formatted design system profile. This profile should extract relevant visualdesign information from the provided screenshots. The JSON output must specifically include:
The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).The structural elements and layout principles.Any other attributes crucial for an Al to consistently replicate these design systems.Crucially, do not include the specific content or data present within the images, focusing solely

生成出來的 JSON 包含整體設(shè)計(jì)風(fēng)格、結(jié)構(gòu)元素、布局原則，以及一些關(guān)鍵屬性。

接著把這份 JSON 文件復(fù)制到 Cursor 中，讓 Cursor 根據(jù)這份 JSON 來生成代碼。

提示詞參考：

參考 @design.json 設(shè)計(jì)規(guī)范，根據(jù)圖片中的樣式，生成一個(gè)網(wǎng)頁。

生成效果如下：

對(duì)比一下如果直接用 Cursor 根據(jù)截圖生成代碼，不用 JSON 文件。

提示詞：

按照?qǐng)D片中的UI樣式，創(chuàng)建一個(gè)新的頁面。注意：盡可能按照?qǐng)D片中的樣子創(chuàng)建!!!

效果如下：

可以看到，效果差了很多，我原型 UI 的截圖如下：

這是我隨便找的一張圖片作為例子，可以明顯看出，先提取一份 JSON 文件，然后再讓 Cursor 生成代碼，效果要好很多。

為什么這種先提取 JSON 文件再生成代碼的方法很有效？因?yàn)楫?dāng)任務(wù)涉及精確、結(jié)構(gòu)化、無歧義的數(shù)據(jù)時(shí)，JSON 讓模型理解更清晰，處理更高效，生成的結(jié)果也更穩(wěn)定。

以上就是免費(fèi)的方法。

接下來是付費(fèi)的方法。

如果你對(duì) UI 要求比較高，比如需要反復(fù)修改，那我推薦直接用 v0 API。v0 模型是 Vercel 推出的，專門針對(duì) UI 和前端開發(fā)優(yōu)化，所以在處理這類任務(wù)時(shí)，v0 比 Claude、Gemini、ChatGPT 都更強(qiáng)。

我一般會(huì)在需要大量生成 UI 時(shí)訂閱 v0，一個(gè)月 20 美金，這個(gè)月把需要的 UI 全部生成完，然后就可以退訂。

訂閱后去后臺(tái)生成 API Key，然后在 Cursor 中調(diào)用 v0 模型即可。

在 Cursor 模型設(shè)置中，把 v0 的 API Key 填進(jìn)去，v0 模型是符合 OpenAI API 規(guī)范的，所以直接選擇 OpenAI 模型即可。

實(shí)際使用時(shí)，你在對(duì)話中用的是 OpenAI 模型，但后臺(tái)用的其實(shí)是 v0 模型。

好了，這就是免費(fèi)和付費(fèi)的兩種方法。

最后再推薦兩個(gè)動(dòng)畫工具：Framer Motion 和 React Bits，也都是很棒的選擇。

你可以把 React Bits 中動(dòng)畫代碼直接粘貼到 Cursor 中，讓模型幫你集成即可。

• React：相當(dāng)于項(xiàng)目經(jīng)理和架構(gòu)師
• Radix UI：相當(dāng)于功能工程師
• Tailwind CSS：相當(dāng)于視覺設(shè)計(jì)師
• Framer Motion：相當(dāng)于動(dòng)效設(shè)計(jì)師

以上就是一套現(xiàn)代強(qiáng)大 UI 開發(fā)工具箱，大家可以根據(jù)需要組合使用！

?轉(zhuǎn)自https://www.cnblogs.com/BNTang/p/18947708