用 Cursor 做 UI，有兩種最簡單又有效的方法，一個免費一個付費，不管你要做網頁 UI 還是應用程序 UI，都能用。

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

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

我把 UI 圖片放到 Gemini 中，然后讓它根據 UI 截圖生成一份 JSON 格式的設計規范文件。

提示詞參考：

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 包含整體設計風格、結構元素、布局原則，以及一些關鍵屬性。

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

提示詞參考：

參考 @design.json 設計規范，根據圖片中的樣式，生成一個網頁。

生成效果如下：

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

提示詞：

按照圖片中的UI樣式，創建一個新的頁面。注意：盡可能按照圖片中的樣子創建!!!

效果如下：

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

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

為什么這種先提取 JSON 文件再生成代碼的方法很有效？因為當任務涉及精確、結構化、無歧義的數據時，JSON 讓模型理解更清晰，處理更高效，生成的結果也更穩定。

以上就是免費的方法。

接下來是付費的方法。

如果你對 UI 要求比較高，比如需要反復修改，那我推薦直接用 v0 API。v0 模型是 Vercel 推出的，專門針對 UI 和前端開發優化，所以在處理這類任務時，v0 比 Claude、Gemini、ChatGPT 都更強。

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

訂閱后去后臺生成 API Key，然后在 Cursor 中調用 v0 模型即可。

在 Cursor 模型設置中，把 v0 的 API Key 填進去，v0 模型是符合 OpenAI API 規范的，所以直接選擇 OpenAI 模型即可。

實際使用時，你在對話中用的是 OpenAI 模型，但后臺用的其實是 v0 模型。

好了，這就是免費和付費的兩種方法。

最后再推薦兩個動畫工具：Framer Motion 和 React Bits，也都是很棒的選擇。

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

• React：相當于項目經理和架構師
• Radix UI：相當于功能工程師
• Tailwind CSS：相當于視覺設計師
• Framer Motion：相當于動效設計師

以上就是一套現代強大 UI 開發工具箱，大家可以根據需要組合使用！