Cursor AI 從入門到精通：使用 AI 建立生產級 Web 應用程式

使用 Cursor AI（Vibe 編碼）建立並發布完整的 Next.js Web 應用程式。包含 MCP、自訂規則、身份驗證、付款等功能！

從這 6.5 小時的課程，你會學到

遵循 Cursor AI 在實際開發中的最佳實踐
使用現代技術建構和部署全端應用程式
利用 AI 加速開發工作流程
使用 Clerk 實現身份驗證、授權和計費
使用 Shadcn UI 和 Tailwind CSS 設計簡潔、易用且反應迅速的使用者介面
使用 Drizzle ORM 和 Neon PostgreSQL 對關聯式資料進行建模和管理
使用 Vercel 和環境最佳實踐部署和擴展全端應用程式

要求

了解 Next.js 會很有幫助，但即使只有最基本的 Next.js 知識，您仍然可以跟著教程學習。

課程說明

結合 Cursor AI 的強大功能和最佳的現代 Web 工具：Next.js 15、TypeScript、Tailwind CSS、Shadcn UI、Drizzle ORM、Clerk 和 Neon PostgreSQL，以前所未有的速度建立生產級全端應用程式。

在此以專案來學習的課程中，您將建立 FlashyCardy，一款簡潔的記憶卡應用程式。用戶可以註冊、建立卡組和卡片，並透過 Stripe 和 Clerk 付款升級到專業版套餐。您將實現完整的身份驗證、基於角色的存取控制和 SaaS 式訂閱系統，所有編碼工作均由 Cursor AI 完成。這就是所謂的「Vibe Coding」（即「Vibe 編碼」！）。

沒錯：整個應用程式都是透過提示 Cursor 建構的。無需手動編寫任何程式碼。您將學習如何使用代理模式( Agent Mode )、結構化提示和 Cursor 規則，引導 Cursor 從空白代碼庫構建出一個已部署的、可用於生產環境的應用程式，從而控制 AI 並獲得高品質、安全可靠的代碼輸出。

您還將使用 MCP（ Model Context Protocol，模型上下文協議）無縫連接到您的 Neon PostgreSQL 資料庫，並透過 Drizzle ORM 產生種子資料、模式和查詢，所有這些都將透過 AI 實現。

了解如何：

僅使用 Cursor 提示( prompts )從零開始建立全端 SaaS 應用
利用代理模式和 Cursor 規則實現一致、安全且準確的開發
透過 MCP + Drizzle 連接到 Neon 並填充關係數據
使用 Clerk 實現身份驗證、存取控制和 Stripe 計費
使用 Shadcn UI + Tailwind CSS 建立美觀且易於存取的使用者介面
使用 Vercel 部署生產環境配置

課程結束時，你將擁有一個功能齊全的應用程式“FlashyCardy”，以及使用人工智慧建立實際應用程式的實用工作流程。這不僅是觀看程式碼生成，更是學習如何像專業開發者一樣思考、引導和控制人工智慧。

如果你準備好告別手動編寫樣板程式碼，開始以更聰明的方式運用人工智慧進行開發，那麼這門課程正是為你量身打造的。

目標受眾

開發者和非開發者，想要學習如何使用 Cursor 編寫全端、生產就緒型專案的程式碼

講師簡介

Tom Phillips | WebDevEducation 為繁忙的 Web 開發人員的快節奏、資訊量豐富的課程

Tom 從事網頁開發十餘年。他創建了 WebDevEducation，旨在提供能夠提升自身價值並幫助您在網頁開發領域脫穎而出的課程。湯姆的課程節奏緊湊、資訊豐富、以專案為導向，絕不浪費時間在無用的內容上。與其花費 30 多個小時學習您可能無法完成的課程，不如用四分之一的時間學習同樣的內容，並在課程結束時獲得一個功能齊全的託管專案，以及 GitHub 代碼來證明您掌握了相關技術。跟隨湯姆學習流行的網頁開發庫和框架，在競爭中脫穎而出！

(TOMPHILL LTD – 09531652)