Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 9 分鐘

CH17 · AI 輔助前端開發 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

章節目標

AI 已經改變前端開發流程——Cursor / Copilot / v0.dev / Figma+AI 不是「選配」。本章建立從 AI 編輯器到 Design-to-Code、從 Vercel AI SDK 到 AI Agent UI、從 Prompt Engineering 到生成測試的完整前端 AI 整合能力。

跟 content/ai/ 系列的分工：AI 系列放「AI 是什麼、Prompt 通論、AI 生態」；本章放「前端工程師怎麼用 AI 工具與整合 AI 能力到產品」。

🌱 基本介紹

#主題SlugStage大綱
01AI 輔助前端開發是什麼01-what-is-ai-assisted-frontend🌱AI 在前端的四大面向：編輯器輔助、Design-to-Code、產品內 AI 整合、AI Agent；每個解決什麼問題
02前端工程師的 AI 工具版圖02-frontend-ai-landscape🌱編輯器（Copilot / Cursor / Zed / Windsurf / Claude Code）、設計轉 code（v0 / Lovable / Bolt）、AI SDK（Vercel AI / OpenAI / Anthropic）

❓ 為什麼需要

#主題SlugStage大綱
03為什麼 2024+ 不用 AI 會落後03-why-not-ai-falls-behind🌱產出速度差、重複性 task 自動化、同事都用你不用、但也要警覺過度依賴
04為什麼 AI 寫的 code 不能無腦用04-why-not-copy-blindly🌱Hallucination（API 不存在）、過時資訊、security 風險、跨版本錯誤、為什麼 review AI code 跟 review 同事 code 一樣重要
05為什麼要懂 AI 的邊界05-why-understand-limits🌱AI 擅長什麼（boilerplate / 重複性 / 規範清楚的）、不擅長什麼（系統設計 / 跨檔案邏輯 / 業務 domain）、知道邊界才能用得好
06為什麼要學 Prompt 不只學工具06-why-learn-prompt🌱同樣工具不同人用效果差十倍、Prompt 是新的可攜技能、工具會換 Prompt 思維不會

🕰️ 演進

#主題SlugStage大綱
07AI 編輯器演進07-ai-editor-evolution🌱Tabnine → Copilot（2021） → Cursor（2023 改變遊戲規則） → Windsurf → Claude Code / Cline（Agent 世代，2024）
08Design-to-Code 演進08-design-to-code-evolution🌱Zeplin / Avocode（純 spec）→ Anima / Locofy（匯出 code）→ v0.dev（2023 從 0 生成） → Lovable / Bolt.new（full app）→ Figma Make
09前端 AI SDK 演進09-frontend-ai-sdk-evolution🌱直接呼叫 OpenAI API → LangChain.js → Vercel AI SDK（2023 簡化 streaming） → AI SDK RSC → Mastra / LlamaIndex TS
10框架淘汰 vs AI 淘汰：歷史類比與今日定位（觀點文）10-framework-era-vs-ai-era🌱歷史類比：2010 年代 jQuery → AngularJS → React 轉換，「不會框架」的人被一批批淘汰；「框架戰爭期」的混亂幾年；後來穩定到 React 主導 + Vue / Svelte 共存。今日 AI 時代：Copilot（2021）→ Cursor（2023）→ Claude Code / Agent（2024）→ ?（每 6 個月換主流），「不會用 AI」的標準正在形成但超級模糊。個人策略：在標準未定時的 3 個選擇——(1) all-in 押某個工具、(2) 不碰等塵埃落定、(3) 廣泛嘗試累積判斷力；哪些技能在框架戰中 survive 的人有什麼共同特徵、對今日 AI 時代的啟示。整理這類觀點就是寫 blog 的價值——當所有人都在追工具，有人在整理「工具背後的思考框架」

🧠 知識型

AI 編輯器

#主題SlugStage大綱
10GitHub Copilot（基礎款）10-github-copilot🌱Inline suggestion、Copilot Chat、Copilot Workspace（agent-style）、訂閱方案選擇
11Cursor 深入11-cursor-deep🌱Composer（多檔案）、@ 提及 file / docs / web、Rules for AI、跟 VS Code 差異、訂閱費值不值
12Claude Code / Cline（Terminal Agent）12-claude-code-cline🌱Terminal-based agent、整個 repo context、怎麼跟 IDE 工作流整合
13Zed / Windsurf / 其他選項13-other-ai-editors🌱Zed（Rust 寫的、效能好）、Windsurf（Codeium agent mode）、當作 Cursor 替代選項

Design to Code

#主題SlugStage大綱
14v0.dev 工作流14-v0-workflow🌱從 prompt / 圖片 / Figma 生成 React + Tailwind、shadcn/ui 整合、iteration 對話、匯出到自己的 repo
15Lovable / Bolt.new15-lovable-bolt🌱從一句話生成整個 app、適合 prototype、跟 v0 差在哪、商業應用局限
16Figma Dev Mode + AI 工具比較16-figma-ai-comparison🌱Anima / Locofy / Builder.io / Figma Make、哪個產出最接近你家 DS

AI SDK 整合到產品

#主題SlugStage大綱
17Vercel AI SDK17-vercel-ai-sdk🌱useChat / useCompletion hook、streamText / generateText、Provider 切換（OpenAI / Anthropic / Google）
18Streaming UI with AI18-streaming-ui-with-ai🌱Server streaming → SSE / Response.body → React Suspense、Smooth text streaming、chat interface 設計
19Tool use / Function calling 前端19-tool-use-frontend🌱LLM 呼叫 function 回來、前端 UI 對應（button / form / confirmation）、Claude / GPT 的 tool use 差異
20AI SDK RSC / Generative UI20-ai-sdk-rsc🌱React Server Components + AI 生成 UI、streamUI function、實戰範例
21前端整合 RAG21-frontend-rag🌱Vector DB（Pinecone / Weaviate）前端呼叫、embedding 策略、RAG UX 設計
22AI Agent 前端架構22-ai-agent-frontend🌱Agent 的 UI：task list、progress、intermediate steps、interruption、approval UI

Prompt Engineering for 前端

#主題SlugStage大綱
23Prompt 結構 for Code 生成23-prompt-for-code🌱Context → Task → Constraints → Format、few-shot 範例、.cursorrules / CLAUDE.md 設計
24Context Management24-context-management🌱什麼時候 clear context、長對話的 context rot、Claude 1M context 的運用
25AI 當 Code Reviewer25-ai-code-review🌱自動化 AI review bot、哪些可以 AI 抓、哪些只有人類能 review
26AI 生成測試案例26-ai-generated-tests🌱哪些測試適合 AI 生、coverage 陷阱、edge case 發掘
27AI 產 JSDoc / README / Changelog27-ai-docs🌱文件自動化的邊界、怎麼跟 code 同步、Conventional Commits → AI 產 changelog

🔧 小實作注意事項

#主題SlugStage大綱
28Cursor 30 天上手路徑28-cursor-30-days🌱Day 1–7 基礎、Day 8–15 Composer、Day 16–30 .cursorrules + agent
29.cursorrules / CLAUDE.md / AGENTS.md 設計29-ai-rules-design🌱跨工具通用的 AI rules 檔、project-specific context、團隊共用規則
30v0.dev + 自家 DS 整合30-v0-with-custom-ds🌱讓 v0 產你家 DS component 而不是 shadcn、system prompt 技巧
31AI Chatbot 前端（Vercel AI SDK）31-ai-chatbot-frontend🌱從 0 做 ChatGPT-like UI、streaming text、message history、markdown render
32Claude Code + 整個 repo 工作流32-claude-code-workflow🌱Terminal agent 怎麼取代 IDE 某些任務、大型重構案例
33打造團隊專屬的 AI Code Review Bot33-ai-review-bot🌱PR hook + AI API + 規則檔、假陽性處理、成本控管

💣 Anti-pattern

#主題SlugStage大綱
34AI 輔助開發 Anti-patterns34-ai-assisted-anti-patterns🌱直接貼 AI 輸出不 review、把 secret / proprietary code 送給 AI、AI hallucination 當真（不存在的 API）、過度依賴 autocomplete 忘了基礎、用 AI 當理解替代（不懂 code 卻 commit）、忽略 AI 給的過時版本資訊

🧰 對應檢查工具

#主題SlugStage大綱
35AI 工具生態35-ai-tooling🌱編輯器：Copilot / Cursor / Claude Code / Cline / Zed / Windsurf；Design：v0 / Lovable / Bolt / Figma Make；SDK：Vercel AI / AI SDK RSC / LangChain.js / Mastra；RAG：LlamaIndex TS

📎 補充

#主題SlugStage大綱
S01AI 產 code 的 License / 版權s01-ai-code-copyright🌱GitHub Copilot 訴訟、AI code 著作權爭議、公司政策建議
S02AI 對前端職涯的影響s02-ai-impact-on-career🌱Junior 被衝擊更多？哪些技能變稀有、哪些變 commodity、跨到 CH18 職涯
S03AI 產 code 的測試策略s03-testing-ai-generated-code🌱AI 產的 code 測試覆蓋要求、哪些 bug 特別常見、review checklist
S04Prompt Injection 在 AI-powered 前端s04-prompt-injection-frontend🌱LLM 回應被用戶輸入劫持、前端 render AI 輸出的安全（跟 CH11 #39 連動）

章節進度統計

  • 知識主題：36 + 4 補充 = 40 項
  • 🌿 growing：0
  • 🌱 seed：40

⚠️ 跟 content/ai/ 系列的分工

  • content/ai/ → AI 通論、Prompt 基礎、AI 生態、AI 使用哲學
  • 本章 CH17 → 專注「前端工程師怎麼用 AI 工具」與「整合 AI 能力到前端產品」

避免內容重複：通用 AI 概念（RAG / Agent / Prompt 基礎）放 content/ai/，本章只講前端特有用法。

跨系列連結

  • → content/ai/ 系列（AI 通論）
  • → frontend/devtools/ CH16（Cursor / Zed / Claude Code 作為編輯器）
  • → frontend/design-system/ CH14（AI 產 DS component 的 Figma 工具整合）
  • → frontend/security/ CH11（Prompt Injection、AI SDK secret 管理）
  • → frontend/application/ CH8 F09（Streaming UI、AI 整合的 API 層）
  • → frontend/career/ CH18（AI 對前端職涯影響）

關係圖譜

反向連結

  • ROADMAP

    B20 · AI 輔助後端開發 + LLM Backend 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染。...