快速摘要
AI 最擅長的前端任務：元件樣板生成、CSS 撰寫、TypeScript 型別定義。最不擅長的：複雜狀態管理、效能優化、無障礙設計。這篇分享實際工作流程。
AI 最擅長的前端任務
| 任務 | AI 效果 | 說明 |
|---|---|---|
| 元件樣板 | 優秀 | React/Vue 元件的基本結構、props 定義 |
| CSS/Tailwind | 良好 | 排版和樣式，Tailwind 特別好 |
| TypeScript 型別 | 優秀 | 根據資料結構自動生成型別定義 |
| 表單驗證 | 良好 | 基本驗證邏輯和錯誤訊息 |
| API 呼叫 | 良好 | fetch/axios 呼叫和錯誤處理 |
| 複雜狀態管理 | 普通 | 簡單的 useState 沒問題，Redux/Zustand 複雜邏輯需要指導 |
| 效能優化 | 普通 | 基本的 memo/useMemo，但深度優化需要人工 |
| 無障礙 | 差 | 經常忘記 aria 屬性和鍵盤導航 |
實測工作流
- 元件設計：先用 v0 或 Claude 生成 UI 原型
- 整合到專案：用 Cursor 在專案中建立元件，指定使用現有的設計系統
- 邏輯開發：用 Cursor 的 Composer 功能同時修改多個檔案
- 測試：讓 AI 生成 React Testing Library 測試骨架，人工補充邊界條件
- 審查：特別檢查 XSS 風險（dangerouslySetInnerHTML）和無障礙性
常見陷阱
- XSS 風險：AI 很喜歡用 dangerouslySetInnerHTML，這是 XSS 的主要來源
- 效能問題：不必要的 re-render、沒有用 memo 包裹的子元件
- 狀態管理混亂：AI 傾向把所有狀態放在最上層元件，造成 prop drilling
- 缺少 error boundary：AI 經常忘記加 Error Boundary
前端安全注意事項
- 不要在前端程式碼中存放 API Key
- 所有使用者輸入顯示前都要做 HTML escape
- 避免使用 eval() 和 innerHTML
- 設定 CSP（Content Security Policy）
- 檢查所有第三方套件的安全性（npm audit）
常見問題
用 AI 做前端需要學框架嗎？
需要基本概念。AI 可以幫你寫程式碼，但你需要理解元件、props、state 等概念才能有效地給指令和審查結果。
AI 生成的 CSS 品質如何？
Tailwind CSS 品質很好（因為訓練資料多）。原生 CSS 品質參差不齊，間距和顏色常需要手動調整。
v0、Bolt 這類工具和 Cursor 有什麼不同？
v0/Bolt 適合從零生成 UI 元件和頁面。Cursor 適合在現有專案中開發。建議用 v0 做原型，再用 Cursor 整合到專案中。