AI 原生开放教材

外观

VibeFast 文档官方文档·英文原文 ↗原件 ↓仓库 ↗

我怎麼用 Cursor 把一個功能從想法變成上線 ​

English · 繁中 · Español · 日本語 · Português (BR)

作者： Danko Peng（@dankopeng）
更新： 2026 年 3 月
閱讀時間： 約 10 分鐘

一個真實的功能開發過程 ​

我用一個具體的例子來示範：幫手工皂電商網站加上「庫存不足警示」功能——商品詳情頁在庫存剩 3 件以下時，顯示「僅剩 X 件」的紅色提示。

從想法到上線，整個過程大概 20 分鐘。

第一步：把需求說清楚（5 分鐘） ​

很多人用 AI 工具的最大問題是：需求說得不夠清楚，AI 給的結果一直跑偏，來回改幾次之後比自己寫還累。

在開始之前，先想清楚三件事：

我要什麼： 在商品詳情頁，當庫存 <= 3 時，在加入購物車按鈕上方顯示「僅剩 X 件」，用紅色小字。

在哪裡改： 商品詳情頁的 route 檔案（/shop/:slug）

判斷邏輯： 從 API 回傳的 stock 欄位判斷，<= 3 才顯示，0 時顯示「已售完」並把按鈕 disable。

第二步：告訴 Cursor（3 分鐘） ​

打開 Cursor，按 Cmd+L 開啟對話框，輸入：

「在商品詳情頁（/shop/:slug），當商品的 stock 欄位 <= 3 時，在加入購物車按鈕上方顯示「僅剩 X 件」紅色小字。stock 為 0 時顯示「已售完」，並把按鈕設為 disabled。用 Tailwind CSS。」

Cursor 看到整個專案的結構，知道這個檔案在哪裡，生成的 code 直接能用。

第三步：看 AI 生成的 code（2 分鐘） ​

Cursor 生成了這樣的東西：

typescript
// 庫存狀態判斷
const isOutOfStock = product.stock === 0
const isLowStock = product.stock > 0 && product.stock <= 3
tsx
{/* 庫存提示 */}
{isLowStock && (
  <p className="text-sm text-red-500 mb-2">
    僅剩 {product.stock} 件
  </p>
)}
{isOutOfStock && (
  <p className="text-sm text-red-500 mb-2">已售完</p>
)}

{/* 加入購物車按鈕 */}
<button
  disabled={isOutOfStock}
  className={`w-full py-3 rounded-lg font-semibold ${
    isOutOfStock
      ? 'bg-zinc-300 text-zinc-500 cursor-not-allowed'
      : 'bg-orange-500 text-white hover:bg-orange-400'
  }`}
>
  {isOutOfStock ? '已售完' : '加入購物車'}
</button>

看起來對，邏輯清楚，沒有明顯問題。

第四步：在本地測試（5 分鐘） ​

bash
npm run dev

打開商品詳情頁，確認：

  • 庫存 > 3：正常顯示按鈕，無提示
  • 庫存 <= 3：紅色「僅剩 X 件」出現
  • 庫存 = 0：顯示「已售完」，按鈕變灰色無法點擊

有時候 AI 生成的樣式和預期有點落差。我直接告訴 Cursor：「已售完按鈕的灰色太淡，改成 zinc-400」，它直接修改。

第五步：部署（2 分鐘） ​

bash
npm run deploy

等待部署完成，打開正式環境 URL 確認功能上線。

整個流程：想法 → 上線，20 分鐘。

讓 AI 工具更有效的幾個習慣 ​

從我這一年多的 vibe coding 經驗裡，幾個讓 AI 輸出品質更好的習慣：

說明「在哪個檔案」 不要只說「幫我加一個庫存警示」，要說「在商品詳情頁的 route 加，檔案是 shop.$slug.tsx」。Cursor 能看到整個專案，但給它明確的起點能讓輸出更精準。

說明「為什麼這樣做」 「中文以每分鐘 300 字計算」比「計算閱讀時間」更好。背景資訊讓 AI 做出更合適的選擇。

一次只改一件事 不要一次說「幫我加閱讀時間、加分享按鈕、改標題樣式」。拆成三次請求，每次確認沒問題再繼續。同時改多個東西，出問題很難定位是哪裡的問題。

看不懂的 code 問清楚 「這段 Math.ceil 是在做什麼？」直接在 Cursor 裡問，它會解釋。你不需要完全看懂每一行，但對關鍵邏輯要有基本理解，否則之後出問題你不知道去哪裡找。

本地測試後再部署npm run dev 在本地跑一遍，確認沒問題再 npm run deploy。部署到正式環境之後才發現問題，回滾比較麻煩。

什麼樣的功能適合這個流程？ ​

非常適合：

  • UI 元件的新增和修改
  • 新的 API 端點
  • 資料庫查詢
  • 表單驗證邏輯
  • 樣式調整

需要更謹慎：

  • 涉及付款的邏輯（Stripe webhook、金額計算）
  • 身份驗證相關的修改
  • 會影響現有資料結構的資料庫變更

對後者，AI 生成的 code 可以作為起點，但要更仔細地 review，必要時手動測試每個邊界情況。

總結 ​

Vibe Coding 的核心工作流：

1. 想清楚需求（你要什麼、在哪裡、怎麼算）
2. 給 AI 明確的指令（說檔案路徑、說業務邏輯）
3. 看 AI 輸出，判斷對不對
4. 本地測試
5. 部署

最重要的一點：你是導演，AI 是執行。 每一步都是你在判斷方向，AI 在實現細節。

Danko Peng
X · YouTube · Threads

👉 回到教程首頁

想直接上手完整的 Cloudflare 全棧模板？
👉 vibefast.app — 早鳥 $99，2026 年 8 月 1 日漲至 $199。