根據(jù)域名自動(dòng)分組瀏覽器 Tab：

二）卡密系統(tǒng)

功能包含：用戶管理、卡密管理、卡密統(tǒng)計(jì)

二、Cursor 與其他編程工具的區(qū)別

相對(duì)于其他工具，Cursor 有這些更好用的功能：

1. 模型更全面，選擇更靈活。
2. 全局引用，隨心所欲。
3. 一鍵全局創(chuàng)建代碼
4. 更多好用的功能

當(dāng)然，我覺得最好用的還是 Composer。

我們使用其他工具時(shí)，需要通過聊天得到一段一段的新功能代碼，然后分別創(chuàng)建文件，粘貼代碼。

雖然一個(gè)一個(gè)確認(rèn)讓人更放心，但是功能復(fù)雜的情況下涉及文件過多，就會(huì)耗時(shí)耗力。

Composer 它可以幫助我們快速地、有序地創(chuàng)建多個(gè)文件，以滿足我們的要求，效率將大大提升。

詳情請(qǐng)查看:Cursor vs GitHub Copilot、通義靈碼，誰(shuí)才是真正的王者

三、初體驗(yàn): Cursor 的安裝和使用

講解具體案例之前，我們先了解下工具怎么注冊(cè)和使用的。

安裝和使用前，請(qǐng)自備 魔法 ！

教程包含：

1. 工具的注冊(cè)和安裝
2. 全局創(chuàng)建代碼結(jié)構(gòu)
3. 新增、修改代碼
4. 自動(dòng)補(bǔ)全
5. 對(duì)話窗口、全局搜索等其他功能

詳情請(qǐng)查看:有了 Cursor 后，真沒理由說不會(huì)寫代碼了

四、初階案例：谷歌插件

適用人群：沒有編程基礎(chǔ)的小伙伴

備注：案例比較簡(jiǎn)單，大家仔細(xì)閱讀 AI 回答的結(jié)果即可。

去年 9 月，我用 ChatGPT 編寫過自己的第一個(gè) Chrome 插件：任何人都可以利用ChatGPT開發(fā)自己的谷歌插件

我們來(lái)將 ChatGPT 和 今天的 Cursor 做個(gè)對(duì)比。

當(dāng)時(shí)做了兩個(gè)案例，第一個(gè)：分割圖片為四等份。 第二個(gè)：自動(dòng)分組瀏覽器 Tab。

一）案例一：分割圖片為四等份

主要為了快速分割 Midjourney 生成的圖片四等份。

當(dāng)時(shí)和 ChatGPT 對(duì)話，加上創(chuàng)建文件和部署插件，前前后后花了 15 分鐘左右吧，我們來(lái)看看 Cursor 的能力。

使用 Cursor 編寫代碼，加上部署和演示，總共也就一分鐘多一點(diǎn)，速度非?？?。

Cursor 提示詞：

請(qǐng)你幫我開發(fā)一個(gè)谷歌插件，用于將用戶上傳的圖片，平均切分為4張圖片，并自動(dòng)下載到本地電腦上。注意使用 manifest v3 版本開發(fā), 注意按鈕中文編碼的問題。

二）案例二：自動(dòng)分組瀏覽器 Tab

主要為了解決以下痛點(diǎn)：

1. 瀏覽器 tab 過多時(shí),容易混亂
2. 無(wú)法自動(dòng)分組, 手動(dòng)分組麻煩

這個(gè)案例讓我感觸頗深。

去年 9 月做這個(gè)案例時(shí)，我與 AI 對(duì)話、調(diào)試、糾錯(cuò)、部署，花了 2 個(gè)多小時(shí)。

而這次，用 Cursor 不到五分鐘就搞定了，沒有做任何糾錯(cuò)，效率提高了二十多倍。

我突然想到：一年前， 2 個(gè)多小時(shí)，我是怎么忍得下來(lái)的。

AI 的進(jìn)步，用一句話來(lái)形容：“AI 一天，人間一年”。

Cursor 提示詞：

# 角色:

你是一位資深程序員，能夠熟練開發(fā)google瀏覽器插件。



# 目的:

我需要開發(fā)一個(gè)插件，用于將google瀏覽器的tab自動(dòng)分組, 根據(jù)配置的域名自動(dòng)分組。通過插件,如果用戶打開過多的瀏覽器tab, 這樣看著會(huì)比較混亂. 自動(dòng)分組后, 會(huì)顯得更加整潔和干凈.



# 功能：

1. 點(diǎn)擊插件, 可以輸出需要設(shè)置的域名, 分組名稱, 和分組的顏色, 顏色有(Blue、Red、Grey、Yellow、Green)

2. 點(diǎn)擊保存后, 頁(yè)面消失,顯示“保存成功”

3. 當(dāng)在瀏覽器打開對(duì)應(yīng)域名的鏈接, 后臺(tái)將自動(dòng)根據(jù)分組名稱,和顏色, 進(jìn)行分組.

- 若打開新鏈接時(shí),沒有分組,則創(chuàng)建分組

- 若打開新鏈接時(shí),已經(jīng)存在相同域名的分組, 則自動(dòng)合并



# 注意:

1. 注意使用 manifest v3 版本開發(fā)。

2. 注意中文編碼的問題。

三）案例三：漢語(yǔ)新解

除了前面兩個(gè)插件，前幾天過中秋，我趁著假期開發(fā)了一套“漢語(yǔ)新解”谷歌插件。

其中，90%的代碼都是通過 Cursor 完成的。

開發(fā)思路很簡(jiǎn)單，我把開發(fā)思路和使用方式都寫在這篇文章里了：免費(fèi)還超快，我用 Cursor 做的“漢語(yǔ)新解”插件開源了

此外，我開源了代碼，還將這款插件上架到了谷歌商店，大家如果感興趣，可以試一試。

開源代碼地址：https://github.com/jaylpp/chinese-insight，有幫助的話，記得 Star 一下，謝謝。

五、進(jìn)階案例: 卡密系統(tǒng)

適用人群：沒有編程基礎(chǔ)，但足夠耐心的小伙伴

備注：需求相對(duì)于 初階案例 更復(fù)雜一些，如果沒有編程基礎(chǔ)，則需要足夠的耐心，有編程思維會(huì)更好。建議按照文章推薦的方法論操作。

最近一直在研究智能體怎么變現(xiàn)的問題，除了做教程，將智能體作為產(chǎn)品出售是個(gè)不錯(cuò)的選擇。

玩過智能體的小伙伴都清楚，無(wú)論是國(guó)內(nèi)還是國(guó)外，大多數(shù)智能體平臺(tái)都存在著一些問題：

1. 對(duì)于應(yīng)用開發(fā)者沒有付費(fèi)支持。
2. 對(duì)于插件提供者沒有 API 費(fèi)用支持。

面對(duì)這些問題，排除一些為愛發(fā)電的大佬，很多普通人結(jié)合多年的行業(yè)方法論，個(gè)人精心鉆研和打磨出來(lái)的智能體，他們基本上不可能免費(fèi)開放出來(lái)。

那么優(yōu)秀的智能體就會(huì)很難被市場(chǎng)所發(fā)現(xiàn)。其實(shí)，最重要的問題就是：如何商業(yè)化？

除了背負(fù)著巨大的風(fēng)險(xiǎn)設(shè)計(jì)一整套商業(yè)化產(chǎn)品之外，我們?cè)趺礃诱业揭粋€(gè)最小化的商業(yè)模式。

我覺得最簡(jiǎn)單的模式就是卡密驗(yàn)證的方式了 — 用戶輸入卡密來(lái)使用智能體，或者是核心插件。

接下來(lái)我們利用最近大火的 Cursor 做一套卡密系統(tǒng)。

一）用戶故事

用戶故事是什么呢？

用戶故事的目的在于確保開發(fā)團(tuán)隊(duì)能夠理解用戶需求，并從用戶角度設(shè)計(jì)和開發(fā)功能。

其常規(guī)模板為：“作為[角色]，我希望[活動(dòng)]，以便[理由]。”

為何在這一步需要寫用戶故事呢？

主要有三點(diǎn)作用：

1. 首先，讓 Cursor 這個(gè)執(zhí)行者了解我們想要做什么樣的應(yīng)用，從而更準(zhǔn)確地搭建代碼框架。
2. 中途作為關(guān)鍵的上下文信息，確保方向不偏移。
3. 最后，可以讓 Cursor 依據(jù)用戶故事生成對(duì)應(yīng)的測(cè)試用例，保持功能的完整和準(zhǔn)確。

接下來(lái)，我來(lái)演示下如何在 Cursor 里生成 MVP 的用戶故事（用其他 AI 功能生成也可以）。

1、點(diǎn)擊 Cursor 后，選擇提前創(chuàng)建的一個(gè)文件夾。

2、創(chuàng)建需求文檔，輸入簡(jiǎn)短的需求描述，讓 AI 幫助我們生成用戶故事。

可以看到 Cursor 為我們生成了用戶故事，我們按照實(shí)際情況接受并修改即可。

二）生成初始代碼框架

1、輸入?command + i?喚起?composer，基于用戶故事，生成代碼結(jié)構(gòu)，點(diǎn)擊回車。建議使用?claude-3.5-sonnet, 目前代碼生成能力最強(qiáng)的模型。

2、自動(dòng)生成代碼后，只有點(diǎn)擊 Accept all 才會(huì)生效。

建議最好閱讀一下 AI 的輸出結(jié)果，看看它是否理解清楚了我們的意圖，再點(diǎn)擊接受，避免頻繁修改。

仔細(xì)閱讀后，發(fā)現(xiàn)漏掉了一些文件。

3、讓 AI 自行檢查并補(bǔ)充遺漏的文件。

補(bǔ)充文件完成，點(diǎn)擊?Accept all。

根據(jù) AI 的回答，我們發(fā)現(xiàn)只生成了后端 API，缺少前端界面，我們要求 AI 補(bǔ)充頁(yè)面。

向下滑動(dòng)，根據(jù) AI 回答的測(cè)試方式執(zhí)行命令即可。

這里第一步提到需確保后端服務(wù)器正在運(yùn)行。然后，我們根據(jù)上一步 AI 的回復(fù)去啟動(dòng)后端服務(wù)。

出錯(cuò)了，別著急。記得規(guī)范糾錯(cuò)時(shí)的提問方式，然后告訴 AI 即可。

提問方式：在【xxxx】位置，做了【xxxx】動(dòng)作，出現(xiàn)了【xxxx】錯(cuò)誤，預(yù)期是【xxxx】

主要是因?yàn)?Python 使用的依賴包存在沖突導(dǎo)致的。我們不需要深究，按照 AI 的回復(fù)一步一步執(zhí)行。

當(dāng)出現(xiàn)下圖中的標(biāo)記時(shí)，則代表運(yùn)行成功了。

接下來(lái)我們右擊選擇?New Terminal?創(chuàng)建一個(gè)命令行去啟動(dòng)前端服務(wù)。

使用 cd 命令，進(jìn)入 frontend 目錄。再運(yùn)行啟動(dòng)命令。

cd 命名的介紹，可以進(jìn)入 六、加餐 章節(jié)查看。

打開瀏覽器，訪問對(duì)應(yīng)的 URL。終于等到你，我的卡密管理系統(tǒng)。

emmmmm……有點(diǎn)簡(jiǎn)陋，不過沒關(guān)系。我們先簡(jiǎn)單驗(yàn)證下功能，后面再考慮優(yōu)化。

輸入 AI 提供的賬號(hào)密碼，進(jìn)入維護(hù)界面。

三）調(diào)試功能

我們先調(diào)試下“新增卡密”。調(diào)試前，記得在瀏覽器打開 F12，進(jìn)入瀏覽器控制臺(tái)。

如果無(wú)法進(jìn)入，可以自行搜索下如何進(jìn)入對(duì)應(yīng)的瀏覽器控制臺(tái)。

發(fā)現(xiàn)不少問題：

1. 卡密的添加方式應(yīng)為彈出框，不應(yīng)該在下方顯示。
2. 卡密不應(yīng)由用戶自己輸入，而是系統(tǒng)根據(jù)用戶、過期時(shí)間和積分輸入后自動(dòng)生成。
3. 添加后未生效，控制臺(tái)出現(xiàn)錯(cuò)誤。

我們逐個(gè)要求 AI 進(jìn)行修復(fù)。

接受代碼后，程序會(huì)自動(dòng)重啟，我們刷新下頁(yè)面，發(fā)現(xiàn)第一個(gè)問題已經(jīng)解決。

這一步的優(yōu)化已經(jīng)完成，雖然還存在瑕疵，但是不必糾結(jié)，先完成再完美。

接下來(lái)去修復(fù)生成卡密的問題。

這一步修復(fù)成功。

接下來(lái)測(cè)試下?編輯卡密，發(fā)現(xiàn)沒有效果，測(cè)試時(shí)控制臺(tái)出錯(cuò)了。

我們可以按照同樣的思路修復(fù)其他問題。

修復(fù)成功。

還存在不少問題，比如表格的顯示內(nèi)容、統(tǒng)計(jì)信息的正確性以及頁(yè)面美觀度等。

我就不重復(fù)演示啦，大家可自行發(fā)揮～

在這里，我優(yōu)化了統(tǒng)計(jì)信息的內(nèi)容，還增加了一張餅狀圖來(lái)展示數(shù)據(jù)。

此外，我簡(jiǎn)單測(cè)試了其他功能，發(fā)現(xiàn)一切就緒后，再優(yōu)化 UI。

如果第一次優(yōu)化后的結(jié)果不滿意的話，可以繼續(xù)要求優(yōu)化。最終效果如下：

當(dāng)然，有很多地方值得優(yōu)化，比如頁(yè)面的美觀度和卡密的復(fù)雜度等都需要進(jìn)一步改進(jìn)。

對(duì)了，卡密生成后如何使用也需要我們規(guī)劃一下。

可以請(qǐng) Cursor 告訴我們?nèi)绾螌⒖芙尤虢涌谥?，并為我們?cè)O(shè)計(jì)一套方案。大家可以自行嘗試一下。

四）測(cè)試（可選）

最后，為了確保功能的準(zhǔn)確性，我們可以請(qǐng) AI 幫忙設(shè)計(jì)一套測(cè)試用例。

進(jìn)入文檔后，Mac 用戶可以通過?Command + K?喚醒 AI，讓它根據(jù)用戶故事為我們生成測(cè)試用例。

我們需要逐個(gè)驗(yàn)證每個(gè)測(cè)試用例，檢查功能是否遺漏、是否存在 Bug。

最終，你擁有了自己的第一個(gè)卡密系統(tǒng)。

是不是很有成就感～

五）注意事項(xiàng)

1. 問題一個(gè)一個(gè)修復(fù)，貪多嚼不爛。
2. 先完成，再完美，最開始不用在線細(xì)節(jié)，先完成核心功能。

六、加餐

一）糾錯(cuò)公式

在【xxxx】位置，做了【xxxx】動(dòng)作，出現(xiàn)了【xxxx】錯(cuò)誤，預(yù)期是【xxxx】

比如：我在編輯卡密頁(yè)面修改了積分后點(diǎn)擊保存，瀏覽器控制臺(tái)出現(xiàn)了錯(cuò)誤”””xxxxxxx”””，我期望保存成功，且表格自動(dòng)刷新。

學(xué)會(huì)向 AI 提供線索非常重要，這直接影響我們能否快速修復(fù)問題。

二）切換目錄命名 — CD

大家在 Cursor 中可能會(huì)遇到切換到某個(gè)文件夾下執(zhí)行命名的情況。

我們可以使用 Cursor 的菜單 Open in intergrated Terminal 直接切換到對(duì)應(yīng)目錄：

除此之外，更方便的肯定是 cd 命令啦。

請(qǐng)?jiān)试S我偷個(gè)懶，畢竟 Kimi 解釋的更加全面，不了解該命令的小伙伴可以看下。

三）Python 教程

過去，我們?cè)谖⑿艡C(jī)器人教程 0 基礎(chǔ)如何打造你的微信機(jī)器人？：0 基礎(chǔ)如何打造你的微信機(jī)器人？

這篇文章介紹過怎么在 linux 環(huán)境安裝 Python，以及什么是 Python 虛擬環(huán)境。

Python 的虛擬環(huán)境是一個(gè)獨(dú)立的 Python 運(yùn)行空間，用于隔離不同項(xiàng)目的依賴庫(kù)，避免與系統(tǒng)的 python 版本形成沖突。

關(guān)于 Python，這個(gè)教程無(wú)論是在安裝方面，還是在編程基礎(chǔ)方面，都對(duì)每個(gè)知識(shí)點(diǎn)進(jìn)行了通俗易懂的講解，非常適合沒有基礎(chǔ)的新手。

強(qiáng)烈推薦大家在 AI 時(shí)代掌握一門編程語(yǔ)言，首選無(wú)疑是 Python。

推薦教程地址：https://www.bilibili.com/video/BV1944y1x7SW/?spm_id_from=333.999.0.0&vd_source=e998bb2b9b446572cd19539682ad9dd4

四）Cursor 提示詞大全

分享個(gè) Cursor 提示詞網(wǎng)站：https://cursor.directory/

網(wǎng)站里有大量網(wǎng)友實(shí)踐后上傳的提示詞，可供我們學(xué)習(xí)和參考。

七、總結(jié)

親身體驗(yàn)后，不得不承認(rèn) Cursor 確實(shí)稱得上當(dāng)前最強(qiáng) AI 編程工具。

但, 誰(shuí)能想到，在與科技巨頭的激烈競(jìng)爭(zhēng)中脫穎而出的 Cursor，竟是一支僅有 12 人的小團(tuán)隊(duì)?

翻閱他們的博客，我們能感受到他們雄心勃勃的愿景:打造一款讓編程更輕松、愉悅、有趣的工具，助力全球開發(fā)者聚焦更宏大的問題。

可以看得出來(lái)，他們滿懷希望，干勁十足，用創(chuàng)新思維撬動(dòng)了整個(gè)行業(yè)，一躍成為領(lǐng)跑者。

除了工具本身，Cursor 團(tuán)隊(duì)的崛起更值得我們學(xué)習(xí)。這個(gè)只有 12 人的小團(tuán)隊(duì)，竟然可以和眾多大廠的 PK 中脫穎而出。

不禁讓我想起齊白石大師的至理名言：“學(xué)我者生，似我者死”。

一味的模仿只是重復(fù)別人的步伐，創(chuàng)新性模仿才有機(jī)會(huì)追上，甚至超越～

希望有所幫助。

本文章轉(zhuǎn)載微信公眾號(hào)@熊貓Jay字節(jié)之旅

#你可能也喜歡這些API文章!

PyTorch量化壓縮API：優(yōu)化深度學(xué)習(xí)模型的關(guān)鍵技術(shù)

ComfyUI API 教程：深入解析與應(yīng)用

安全漏洞掃描API集成

使用GitHub Actions Workflow API配置

使用ComfyUI API端點(diǎn)實(shí)現(xiàn)工作流自動(dòng)化

PyTorch模型加載與保存API指南

PaddleOCR表格識(shí)別API設(shè)計(jì)

PaddleOCR知識(shí)蒸餾API實(shí)現(xiàn)

GitHub API網(wǎng)絡(luò)錯(cuò)誤處理：全面指南