零基礎AI編程
Cursor 助力 Vibe Coding 實踐

說透什麼：編程難學，難在人腦的模糊直覺與程式要求的精確相衝；AI 編程把門檻從「記語法」移到「講清楚問題」。

本章梗概 · 本站整理：本章先拆解傳統編程為何難學：人腦慣用模糊、直覺和整體式判斷，程式卻要求精確、系統化與細節無誤，加上記憶負荷、抽象概念和對數學的心理恐懼。接着指出 AI 編程改為用自然語言講需求，讓編程回歸「告訴電腦做什麼」，並帶來四項範式升級：由細節實現轉向定義問題、由線性執行轉向系統設計、由記憶轉向理解、由被動使用轉向主動創造。最後談提問、工具選擇、基礎概念、問題解決與拆解能力，並以模仿到創造的成長路徑作結。

1.1 爲什麼編程這麼難學？

• 書中指出人腦慣用「可能」「差不多」這類模糊講法，程式只認精確數值，兩套認知模式天生相衝。
• 再把難點拆成直覺對系統思維、整體對細節苛求、工作記憶超載、錯誤多層次、回饋遲緩等線索。
• 並補充心理恐懼、身份認同困惑與知識遷移鴻溝，說明這些障礙對感性思維者尤其明顯。

1.2 AI編程的思維革命：人機交互的新篇章

• 書中以劍橋詞典對編程的定義切入，主張新模式讓人類用對話講意圖，由 AI 轉成可執行指令。
• 作者列出四類核心工具：大語言模型、智能編程環境（如 Cursor）、專業化 AI 工具與低代碼平臺。
• 並提出四項範式升級與思維轉折，如由「如何做」轉向「做什麼」，並靠降低實驗成本催化創新。

1.3 AI編程：重新定義創造的可能性

• 書中舉出個人把工作經驗自動化成小工具、Home Cooked App 自製應用，以及小眾需求共同體等例子。
• 團隊層面用「原型即溝通」減少返工，並讓設計、產品、開發與非技術崗位邊界變得模糊。
• 作者歸納新時代四大能力——洞察力、想象力、執行力、創造力，強調四者互相強化。

1.4 如何掌握AI編程

• 書中把重點放在軟技能：產品設計、任務拆解、邏輯分析、提問與計算思維，而非背語法記函數。
• 提問藝術要求具體、分步、迭代重問、要 AI 解釋原理，並精確引用檔名與函數名。
• 工具與知識部分建議選強模型、用專業 AI 環境、挑主流技術棧；成長路徑分模仿、調整、創建、優化四階段。

精華／案例：書中以「人腦說差不多、程式要精確」的對照貫穿全章，再用四項範式升級與四大能力，說明 AI 編程重塑的其實是提問與拆解問題的方式。

AI編程是一種通過自然語言直接指導計算機工作的方法。

—— 1.2.2 什麼是AI編程？ · 來源 05.txt

AI編程帶來的不僅是技術工具的變革，更是思維方式的根本轉變。

—— 1.2.4 編程思維的轉折點 · 來源 05.txt

閱讀行動：可在 Cursor 開一個最小項目，用一句話講需求，再按 1.4 的提問要點補細節，比較兩次輸出差異。

校對來源：05.txt · 摘要與要點為本站整理，短引文逐字摘錄。

說透什麼：提示詞的完整度決定輸出落差；學會三種需求開發方式，就知道什麼時候一句話、什麼時候先寫規格。

本章梗概 · 本站整理：本章以 Lovable 為例，用俄羅斯方塊與超級瑪麗兩句提示做對照，發現前者完整、後者落差大，帶出提示詞質量對結果的影響。接着講提示工程，說明簡單句與提示工程的適用分界，歸納明確任務、提供上下文、指定輸出格式、結構化描述、迭代優化五大原則，再介紹角色扮演、思維鏈、批判性思維與確定性控制等技巧。最後提出三種開發方式——快速驗證、持續迭代、系統規劃，並教讀者用決策樹與混合策略選擇，再以架構圖生成收尾。

2.1 一句話生成一個產品

• 書中用 Lovable 做俄羅斯方塊與超級瑪麗兩組對照，指出同一句話的落差源於需求複雜度與提示完整度。
• 並列出 V0、Claude、Bolt.new、GitHub Copilot 等平臺，以及預覽、分享部署與免費版限制。
• 強調想要更好結果，就要在描述中補上功能、界面美觀度與排序方式等細節。

2.2 理解提示工程的本質

• 書中把提示工程比喻成與外國朋友溝通的外語課，說明一句話提示只夠應付明確無歧義的任務。
• 核心原則有五項：任務明確、提供輸入與上下文、指定輸出格式、結構化描述、迭代優化。
• 高階技巧有角色扮演、思維鏈、批判性思維與控制輸出確定性，也可請 AI 分析並改寫自己的提示詞。

2.3 從想法到代碼：3種需求開發方式

• 第一種快速驗證靠一句話需求，書中提醒要講清產品類型與要解決的問題，成效取決於 LLM 與 Agent 能力。
• 第二種持續迭代像敏捷開發，用多輪對話逐項加功能；第三種系統規劃用 README.md 承載完整需求。
• 作者再給出決策樹（規模、時間、需求明確度、LLM 能力）與分階段混合策略，並強調架構圖要一次生成完整版。

2.4 技術方案探索

• 書中示範向 LLM 追問，把產品架構轉成 Mermaid 技術架構圖；以智能音箱為例，由硬件層鋪到雲服務層。
• 作者列出七個層級，並說明箭頭代表數據流與依賴關係，讓非技術讀者也能掌握系統全貌。
• 架構圖可用來確定學習重點、建立系統認知、安排逐層開發順序，以及為每個組件挑選技術棧。

精華／案例：書中以兩句提示生成遊戲作對照，是全文最直觀的示範：同一模型下，補齊功能、界面與排序細節的一方，得到更完整的成品。

提示工程（Prompt Engineering）不僅僅是一種技術實踐，更是人類與AI高效溝通的藝術。

—— 2.2 理解提示工程的本質 · 來源 06.txt

在AI輔助開發時代，把想法轉換成代碼變得前所未有的簡單。

—— 2.3 從想法到代碼：3種需求開發方式 · 來源 06.txt

閱讀行動：可先在 Lovable 或 v0.dev 用一句話生成一個小遊戲，再依 2.2 原則改寫同一句提示並比較結果。

校對來源：06.txt · 摘要與要點為本站整理，短引文逐字摘錄。

說透什麼：看得懂產出才驗證得了；用建屋比喻與餐廳比喻，把前端、後端、數據與版本控制的底層一次講清。

本章梗概 · 本站整理：本章為編程入門打底：先以建屋比喻拆解 HTML、CSS 與 JavaScript／TypeScript 的角色，再帶到 Python，並補充變量、方法、循環、條件與錯誤處理等概念。接着講數據結構與存儲，由數組、對象到 JSON、XML，再到瀏覽器端的三種存儲與伺服器端的 MySQL、MongoDB，並給出選型原則。最後介紹客戶端與服務端分工、三種通訊方式及 GitHub。

3.1 必須掌握的代碼知識

• 比喻建屋：HTML 管結構、CSS 管外觀、JavaScript 負責互動，TypeScript 加約束，Python 主攻 AI。
• 把變量講成收納盒、方法講成操作指南，再延伸到循環、條件、錯誤處理、框架與 API／SDK 等基礎。
• 強調各語言各有適用場景，強行混寫會令環境配置、除錯與協作變複雜，項目應前後端分離。

3.2 數據結構和數據存儲

• 先講數組（有序、有索引）與對象（鍵值對）兩種基本結構，再帶出 JSON 與 XML 兩種交換格式的差異。
• 瀏覽器三種存儲各有取捨：LocalStorage 持久，SessionStorage 關標籤即清，Cookie 容量小。
• 介紹 MySQL 與 MongoDB 的分野，並按數據量、讀寫頻率與重要性給出選型原則。

3.3 客戶端和服務端

• 用餐廳前廳與後廚比喻客戶端與服務端，說明分工可改善性能、安全、體驗與可維護性。
• 客戶端負責界面、用戶操作與本地存儲；服務端負責數據管理、請求處理、運算、保安與併發。
• 對比 HTTP 一問一答、WebSocket 長連接與輪詢三種通訊方式各自的適用場景。

3.4 GitHub使用教程

• 把 GitHub 定位為全球最大的代碼託管與協作平台，兼具學習、展示、社群交流與版本控制價值。
• 指出版本控制會記錄每次修改、可回溯任意歷史版本，並讓多人同時改動時不互相干擾。

精華／案例：書中用「房子骨架」與「餐廳前後廚」兩組比喻，把抽象的前後端與數據結構講成可想像的畫面，是全章最易記的兩條線索。

HTML就像房子的骨架，決定了房間的佈局和基本結構

—— 3.1 必須掌握的代碼知識 · 來源 07.txt

Node.js是一個基於Chrome V8引擎的JavaScript運行環境

—— 3.1.4 代碼不能混着寫 · 來源 07.txt

閱讀行動：打開任一網頁右鍵檢視原始碼，對照本章辨認結構與樣式，並想想當中的數據應存在哪一層。

校對來源：07.txt · 摘要與要點為本站整理，短引文逐字摘錄。

說透什麼：Agent 不只是會聊天的模型；把 System Prompt 寫好、把密鑰收好，就能從 Chatbot 一路做到新聞摘要 Agent。

本章梗概 · 本站整理：本章聚焦用 Cursor 開發 Agent：先解釋 Agent 由模型、工具與編排層組成，並與純 LLM 作對比；再拆解 System Prompt 的角色定位、行為規範、能力邊界與異常處理四要素。實作先用 Next.js、shadcn/ui 與 DeepSeek-R1 搭 Chatbot，強調密鑰放環境變量、界面先用假數據，再接流式輸出；再換上產品經理 System Prompt，最後做 RSS 新聞摘要 Agent。

4.1 Agent基礎知識介紹

• Agent 是具備自主決策能力的智能應用，由模型、工具與編排層構成，能做到觀察、思考並行動。
• 與純 LLM 相比，Agent 可藉外部工具取得即時資訊、保留長期記憶，並實際調用 API 完成任務。
• System Prompt 如 Agent 的入職手冊，須涵蓋角色定位、行為規範、能力邊界與異常處理四要素。

4.2 實現一個Chatbot

• 技術棧為 Next.js、shadcn/ui 與 DeepSeek-R1；開發時先用假數據搭界面，之後才接真實接口。
• 借 Cursor 的 Agent 模式與截圖理解生成界面，依賴安裝報錯時把訊息回饋給 Cursor 反覆修正。
• 強調不可硬編碼 API 密鑰，要改用環境變量並加入 .gitignore，再整合硅基流動的 DeepSeek-R1。

4.3 實現一個AI產品經理

• 只要為既有 Chatbot 換上產品經理專用的 System Prompt，即可讓助手回答產品設計問題。
• 加入流式輸出讓回覆逐字顯示，用戶能更早看到反饋，對話過程也更像與真人交談。

4.4 實現一個新聞摘要Agent

• 以 RSS 訂閱而非網頁爬蟲取得多個新聞源，並把完整文章內容連同精煉要求交給 DeepSeek-R1 總結。
• 採分步除錯：先驗證能否取得與解析 RSS、看清各源欄位差異，再交給 AI 處理，避免傳錯數據。
• 面對南方週末源取不到，選擇先刪除問題源、確保 36氪與極客公園可用，優先保住完整流程。

精華／案例：書中「先用假數據搭界面、再接真接口」與「分步除錯、先驗 RSS」是兩個反覆出現的示範手法，把大任務切成可驗證的小步。

Agent是一種智能應用程序，它的特別之處在於具備自主決策能力

—— 4.1.1 什麼是Agent · 來源 08.txt

我們會將Next.js作爲前端框架，將shadcn/ui作爲UI組件庫

—— 4.2 實現一個Chatbot · 來源 08.txt

閱讀行動：照本章步驟用 Cursor 開一個小項目，先把 API 密鑰存進環境變量，再逐步接上模型測試。

校對來源：08.txt · 摘要與要點為本站整理，短引文逐字摘錄。

說透什麼：把一個大任務拆成多個角色、讓多個 Agent 接力與並行，靠的是清晰的 System Prompt 設計與前後端聯調。

本章梗概 · 本站整理：本章先以足球隊、蟻羣等例子講多 Agent 系統的分工、並行與集體智慧，再以 LOGO 設計項目貫穿實作：從 GitHub 建倉、用 Cursor 初始化 Next.js 界面，到串接硅基流動 API 做前後端聯調。接着為各角色設計 System Prompt、改造 API 讓多個 Agent 依序協作，再把圖形設計師升級成 ComfyUI Agent。最後談重構、中斷請求與 Prompt 測試。

5.1 認識多Agent系統

• 以蟻羣、候鳥和足球隊比喻多 Agent 系統，說明各自獨立卻能為共同目標配合。
• Agent 由決策大腦、工具箱、行動管理器組成；MAS 擅長分工、並行與集體智慧。
• 書中以 LOGO 設計工作室示範角色拆分：客戶經理、創意總監、設計師與審覈員。

5.2 基本的界面框架

• 先在 GitHub 建倉同步到本地，再用 Cursor 初始化 Next.js 並安裝 Ant Design。
• 書中要求首頁左側輸入需求、右側分頁切換文本與圖像，並用 Mock 數據先撐起界面。
• 提交前要設好 .gitignore，避免把 node_modules 與 .next 等目錄推上倉庫。

5.3 實現後端接口和前後端聯調

• 開發新功能前先開 api 分支；Next.js 以 app/api 下的 route 檔自動成為後端端點。
• 書中把硅基流動 API 文檔加入 Cursor 的 Doc，示範文本與生圖兩個 Agent 分工。
• 用瀏覽器 DevTools 的 Network、Elements、Console 面板檢視請求、樣式與日誌。

5.4 實現多Agent協作

• 為每個角色建立獨立的 System Prompt 類檔，講清角色、職責、輸入輸出與行為準則。
• 改造 api/logo 讓客戶經理、創意總監、圖形設計師與審覈員依序接力。
• 安裝 Marked 把 JSON 結果轉成 Markdown 渲染，供界面統一顯示。

5.5 實現ComfyUI Agent

• ComfyUI 是為擴散模型設計的節點式界面，工作流用 JSON 保存。
• 書中把工作流 JSON 送到 Prompt 接口，靠 client_id 與 WebSocket 追蹤進度。
• 再把生圖流程包成 ComfyUI Agent，用參數開關決定走硅基流動還是 ComfyUI。

5.6 項目優化與重構

• 把數據處理與界面渲染分離，hooks 管資料、components 管畫面，提升複用與可測性。
• 用 AbortController 中斷不再需要的請求，避免浪費網絡資源。
• 以 jest 為智能體 Prompt 建立測試用例，並善用 Cursor 與瀏覽器工具排查錯誤。

精華／案例：LOGO 設計工作室是多 Agent 協作的完整示範：客戶經理、創意總監、設計師、審覈員依序接力，最後再把設計師升級成 ComfyUI Agent。

多Agent系統（Multi-Agent System，MAS）就像一個由多個智能小助手組成的團隊。

—— 5.1.1 多Agent系統概述 · 來源 09.txt

Prompt工程就像一位優秀的導演，指導每個Agent（演員）如何表演自己的角色。

—— 5.4 實現多Agent協作 · 來源 09.txt

閱讀行動：對照 GitHub 的 logo_design 範例，用 Cursor 逐段讀懂多 Agent 的協作流程。

校對來源：09.txt · 摘要與要點為本站整理，短引文逐字摘錄。

說透什麼：讓 AI 助手不再「每次見面都如初識」：用 MCP、知識圖譜與 Function Call 設計長期記憶，並以測試收尾。

本章梗概 · 本站整理：本章打造一個帶長期記憶的 AI 知識助手。先解釋 AI 為何需要記憶，比較短期與長期記憶的差別，並選定 Python、Starlette、Uvicorn、React 與 MCP 等技術棧。之後搭建 MCP 服務端，用知識圖譜管理實體和關係，靠 Function Call 生成結構化請求；再以 SSE 串流、vis.js 與 CORS 完成客戶端。最後設計用戶偏好並以測試收尾。

6.1 項目概述與技術選型

• 沒有記憶的 AI 每次對話都像初次見面；記憶模塊帶來對話連貫、個性化與主動任務管理。
• 短期記憶靠對話上下文，容量受窗口限制；長期記憶則需專門存儲與檢索。
• 技術棧選 MCP 加 Python、Starlette、Uvicorn、React 與 SSE，兼顧效率與可擴展。

6.2 搭建MCP服務端

• MCP 由 Anthropic 開發，定義資源、工具、提示三種交互方式，有別於傳統單向 API。
• 書中先寫一個百行內的 Python 服務，再參考官方範例擴充成 memory 版。
• MCP 基於 JSON-RPC 2.0；本項目採 HTTP with SSE，並寫 client 驗證工具呼叫。

6.3 構建Agent記憶模塊

• 知識圖譜以實體、關係、屬性與三元組表示記憶，讓助手具備聯想式檢索。
• 檢索可用關鍵詞匹配、向量相似度或圖遍歷；書中請 Cursor 以 BFS 找最近與最遠節點。
• Function Call 讓模型輸出結構化請求，並用 json-repair 容錯及處理中文編碼。

6.4 客戶端開發與用戶體驗

• 客戶端提供設置、知識圖譜可視化與實體關係列表，介面講求科技感與即時反饋。
• 配置存本地緩存，用 mcp-uiux 連線並顯示狀態；跨域要在服務端加上 CORS 支援。
• 聊天接上 LLM API 並採流式傳輸，按保存圖標即把回覆經 Function Call 提煉成記憶。

6.5 測試與迭代

• Python 有 unittest、pytest 與 doctest；書中為偏好更新方法寫 unittest 用例。
• 測試循序漸進，先功能驗證、再邊界條件、最後集成測試。
• 調試先比對輸入輸出、把完整上下文交給 Cursor，必要時用分而治之拆解問題。

精華／案例：全章以「記住你」為目標串起 MCP 服務、知識圖譜與客戶端；書中的示範是先跑通百行內的 simple MCP 服務，再逐層擴充成帶偏好的記憶版本。

MCP（Model Context Protocol，模型上下文協議）是一種專門爲AI應用設計的通信協議。

—— 6.2.1 MCP拓展知識 · 來源 10.txt

短期記憶：就像AI助手的“工作記憶”，存儲當前對話中的信息。

—— 6.1.2 記憶模塊的工作原理 · 來源 10.txt

閱讀行動：先跑通書中的 simple MCP 服務與官方 client 範例，再為服務補上圖遍歷與偏好工具。

校對來源：10.txt · 摘要與要點為本站整理，短引文逐字摘錄。