在現今快速變遷的數位時代，網頁開發已不再是單純的程式碼堆疊，而是結合創意、使用者體驗與效率的綜合工程。對於需要建置比單純登陸頁面更複雜應用的開發者而言，掌握網頁 UI 函式庫與框架的技能至關重要。然而，有沒有一種方式，能讓我們在不深入程式碼的細節中，也能練習「Vibe Coding」，快速構建出網頁應用程式呢？本文將帶您一探究竟。
先前，我們曾介紹過如何利用 Cursor AI 快速建置功能完善的 iOS 應用程式。這次，我們將焦點轉向網頁開發，目標是打造一個包含各種指標與關鍵績效指標 (KPIs) 的儀表板。我們將運用 Next.js 這個基於 React 的熱門網頁框架，並透過 AI 的輔助，實現前所未有的開發效率。
建置網頁應用程式的必備條件
在開始之前，請確保您已準備好以下工具與環境：
- 一台執行 Windows、Linux 或 MacOS 的電腦。
- 已安裝 Node.js，且版本需為 18.18 或以上。
步驟一：建立專案資料夾
首先，為您的新專案創建一個專屬的資料夾，以便後續存放所有專案相關檔案。
步驟二：創建 Next.js 專案
相較於 iOS 應用程式開發需要同時在 Xcode 和 Cursor AI 這兩個開發環境中切換，網頁開發的「Vibe Coding」模式則能更純粹地透過 Cursor AI 完成。要創建一個新的 Next.js 專案，請開啟終端機（通常位於編輯器的下方面板），並輸入以下指令：
npx create-next-app@latest
在您輸入專案名稱並完成設定精靈後，Next.js 便會為您自動生成一個全新的專案。完成專案生成後，第一件要做的事是確保它能正常運作。您可以執行以下指令來啟動開發伺服器：
npm run dev
這個指令會在您的機器上啟動一個開發伺服器，您可以在瀏覽器中開啟提供的 URL，確認專案是否如預期般運作。
步驟三：為 AI 助手配置上下文
AI 助手生成程式碼的品質，很大程度上取決於它對專案及其所使用技術的理解程度，也就是「上下文」。在設定上下文時，我們推薦採取以下三個關鍵步驟：
1. 限定修改範圍
根據我們在 Cursor AI 上進行 Next.js 開發的經驗，強烈建議將 AI 的修改範圍限定在特定的檔案或目錄，而不是讓它有機會修改整個專案。一旦將上下文設定為整個專案，Cursor AI 往往會傾向於重新生成一個全新的 Next.js 專案，或修改大量檔案，這將導致不必要的迭代。因此，我們建議的第一步是將您專案的首頁檔案加入到上下文中。例如，如果您正在修改 page.tsx，就將這個檔案加入。這樣做能確保 AI 專注於您期望修改的部分，大幅提升效率。
2. 引入官方文件
為了讓 Cursor AI 能夠依賴最新的官方文件生成程式碼，我們強烈建議將 Next.js 的官方文件也加入到上下文中。這就像給 AI 提供了一本權威的參考手冊，確保其生成的程式碼符合官方的最佳實踐和最新規範。您可以透過點擊標籤圖示，選擇「Docs」，然後搜尋 Next.js，或是直接輸入 Next.js 官方文件的 URL 來新增。
3. 設定 AI 規則
最後，我們建議加入「Cursor Rules」——這是一組 AI 助手在生成程式碼時應遵循的特定指令。您可以在 Cursor.directory 中找到這些規則。通常，您可以將一個名為 cursorrules 的檔案添加到專案的根目錄。這些規則能夠幫助 AI 更好地理解您的開發偏好，並生成更符合您期望的程式碼。
步驟四：撰寫初始提示
我認為，您提交給 AI 助手的初始提示至關重要。您必須清楚地說明您想要建置什麼，以及為什麼需要它。以我為例，我正在為一家連鎖飯店建置一個包含各種指標與 KPIs 的儀表板。因此，我希望明確列出我想要看到的圖表。以下是我使用的提示預覽（僅提供前三個圖表）：
「我想在 page.tsx 中新增一個飯店業績儀表板。
儀表板將包含 6 個圖表。對於每個圖表，我將提供具體的細節以及顯示它的通用原因。
- 營收時間趨勢圖
原因：追蹤客房的入住率，顯示季節性趨勢，並有助於預測。
圖表類型：折線圖
衡量期間：過去 12 個月（每月細分）
X 軸：月份
Y 軸：入住率 (%) - 各分店營收比較
原因：快速比較各飯店的業績，以識別表現不佳或表現突出的地點。
圖表類型：水平長條圖
衡量期間：本月（可透過下拉選單切換至季/年）
X 軸：營收 ($)
Y 軸：飯店名稱 - 預訂來源分佈
原因：了解客人來自哪些預訂管道，以制定市場行銷策略並計算佣金成本。
圖表類型：圓餅圖
衡量期間：過去 30 天
類別：網站、OTA（例如 Booking.com）、直接來電、旅行社
此外，請注意，我希望清楚地告知 AI 助手，我要對專案的首頁 page.tsx 進行修改。
步驟五：迭代與優化
根據我的經驗，使用 Cursor AI 迭代和優化 Next.js 專案通常比 iOS 專案需要更多的時間。我所建置的第二個 Next.js 專案，最初都帶有一些錯誤。然而，好消息是，您可以透過不斷提示 AI，要求它尋找並修復這些錯誤來進行迭代。有些錯誤可以直接在 AI 助手視窗內修復，但對於某些問題，您可能需要深入程式碼來找出根本原因。
此外，我發現許多時候，您不需要撰寫非常複雜的提示來調整專案的視覺外觀。一個簡單的提示，例如「讓 UI 看起來更漂亮」，與更複雜的指令：「使用 CSS 樣式，請重構 page.tsx 使其更具美感」，在許多情況下效果是相似的。
資料洞察 1： 根據 Nick Babich 的經驗，在 Next.js 開發中，將 AI 的修改範圍限定在特定檔案而非整個專案，可以顯著減少不必要的迭代。這與他先前在 iOS 開發中觀察到的不同，後者可能需要同時處理 Xcode 和 Cursor AI 的不同開發環境。 (來源：參考內容)
資料洞察 2： 為了確保 AI 生成程式碼的準確性，將 Next.js 的官方文件加入到 AI 的上下文環境中，是個有效的策略。這能讓 AI 參考最新的官方資訊，減少出錯的可能性。(來源：參考內容)
資料洞察 3： 儘管 Cursor AI 能大幅加速原型開發，但根據作者的經驗，Next.js 專案的完整功能實現和視覺優化，往往需要幾次迭代，甚至需要開發者親自介入程式碼除錯。AI 提供的解決方案可能是一個良好的起點，但不一定能直接部署。(來源：參考內容)
結論
正如您所見，Cursor AI 能夠幫助我們快速將想法視覺化，並快速建構出可供利益相關者分享以收集回饋的解決方案。然而，在達到一個可供客戶使用的功能性專案狀態之前，您很可能需要與 AI 助手進行數次的迭代與精煉。在我提供的範例中，Cursor AI 所提供的解決方案在功能和視覺層面仍有一些待改進之處。儘管如此，它絕對可以作為設計流程中一個極佳的起點，但也說明了它不太可能直接成為一個可以直接交付給客戶的最終解決方案。
總而言之，「Vibe Coding」透過 AI 工具，為網頁開發帶來了前所未有的效率提升。它讓我們能夠更快地驗證概念、收集回饋，並將更多精力投入到解決方案的核心創新上。
如果您對 AI 如何改變軟體開發，以及如何利用最新技術快速創業感興趣，我們誠摯邀請您加入我們的社群。
立即加入🚀🔥Mentalok 慢得樂 Vibe-Coding & Tech Startup創業課程官方頻道，取得更多即時AI，創業及Funding資訊。
Source：https://uxplanet.org/vibe-coding-for-web-with-cursor-ai-0059aa5e5803?gi=2ae9c5591164
Chinese 
English 