根據域名自動分組瀏覽器 Tab:

二)卡密系統

功能包含:用戶管理、卡密管理、卡密統計

二、Cursor 與其他編程工具的區別

相對于其他工具,Cursor 有這些更好用的功能:

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

當然,我覺得最好用的還是 Composer。

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

雖然一個一個確認讓人更放心,但是功能復雜的情況下涉及文件過多,就會耗時耗力。

Composer 它可以幫助我們快速地、有序地創建多個文件,以滿足我們的要求,效率將大大提升。

詳情請查看:Cursor vs GitHub Copilot、通義靈碼,誰才是真正的王者

三、初體驗: Cursor 的安裝和使用

講解具體案例之前,我們先了解下工具怎么注冊和使用的。

安裝和使用前,請自備 魔法 !

教程包含:

  1. 工具的注冊和安裝
  2. 全局創建代碼結構
  3. 新增、修改代碼
  4. 自動補全
  5. 對話窗口、全局搜索等其他功能

詳情請查看:有了 Cursor 后,真沒理由說不會寫代碼了

四、初階案例:谷歌插件

適用人群:沒有編程基礎的小伙伴

備注:案例比較簡單,大家仔細閱讀 AI 回答的結果即可。

去年 9 月,我用 ChatGPT 編寫過自己的第一個 Chrome 插件:任何人都可以利用ChatGPT開發自己的谷歌插件

我們來將 ChatGPT 和 今天的 Cursor 做個對比。

當時做了兩個案例,第一個:分割圖片為四等份。 第二個:自動分組瀏覽器 Tab。

一)案例一:分割圖片為四等份

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

當時和 ChatGPT 對話,加上創建文件和部署插件,前前后后花了 15 分鐘左右吧,我們來看看 Cursor 的能力。

使用 Cursor 編寫代碼,加上部署和演示,總共也就一分鐘多一點,速度非常快。

Cursor 提示詞:

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

二)案例二:自動分組瀏覽器 Tab

主要為了解決以下痛點:

  1. 瀏覽器 tab 過多時,容易混亂
  2. 無法自動分組, 手動分組麻煩

這個案例讓我感觸頗深。

去年 9 月做這個案例時,我與 AI 對話、調試、糾錯、部署,花了 2 個多小時。

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

我突然想到:一年前, 2 個多小時,我是怎么忍得下來的。

AI 的進步,用一句話來形容:“AI 一天,人間一年”。

Cursor 提示詞:

# 角色:
你是一位資深程序員,能夠熟練開發google瀏覽器插件。

# 目的:
我需要開發一個插件,用于將google瀏覽器的tab自動分組, 根據配置的域名自動分組。通過插件,如果用戶打開過多的瀏覽器tab, 這樣看著會比較混亂. 自動分組后, 會顯得更加整潔和干凈.

# 功能:
1. 點擊插件, 可以輸出需要設置的域名, 分組名稱, 和分組的顏色, 顏色有(Blue、Red、Grey、Yellow、Green)
2. 點擊保存后, 頁面消失,顯示“保存成功”
3. 當在瀏覽器打開對應域名的鏈接, 后臺將自動根據分組名稱,和顏色, 進行分組.
- 若打開新鏈接時,沒有分組,則創建分組
- 若打開新鏈接時,已經存在相同域名的分組, 則自動合并

# 注意:
1. 注意使用 manifest v3 版本開發。
2. 注意中文編碼的問題。

三)案例三:漢語新解

除了前面兩個插件,前幾天過中秋,我趁著假期開發了一套“漢語新解”谷歌插件。

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

開發思路很簡單,我把開發思路和使用方式都寫在這篇文章里了:免費還超快,我用 Cursor 做的“漢語新解”插件開源了

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

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

五、進階案例: 卡密系統

適用人群:沒有編程基礎,但足夠耐心的小伙伴

備注:需求相對于 初階案例 更復雜一些,如果沒有編程基礎,則需要足夠的耐心,有編程思維會更好。建議按照文章推薦的方法論操作。

最近一直在研究智能體怎么變現的問題,除了做教程,將智能體作為產品出售是個不錯的選擇。

玩過智能體的小伙伴都清楚,無論是國內還是國外,大多數智能體平臺都存在著一些問題:

  1. 對于應用開發者沒有付費支持。
  2. 對于插件提供者沒有 API 費用支持。

面對這些問題,排除一些為愛發電的大佬,很多普通人結合多年的行業方法論,個人精心鉆研和打磨出來的智能體,他們基本上不可能免費開放出來。

那么優秀的智能體就會很難被市場所發現。其實,最重要的問題就是:如何商業化?

除了背負著巨大的風險設計一整套商業化產品之外,我們怎么樣找到一個最小化的商業模式。

我覺得最簡單的模式就是卡密驗證的方式了 — 用戶輸入卡密來使用智能體,或者是核心插件。

接下來我們利用最近大火的 Cursor 做一套卡密系統。

一)用戶故事

用戶故事是什么呢?

用戶故事的目的在于確保開發團隊能夠理解用戶需求,并從用戶角度設計和開發功能。

其常規模板為:“作為[角色],我希望[活動],以便[理由]。”

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

主要有三點作用:

  1. 首先,讓 Cursor 這個執行者了解我們想要做什么樣的應用,從而更準確地搭建代碼框架
  2. 中途作為關鍵的上下文信息,確保方向不偏移。
  3. 最后,可以讓 Cursor 依據用戶故事生成對應的測試用例,保持功能的完整和準確。

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

1、點擊 Cursor 后,選擇提前創建的一個文件夾。

2、創建需求文檔,輸入簡短的需求描述,讓 AI 幫助我們生成用戶故事。

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

二)生成初始代碼框架

1、輸入?command + i?喚起?composer,基于用戶故事,生成代碼結構,點擊回車。建議使用?claude-3.5-sonnet, 目前代碼生成能力最強的模型

2、自動生成代碼后,只有點擊 Accept all 才會生效。

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

仔細閱讀后,發現漏掉了一些文件。

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

補充文件完成,點擊?Accept all。

根據 AI 的回答,我們發現只生成了后端 API,缺少前端界面,我們要求 AI 補充頁面。

向下滑動,根據 AI 回答的測試方式執行命令即可。

這里第一步提到需確保后端服務器正在運行。然后,我們根據上一步 AI 的回復去啟動后端服務。

出錯了,別著急。記得規范糾錯時的提問方式,然后告訴 AI 即可。

提問方式:在【xxxx】位置,做了【xxxx】動作,出現了【xxxx】錯誤,預期是【xxxx】

主要是因為 Python 使用的依賴包存在沖突導致的。我們不需要深究,按照 AI 的回復一步一步執行。

當出現下圖中的標記時,則代表運行成功了。

接下來我們右擊選擇?New Terminal?創建一個命令行去啟動前端服務。

使用 cd 命令,進入 frontend 目錄。再運行啟動命令。

cd 命名的介紹,可以進入 六、加餐 章節查看。

打開瀏覽器,訪問對應的 URL。終于等到你,我的卡密管理系統。

emmmmm……有點簡陋,不過沒關系。我們先簡單驗證下功能,后面再考慮優化。

輸入 AI 提供的賬號密碼,進入維護界面。

三)調試功能

我們先調試下“新增卡密”。調試前,記得在瀏覽器打開 F12,進入瀏覽器控制臺。

如果無法進入,可以自行搜索下如何進入對應的瀏覽器控制臺。

發現不少問題:

  1. 卡密的添加方式應為彈出框,不應該在下方顯示。
  2. 卡密不應由用戶自己輸入,而是系統根據用戶、過期時間和積分輸入后自動生成。
  3. 添加后未生效,控制臺出現錯誤。

我們逐個要求 AI 進行修復。

接受代碼后,程序會自動重啟,我們刷新下頁面,發現第一個問題已經解決。

這一步的優化已經完成,雖然還存在瑕疵,但是不必糾結,先完成再完美。

接下來去修復生成卡密的問題。

這一步修復成功。

接下來測試下?編輯卡密,發現沒有效果,測試時控制臺出錯了。

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

修復成功。

還存在不少問題,比如表格的顯示內容、統計信息的正確性以及頁面美觀度等。

我就不重復演示啦,大家可自行發揮~

在這里,我優化了統計信息的內容,還增加了一張餅狀圖來展示數據

此外,我簡單測試了其他功能,發現一切就緒后,再優化 UI。

如果第一次優化后的結果不滿意的話,可以繼續要求優化。最終效果如下:

當然,有很多地方值得優化,比如頁面的美觀度和卡密的復雜度等都需要進一步改進。

對了,卡密生成后如何使用也需要我們規劃一下。

可以請 Cursor 告訴我們如何將卡密接入接口中,并為我們設計一套方案。大家可以自行嘗試一下。

四)測試(可選)

最后,為了確保功能的準確性,我們可以請 AI 幫忙設計一套測試用例。

進入文檔后,Mac 用戶可以通過?Command + K?喚醒 AI,讓它根據用戶故事為我們生成測試用例。

我們需要逐個驗證每個測試用例,檢查功能是否遺漏、是否存在 Bug。

最終,你擁有了自己的第一個卡密系統。

是不是很有成就感~

五)注意事項

  1. 問題一個一個修復,貪多嚼不爛。
  2. 先完成,再完美,最開始不用在線細節,先完成核心功能。

六、加餐

一)糾錯公式

在【xxxx】位置,做了【xxxx】動作,出現了【xxxx】錯誤,預期是【xxxx】

比如:我在編輯卡密頁面修改了積分后點擊保存,瀏覽器控制臺出現了錯誤”””xxxxxxx”””,我期望保存成功,且表格自動刷新。

學會向 AI 提供線索非常重要,這直接影響我們能否快速修復問題。

二)切換目錄命名 — CD

大家在 Cursor 中可能會遇到切換到某個文件夾下執行命名的情況。

我們可以使用 Cursor 的菜單 Open in intergrated Terminal 直接切換到對應目錄:

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

請允許我偷個懶,畢竟 Kimi 解釋的更加全面,不了解該命令的小伙伴可以看下。

三)Python 教程

過去,我們在微信機器人教程 0 基礎如何打造你的微信機器人?:0 基礎如何打造你的微信機器人?

這篇文章介紹過怎么在 linux 環境安裝 Python,以及什么是 Python 虛擬環境。

Python 的虛擬環境是一個獨立的 Python 運行空間,用于隔離不同項目的依賴庫,避免與系統的 python 版本形成沖突。

關于 Python,這個教程無論是在安裝方面,還是在編程基礎方面,都對每個知識點進行了通俗易懂的講解,非常適合沒有基礎的新手。

強烈推薦大家在 AI 時代掌握一門編程語言,首選無疑是 Python。

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

四)Cursor 提示詞大全

分享個 Cursor 提示詞網站:https://cursor.directory/

網站里有大量網友實踐后上傳的提示詞,可供我們學習和參考。

七、總結

親身體驗后,不得不承認 Cursor 確實稱得上當前最強 AI 編程工具。

但, 誰能想到,在與科技巨頭的激烈競爭中脫穎而出的 Cursor,竟是一支僅有 12 人的小團隊?

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

可以看得出來,他們滿懷希望,干勁十足,用創新思維撬動了整個行業,一躍成為領跑者。

除了工具本身,Cursor 團隊的崛起更值得我們學習。這個只有 12 人的小團隊,竟然可以和眾多大廠的 PK 中脫穎而出。

不禁讓我想起齊白石大師的至理名言:“學我者生,似我者死”。

一味的模仿只是重復別人的步伐,創新性模仿才有機會追上,甚至超越~

希望有所幫助。

本文章轉載微信公眾號@熊貓Jay字節之旅

上一篇:

PyTorch量化壓縮API:優化深度學習模型的關鍵技術

下一篇:

如何在VSCode中免費集成DeepSeek API服務(分步指南)
#你可能也喜歡這些API文章!

我們有何不同?

API服務商零注冊

多API并行試用

數據驅動選型,提升決策效率

查看全部API→
??

熱門場景實測,選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費