AI 萬能程式編寫工具—Cursor：實測製作Chrome Extension (Chatgpt, claude寫程式)

EP2 AI 萬能程式編寫工具—Cursor：實測製作Chrome Extension 擴充功能程式  (Chatgpt, claude寫程式)

1. 什麼是 Cursor？整合各種AI 模型，及自動化生成各種程式語言

2. Cursor AI 寫程式教學

3. 實際案例：使用 Cursor 在Chrome Extension擴充功能 創建網頁字數統計Extension 

4. 實際案例：使用 Cursor 在Chrome Extension擴充功能 創建QR Code

5. 使用Cursor寫程式的好處

 Cursor是一個由 AI 驅動的程式編寫助手，讓程式設計變得更簡單，即使是沒有編寫經驗的人也能上手。Cursor 的用戶友好介面與強大的自動化功能，已經引起了許多人的關注，包括像 Cloudflare 總裁和 OpenAI 聯合創辦人 Andrej Karpathy 等知名科技人物。

Cursor 能夠簡化程式設計並使其更直觀，這使得它成為了熱門話題。初學者也可以不到一小時內完成程式編寫，有了Cursor 人人都可以成為程式設計師 programmer。

什麼是 Cursor？ 整合各種AI 模型，及自動化生成各種程式語言

Cursor 是一款由 AI 驅動的軟體，旨在幫助用戶更有效率地編寫程式。該平台利用自然語言處理（NLP）的力量來解釋用戶指令，並根據這些指示自動生成程式碼。這使得即使從未編寫過程式的人也能夠輕鬆上手。

用戶可以通過簡單的英語與 Cursor 互動，描述他們想要實現的功能。Cursor 然後將這些指令轉換為可執行的程式碼。Cursor 與其他 AI 程式編寫助手的不同之處在於，它能無縫整合到開發環境中，允許用戶以最小的努力自動化編程過程。

Cursor整合各種AI 模型, 如Chatgpt o1, Chagpt 4, Claude 3.5 Sonet

在最近一條爆紅的推文中，Cloudflare 總裁分享了他 8 歲的女兒如何在 45 分鐘內使用 Cursor 編寫程式——對於沒有編寫經驗的人來說，這是一個令人印象深刻的成就。OpenAI 聯合創辦人 Andrej Karpathy 也表達了對 Cursor 的興趣，他計劃從 GitHub Copilot 轉而使用 Cursor，解釋了 AI 現在為他完成了程式編寫的大部分工作。

Cursor 如何運作 Cursor 的美妙之處在於它的簡單性。從 Cursor 官網下載工具後，用戶可以開始創建新項目或打開現有項目。與傳統的編程環境不同，Cursor 的介面設計直觀，即使是初學者也能輕鬆導航。

Cursor AI 寫程式教學

以下是 Cursor 如何幫助您編寫程式的步驟概述：

安裝與設置：到官網下載並安裝 Cursor 後，用戶可以訪問各種模型和功能，包括提供兩週的專業版免費試用，該版本能夠解鎖更快的處理速度和額外功能。

創建新項目：要開始編程，用戶可以在其本地環境中打開一個資料夾並開始設計項目。無論您是使用 HTML、JavaScript 還是其他語言，Cursor 都允許您在用戶友好的環境中編寫程式。

按Ctrl + I 打開AI CHAT BOX ，輸入你想創作的程式或問題

使用 Composer 工具：Cursor 最強大的功能之一是 Composer 工具，它自動化了大部分的程式編寫過程。啟用 Composer 後，您只需用自然語言描述想要的功能，Cursor 便會生成相應的程式碼。例如，您可以讓它創建一個 Chrome Extension 為當前網頁生成 QR 碼。

程式碼生成與優化：Cursor 生成程式碼後，您可以與 AI 進行互動來進一步優化它。例如，如果程式碼未按預期運行，您可以向 AI 反饋錯誤，它將建議改進方案，甚至幫助修復錯誤。這意味著即使是非程式設計師，也能創建複雜的應用程式，而不必理解底層程式碼。

測試與部署：生成程式碼後，Cursor 允許用戶直接測試它。例如，當您創建 Chrome 擴展時，您可以將其載入瀏覽器中，測試其功能，並解決出現的任何問題——這一切都能在 Cursor 環境中完成。

詳細教學:

https://www.99aicreator.com/blog/aigong-zuo-ying-yong-it-7/ai-wan-neng-cheng-shi-bian-xie-gong-ju-cursor-shi-ce-zhi-zuo-chrome-extension-chatgpt-claudexie-cheng-shi-79

實際案例：使用 Cursor 在Chrome Extension擴充功能 創建網頁字數統計Extension

為了展示 Cursor 的強大功能，我們來實現一個實際案例：構建一個字數統計 Chrome 擴展，該擴展可以計算當前網頁的總字數並顯示出現頻率最高的前10個單詞。以下是如何使用 Cursor 完成這個擴展：

步驟 1：打開 Cursor 並創建一個新項目

File > Open a File 

為此項目命名為 "Word Counter Extension"。

步驟 2：使用自然語言向 Cursor 描述項目需求

按Ctrl + I 打開AI CHAT BOX ，輸入你想創作的程式或問題

可以輸入如下描述： "Create a Chrome extension that shows a word counter logo in the bottom-right corner of the webpage. When the user clicks the logo, display the total word count of the webpage, as well as the top 10 most frequently used words and their counts."

步驟 3：Cursor 生成程式碼

Cursor 將生成所需的 HTML、CSS 和 JavaScript 代碼來構建擴展。該擴展將在網頁的右下角顯示一個圖標，當點擊圖標時，它會彈出一個對話框，顯示當前頁面的字數統計和出現頻率最高的前10個單詞。

生成的代碼將包含以下內容：

1. HTML 文件：負責網頁內容及字數統計顯示的結構
2. CSS 文件：用於將字數統計圖標固定在網頁右下角，並設計彈出的字數統計視窗
3. JavaScript 文件：實現字數計算的邏輯，統計網頁中的單詞數量和出現頻率

步驟 4：測試 Chrome 擴充功能

生成程式碼後，您可以在 Chrome 瀏覽器中載入生成程式碼檔案，檔案位置在你先前新開file 的位置

Cursor 也會提供有關安裝步驟

"Certainly! I'll create a basic Chrome extension that implements a word counter with the features you've requested. Here's a step-by-step guide to create this extension:

First, let's create the manifest file:manifest.json1/2

Now, let's create the content script:content.js1/2

Let's add some styles:styles.css1/2

Finally, create an icon.png file for your extension (you can use any 128x128 pixel image).

To use this extension:

Create a new directory and place all these files in it.

Open Chrome and go to chrome://extensions/.

Enable "Developer mode" in the top right.

Click "Load unpacked" and select your extension directory."

留意要把128x128 pixel image放到檔案中

載入後，在網頁右下角看到一個字數統計的圖標。當點擊該圖標時，會彈出一個窗口，顯示當前頁面的總字數以及前10個最常出現的單詞。

步驟 5：優化擴展功能

您可以請求 Cursor 對 UI 或程式碼進行進一步優化

Fix some problem: 

1. count include different language, 

2. the logo on the website is same as the 128x128 pixel image I provided

在Chrome 擴充功能按重新載入

Cursor 輕鬆構建一個字數統計程式

也可以請求 Cursor 對 UI 或程式碼進行進一步優化。例如，可以請 Cursor 調整字數統計圖標的位置，使其不會遮擋網頁內容，或者添加額外功能如"複製統計結果"按鈕等。

最終，即使您之前從未編寫過程式，您也可以在不到一小時的時間使用 Cursor 輕鬆構建一個字數統計程式。

實際案例2：

構建一個為任何網頁生成 QR 碼。

步驟 1：打開 Cursor 並創建一個新項目。將其命名為“Web QR Code Generator”。 

步驟 2：使用自然語言向 Cursor 描述項目需求。例如：“創建一個 Chrome 擴展，為當前網頁生成一個 256x256 的 QR 碼。該 QR 碼應在中間顯示網站的標誌，並在下面顯示網頁標題，標題應為粗體。” 

步驟 3：Cursor 會生成所需的 HTML、JavaScript 及其他文件，甚至會提供下載外部庫（如 qrcode.min.js）的指示。 

步驟 4：生成程式碼後，您可以在 Chrome 瀏覽器中測試擴展。Cursor 還能幫助排除任何出現的錯誤，讓您進一步優化擴展。 

步驟 5：最後，您可以通過請求 Cursor 進行優化來改進擴展的用戶介面和性能，例如調整 QR 碼的佈局或添加一個下載 QR 碼的按鈕。 

使用Cursor寫程式的好處

Cursor 的其中一個最令人興奮的地方，就是它讓程式設計變得更加容易接觸。以往，編程被視為一項需要長時間訓練與經驗的技術活，但隨著 AI 工具如 Cursor 的出現，這個門檻正在迅速降低。那麼，為什麼 Cursor 對於非程式設計師來說是一個完美的選擇呢？

無需程式編寫經驗

無論您有沒有編寫過程式碼，Cursor 都可以讓您創建功能性的項目。對於沒有技術背景的人來說，比如來自商業、行銷、或運營領域的專業人士，他們可以用 Cursor 自動化工作流程，甚至創建自定義的瀏覽器擴展。您只需要用自然語言描述需求，Cursor 會自動幫助您生成程式碼，這樣即使是從未碰過程式碼的人，也能輕鬆創作出高效的工具。

邊做邊學

Cursor 的即時反饋系統能讓您在實踐中學習程式設計。透過以自然語言指令生成程式碼，Cursor 讓用戶能夠親自體驗程式如何運作，並從中學習編程的基本概念。您可以在操作的過程中逐步建立程式知識，隨時與 AI 互動，學習新的技巧。

速度與效率

對於非程式設計師來說，最耗時的部分往往是理解如何開始並撰寫程式碼。Cursor 能大大縮短這一過程。舉個例子，對於初學者來說，可能需要幾個小時才能完成的項目，在 Cursor 的幫助下可能只需要短短的幾十分鐘。在真實案例中，一名用戶在不到一個小時的時間內，成功地開發出一個可運行的 Chrome 擴展程式，這在以前可能需要更長時間和更多努力。

AI 助力的程式設計未來

隨著 Cursor 等 AI 工具的發展，程式設計的門檻正在降低。我們已進入了一個不再依賴於語法掌握的時代，現在的重點更多放在創造力與問題解決。透過消除技術障礙，AI 編程工具讓更多人可以參與到軟體開發的世界中。不論您是編程新手還是已經擁有豐富經驗的設計師，Cursor 都能讓您專注於「做什麼」，而讓 AI 處理「怎麼做」。

這種 AI 與程式設計工作流的結合，讓程式設計不再是技術專家才能掌握的技能。我們正邁向一個嶄新的時代，任何擁有好想法的人都可以通過 AI 工具如 Cursor，將創意變為現實。