在數(shù)字化時(shí)代，產(chǎn)品經(jīng)理需要快速、高效地產(chǎn)出高保真原型，以滿足開發(fā)、老板和客戶的需求。傳統(tǒng)的原型設(shè)計(jì)工具往往耗時(shí)費(fèi)力，而 Cursor 的出現(xiàn)為產(chǎn)品經(jīng)理帶來了新的希望。本文將手把手教你如何使用 Cursor 設(shè)計(jì)一個(gè)合同管理系統(tǒng)的高保真原型。

哈嘍各位產(chǎn)品小伙伴們！今天我要跟大家分享一個(gè)超級(jí)實(shí)用的工具——Cursor，它簡直就是我們產(chǎn)品經(jīng)理的福音??！作為一個(gè)經(jīng)常需要快速產(chǎn)出高保真原型的產(chǎn)品狗，我發(fā)現(xiàn)Cursor簡直是打開了新世界的大門！下面我就以設(shè)計(jì)一個(gè)合同管理系統(tǒng)為例，手把手帶大家體驗(yàn)這個(gè)神奇的工具~

一、Cursor是什么？為什么產(chǎn)品經(jīng)理要愛它？

哇塞！Cursor簡直就是一個(gè)集成了GPT4、Claude3.5等超強(qiáng)AI的智能開發(fā)工具！它長得跟VSCode很像，但功能可強(qiáng)大太多了！想象一下，你只需要輸入一些提示詞，它就能幫你生成完整的原型代碼，還能直接運(yùn)行看到效果！這效率，簡直了！

作為一個(gè)產(chǎn)品經(jīng)理，我們經(jīng)常需要快速產(chǎn)出高保真原型給開發(fā)看，給老板看，給客戶看…傳統(tǒng)的方式要么是用Axure、Figma畫半天，要么是求著開發(fā)哥哥幫忙寫個(gè)demo?，F(xiàn)在有了Cursor，我們完全可以自己動(dòng)手，豐衣足食啦！

二、Cursor的下載與安裝

來來來，第一步當(dāng)然是下載安裝啦！超級(jí)簡單的！

1. 打開Cursor官網(wǎng)：Cursor官網(wǎng)
2. 點(diǎn)擊大大的”Download”按鈕（哎呀，這按鈕設(shè)計(jì)得真顯眼）
3. 選擇適合你操作系統(tǒng)的版本（Windows/Mac/Linux都有哦）
4. 下載完成后雙擊安裝包，一路”下一步”就搞定啦！

安裝完成后第一次打開，系統(tǒng)會(huì)提示你注冊(cè)賬號(hào)。這里有個(gè)小貼士：每個(gè)賬號(hào)有500次GPT4和Claude3.5的免費(fèi)調(diào)用次數(shù)，其他基礎(chǔ)模型不限次數(shù)。對(duì)于我們產(chǎn)品經(jīng)理來說，500次足夠玩轉(zhuǎn)好幾個(gè)項(xiàng)目啦！

三、Cursor的基本使用姿勢

安裝好了，讓我們先熟悉一下這個(gè)寶貝工具的基本操作吧！

1. 設(shè)置中文界面

作為一個(gè)中國產(chǎn)品經(jīng)理，當(dāng)然要用中文啦！點(diǎn)擊頂部輸入框，輸入：

>language

然后選擇”簡體中文”，搞定！界面瞬間親切多了有木有！

2. 了解快捷鍵

Cursor有幾個(gè)超級(jí)實(shí)用的快捷鍵，產(chǎn)品經(jīng)理一定要記住：

• Ctrl+L：問答模式，可以問它任何問題，也可以讓它幫你生成代碼
• Ctrl+K：編輯代碼，選中一段代碼可以讓AI幫你修改
• Ctrl+I：項(xiàng)目級(jí)編輯，可以跨文件操作整個(gè)項(xiàng)目

四、實(shí)戰(zhàn)：用Cursor設(shè)計(jì)合同管理系統(tǒng)高保真原型

好啦，重頭戲來啦！下面我就以設(shè)計(jì)一個(gè)合同管理系統(tǒng)為例，展示Cursor的強(qiáng)大功能！

1. 創(chuàng)建新項(xiàng)目

首先，我們新建一個(gè)空白項(xiàng)目文件夾。然后在Cursor中打開這個(gè)文件夾。激動(dòng)人心的時(shí)刻到了！我們準(zhǔn)備開始”聊天式”開發(fā)啦！

2. 輸入提示詞

在空白處按下Ctrl+L，調(diào)出對(duì)話框。這里就是施展魔法的地方啦！我們要輸入詳細(xì)的提示詞，告訴Cursor我們想要什么。作為一個(gè)產(chǎn)品經(jīng)理，寫提示詞就像寫PRD一樣重要哦！

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

我輸入了這樣的提示詞（大家可以參考這個(gè)模板）：

`我想開發(fā)一個(gè) {合同管理系統(tǒng)}，現(xiàn)在需要輸出高保真的原型圖，請(qǐng)通過以下方式幫我完成所有界面的原型設(shè)計(jì)，并使用這些原界面直接開發(fā)一個(gè)小程序：

1、用戶體驗(yàn)分析：先分析這個(gè)程序的主要功能和用戶需求，確定核心交互邏輯。合同管理具體功能參考文件夾中的mod文件 2、產(chǎn)品界面規(guī)劃：作為產(chǎn)品經(jīng)理，定義關(guān)鍵界面，確保信息架構(gòu)合理。

3、高保真 UI 設(shè)計(jì)：作為 UI 設(shè)計(jì)師，設(shè)計(jì)貼近真實(shí)程序設(shè)計(jì)規(guī)范的界面，使用現(xiàn)代化的 UI 元素，使其具有良好的視覺體驗(yàn)。

4、HTML 原型實(shí)現(xiàn)：使用 HTML + Tailwind CSS (或 Bootstrap) 生成所有原型界面，并使用 FontAwesome (或其他開源 UI 組件) 讓界更加精美、接近真實(shí)的 App 設(shè)計(jì)。

拆分代碼文件，保持結(jié)構(gòu)清晰：

5、每個(gè)界面應(yīng)作為獨(dú)立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。

-index.html 作為主入口，不直接寫入所有界面的 HTML 代碼，而是使用 iframe 的方式嵌入這些 HTML 片段，并將所有頁面直接平鋪示在 index 頁面中，而不是跳轉(zhuǎn)鏈接。

-真實(shí)感增強(qiáng)：

-界面尺寸應(yīng)模擬 常見的電腦屏幕。

-使用真實(shí)的 UI 圖片，而非占位符圖片 (可從 Unsplash 官方 UI 資源中選擇)。

-添加獨(dú)立的用戶界面，比如財(cái)務(wù)門戶，法務(wù)門戶，業(yè)務(wù)門戶，管理者門戶。

請(qǐng)按照以上要求生成完整的 HTML 代碼，并確保其可用于實(shí)際開發(fā)。`

mod文件我用的是合同管理系統(tǒng)功能里的功能，基本涵蓋了合同管理系統(tǒng)所需的功能。可以用deepseek讀取網(wǎng)頁內(nèi)容生成mod文件放到Cursor的文件夾中。

哇！輸入完這段提示詞，我的手都有點(diǎn)抖了，不知道Cursor會(huì)給我什么驚喜呢？

3. 見證奇跡的時(shí)刻

點(diǎn)擊發(fā)送后，Cursor開始思考了…（等待的幾秒鐘好緊張?。?/p>

然后！它開始一行行地生成代碼！我的天！它真的理解了我的需求！首先它創(chuàng)建了一個(gè)完整的項(xiàng)目結(jié)構(gòu)：

contract-management-system/

├── css/ │

└── style.css

├── js/ │

└── main.js

├── pages/ │

├── dashboard.html │

├── contract-list.html │

├── contract-detail.html │

├── contract-create.html │

├── settings.html │

└── user-profile.html

└── index.html

然后它開始逐個(gè)文件生成代碼！我點(diǎn)開dashboard.html一看，哇塞！一個(gè)漂亮的儀表盤界面已經(jīng)成型了！有數(shù)據(jù)統(tǒng)計(jì)卡片、最近合同列表、待辦事項(xiàng)…簡直跟我腦子里想的一模一樣！

4. 查看生成效果

Cursor還貼心地生成了一個(gè)index.html作為預(yù)覽入口。我右鍵選擇”在瀏覽器中打開”，然后…我的下巴都要驚掉了！一個(gè)完整的、可交互的合同管理系統(tǒng)原型就這樣出現(xiàn)在我面前！

• 左側(cè)是導(dǎo)航菜單：儀表盤、合同列表、創(chuàng)建合同、設(shè)置…
• 頂部有搜索框和用戶頭像
• 主內(nèi)容區(qū)展示了各種數(shù)據(jù)
• 所有界面風(fēng)格統(tǒng)一，配色專業(yè)
• 甚至還有hover效果和簡單的交互！

這效果，拿去給老板演示絕對(duì)能驚艷全場！而且我只用了不到5分鐘！

5. 進(jìn)一步優(yōu)化

作為一個(gè)追求完美的產(chǎn)品經(jīng)理，我覺得還可以再優(yōu)化一下。我選中合同列表頁面，按下Ctrl+L，輸入：

請(qǐng)優(yōu)化合同列表頁：

1. 增加分頁功能

2. 添加按狀態(tài)篩選的下拉菜單

3. 表格增加排序功能

4. 添加導(dǎo)出Excel按鈕

Cursor馬上理解了需求，幾秒鐘后就給出了修改后的代碼！替換后刷新頁面，哇！一個(gè)功能更完善的列表頁出現(xiàn)了！這效率，比我跟前端開發(fā)溝通再等他改完快多了！

五、Cursor更多實(shí)用技巧

1. 添加文檔作為知識(shí)庫

Cursor還能上傳文檔作為知識(shí)庫！比如我可以上傳公司的設(shè)計(jì)規(guī)范文檔，然后讓Cursor按照規(guī)范生成界面。操作步驟：

1. 點(diǎn)擊設(shè)置圖標(biāo)
2. 選擇”知識(shí)庫”
3. 上傳PDF或Word文檔
4. 使用時(shí)在對(duì)話框中輸入@，選擇文檔提問

2. 自定義System Prompt

在設(shè)置中可以添加System Prompt，讓AI更好地理解和需求。比如我添加了：

你是一名資深產(chǎn)品經(jīng)理和UI設(shè)計(jì)師，正在幫助用戶設(shè)計(jì)高保真原型。你非常注重用戶體驗(yàn)和界面細(xì)節(jié)，能夠產(chǎn)出符合現(xiàn)代設(shè)計(jì)規(guī)范的原型。你會(huì)主動(dòng)思考用戶需求，提出改進(jìn)建議，而不僅僅是執(zhí)行指令。

這樣Cursor的回答會(huì)更符合產(chǎn)品經(jīng)理的思維方式！

六、生成的項(xiàng)目文檔

Cursor還自動(dòng)生成了一個(gè)README.md文件，內(nèi)容超級(jí)專業(yè)：

# 合同管理系統(tǒng)高保真原型

這是一個(gè)使用HTML、CSS和JavaScript構(gòu)建的合同管理系統(tǒng)高保真原型設(shè)計(jì)。該原型模擬了真實(shí)的企業(yè)級(jí)應(yīng)用界面。

## 功能概述

– **儀表盤**：展示合同統(tǒng)計(jì)、待辦事項(xiàng)和最近活動(dòng)

– **合同列表**：所有合同的可搜索、可分頁、可排序列表 **合同詳情**：查看合同詳細(xì)信息

– **創(chuàng)建合同**：表單創(chuàng)建新合同

– **設(shè)置**：系統(tǒng)配置選項(xiàng)

– **用戶資料**：個(gè)人信息管理

## 技術(shù)棧

– HTML5

– CSS3 (Tailwind CSS)

– JavaScript

– Font Awesome 圖標(biāo)庫

## 設(shè)計(jì)特點(diǎn)

– 現(xiàn)代化企業(yè)應(yīng)用設(shè)計(jì)風(fēng)格

– 響應(yīng)式布局

– 交互式組件

– 專業(yè)配色方案

– 符合當(dāng)前網(wǎng)頁設(shè)計(jì)趨勢

## 使用說明

1. 打開index.html預(yù)覽所有界面

2. 每個(gè)頁面也可以單獨(dú)打開

3. 所有交互都已模擬實(shí)現(xiàn)

## 后續(xù)開發(fā)建議

1. 連接真實(shí)后端API

2. 實(shí)現(xiàn)用戶認(rèn)證

3. 添加更多業(yè)務(wù)功能

4. 優(yōu)化移動(dòng)端體驗(yàn)

這文檔水平，直接可以拿去給開發(fā)團(tuán)隊(duì)用了！省去了我寫文檔的時(shí)間！

七、生成的HTML頁面展示

讓我們來看看Cursor生成的合同列表頁(contract-list.html)的完整代碼和效果吧！這部分真的讓我驚艷到合不攏嘴～

完整頁面展示

我是真的一下也沒管他，自己就生成了

2. 頁面效果詳解

當(dāng)我在瀏覽器中打開這個(gè)頁面時(shí)，呈現(xiàn)的效果簡直太專業(yè)了！讓我詳細(xì)描述一下：

整體布局：

• 左側(cè)是深色導(dǎo)航菜單，當(dāng)前選中的”合同列表”高亮顯示
• 頂部有公司logo、搜索框和用戶頭像
• 主內(nèi)容區(qū)采用白色背景，層次分明

合同列表區(qū)域：

1. <strong>和操作欄：
2. 大大的”合同列表”標(biāo)題清晰可見
3. 右側(cè)有”導(dǎo)出Excel”按鈕和狀態(tài)篩選下拉框
4. 按鈕的懸停效果非常順滑

數(shù)據(jù)表格：

• 采用斑馬紋設(shè)計(jì)，行與行之間區(qū)分明顯
• 表頭有排序圖標(biāo)，點(diǎn)擊可以模擬排序功能
• 合同狀態(tài)用不同顏色的標(biāo)簽顯示（執(zhí)行中是綠色，待簽署是黃色等）
• 每行數(shù)據(jù)都有”查看”和”編輯”操作鏈接

分頁組件：

• 顯示當(dāng)前頁碼和總條數(shù)
• 上一頁/下一頁按鈕
• 頁碼導(dǎo)航，當(dāng)前頁高亮顯示

交互細(xì)節(jié)：

• 鼠標(biāo)懸停在行上時(shí)會(huì)有淺灰色背景
• 點(diǎn)擊表頭排序圖標(biāo)會(huì)有視覺反饋
• 所有按鈕都有精致的懸停效果
• 搜索框獲得焦點(diǎn)時(shí)有藍(lán)色光圈

3. 最驚艷的部分

作為一個(gè)產(chǎn)品經(jīng)理，我最驚喜的是這些細(xì)節(jié)Cursor都考慮到了：

• 響應(yīng)式設(shè)計(jì)：調(diào)整瀏覽器大小時(shí)布局會(huì)自動(dòng)適應(yīng)
• 真實(shí)數(shù)據(jù)展示：合同編號(hào)、金額等字段格式完全符合業(yè)務(wù)需求
• 狀態(tài)標(biāo)簽：不同狀態(tài)用不同顏色區(qū)分，視覺上非常直觀
• 操作流程：查看、編輯、導(dǎo)出等功能一應(yīng)俱全
• 設(shè)計(jì)規(guī)范：完全遵循現(xiàn)代網(wǎng)頁設(shè)計(jì)趨勢，間距、字體、顏色都很專業(yè)

這個(gè)頁面拿去做用戶測試或者給開發(fā)看都完全沒問題！而且從代碼結(jié)構(gòu)來看，組件化做得很好，后續(xù)開發(fā)可以直接基于這個(gè)原型進(jìn)行擴(kuò)展。

Cursor生成的這個(gè)頁面，比我用Axure畫的原型要真實(shí)得多，而且由于是真實(shí)代碼，開發(fā)可以直接復(fù)用部分前端代碼，大大提高了從原型到產(chǎn)品的轉(zhuǎn)化效率！這簡直就是產(chǎn)品經(jīng)理的夢想工具??！

八、總結(jié)與感想

天吶！用Cursor設(shè)計(jì)原型的過程簡直太神奇了！作為一個(gè)產(chǎn)品經(jīng)理，我總結(jié)了這些優(yōu)勢：

• 速度驚人：從想法到高保真原型，只需要幾分鐘！
• 質(zhì)量專業(yè)：生成的界面符合現(xiàn)代設(shè)計(jì)規(guī)范，完全拿得出手
• 交互真實(shí)：不只是靜態(tài)圖片，而是可交互的網(wǎng)頁
• 文檔齊全：自動(dòng)生成項(xiàng)目文檔，省時(shí)省力
• 修改方便：隨時(shí)可以調(diào)整需求，立即看到效果

當(dāng)然啦，生成的原型還需要專業(yè)開發(fā)進(jìn)一步實(shí)現(xiàn)，但作為產(chǎn)品溝通和演示的工具，Cursor簡直是神器！再也不用擔(dān)心老板說”這個(gè)功能我想象不出來”了，直接給他看可交互的原型！

最后一個(gè)小貼士：Cursor的免費(fèi)額度有限，建議在寫提示詞時(shí)盡量詳細(xì)明確，減少反復(fù)修改的次數(shù)。也可以先用基礎(chǔ)模型構(gòu)思，再用高級(jí)模型生成最終版本。

好啦，今天的分享就到這里！快去下載Cursor試試吧！保證你會(huì)像我一樣愛上它！如果有什么問題，歡迎在評(píng)論區(qū)交流哦~