好看的历史书籍推荐,完美世界有声小说全集

Cursor生成UI，加一步封神

freeflydom

2025年7月4日 9:55 本文熱度 508

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

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

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

我把 UI 圖片放到 Gemini 中，然后讓它根據(jù) UI 截圖生成一份 JSON 格式的設(shè)計規(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è)計風(fēng)格、結(jié)構(gòu)元素、布局原則，以及一些關(guān)鍵屬性。

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

提示詞參考：

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

生成效果如下：

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

提示詞：

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

效果如下：

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

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

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

以上就是免費的方法。

接下來是付費的方法。

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

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

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

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

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

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

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

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

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

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

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

該文章在 2025/7/4 9:55:45 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。