# 讓 AI 寫前端，我們來寫未來 - Kuro Hsu

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/n74UdW4YhQhcnKsCzQfTZ7

> 開始做筆記

投影片: https://kuro-jsdc-2025.vercel.app/

## AI 輔助開發的真實數據

開發者使用 AI
1) 超過6成的開發者使用AI
2) PR的時間減少超過七成
3) 更快的迭代速度

`關鍵不在於框架，而是如何跟 AI 協作`

## 來說個故事

客戶：我們來做個電商網頁

-> vibe 三分鐘出一些圖片跟程式碼
-> 但好像不是想要的程式碼
-> 所以...?

## 階段一：需求分析

- Vibe coding 的真相：你有沒有能力理解 ai 寫的 code
- 電商網站的現實需求
- ai 很快可以做到的：畫面上的一些元件和功能
- 不會想到的：一些業務邏輯或 fallback 、 SSR 、分頁、格式化

AI只處裡 happy path 真實世界的egde cases 他不會幫你 你得自己想清楚

### 解法一 ：interface first( Typescript )

1) 先定義資料結構，再讓AI生成程式碼
2) vue的 prop 跟 events 也是介面，要先定義好接口在讓AI生成

### 解法二： Prompt 工程

❎ 給我一個商品列表
✅ 說清楚要什麼內容

#### 痛點 vs. 解法

沒有設計缺貨狀態 -> 幫我設計缺貨狀態之類的

需求不明確 AI只會給你驚喜 or 驚嚇
AI負責產出 人負責 edge case

#### AI 可以快速用設計稿切版嗎？

傳統：看設計稿 ➡️ 切版 ➡️ RWD ➡️預處理器
AI：
❎ 擷圖給AI ➡️ AI生成初版➡️樣式微(?)調，`微調`就是重點
✅ 截圖＋規格

#### vibe coding 的視覺債

> Design Tokens = 視覺的 interface

先定義好 AI才有跡可尋

* Tailwind config 作為約束
1) 與其事後審查顏色是否正確，不如一開始就設定對的顏色
2) 限制 Tailwind 的調色盤

#### 無障礙：AI 看不到的盲點

AI: 根據規範產出程式碼
人：制定 Design Tokens 與 A11y表準

### Vue 的 AI 幻覺

- .value 遺漏

- 過時的知識
-

#### 常見的問題

1) 邏輯樣式塞在一起
2) 無法單獨測試特定功能
3) 遇到問題避開問題直接生成新的程式碼

## 問題拆小：元件化

1) 比起一次生成整個畫面，最好把元件切小 逐個擊破
2) 拆分成 composable
3) vue的sfc 架構 更適合AI閱讀程式碼

不要問完才嘗試修補，要就一開始給規定好的 prompt

prompt engineering 已死，
context engineering當道！

> ai 的智商取決於模型，準確度取決於 context

## context engineering 框架

階段一：需求分析
階段二：視覺切版
階段三：元件實作
階段四；前後端串接

## 新專案：從零開始定義規則

事前定義好專案規範：
1) 技術棧版本
2) 程式碼風格
3) 檔案命名規範
4) 禁止事項(must never)

## 舊專案：讓 AI 理解你的脈絡

## 用 AI 幫你寫規則

讓他理解專案程式碼，寫成規則檔，後續就按照這個規則檔生成

同時把 eslint config 跟 tsconfig 丟給AI，讓AI遵循

AI 規則檔案各家路徑跟檔名不一樣

## 同專案、多工具開發

如果習慣用 Claude Code ，建議以 CLAUDE.md 為主檔，其他工具的設定從主檔同步
不然各家設定可能會打架

*** 筆者補充1：`github-copilot` 現在也吃 `AGENTS.md`
*** 筆者補充2：`cursor`、`codex` 也吃 `AGENTS.md`

### 跨專案規則維護策略

何時更新規則？

- 技術棧升級
- AI 重複犯錯
- ?
- ?

### 規則撰寫的藝術

### 跨專案同步規則的實作

每個專案都有差不多的規則，要如何去管理？
小團隊：symlink
中大型團隊：githubmodule

## 階段四：前後端串接

### OpenAPI 驅動的 API 層

有了 openAPI 規格，AI生成的API client 會更準確一致

讓後端去做 recheck

### MCP：為 AI 提供即時資訊

讓 AI 突破模型訓練的框架，像是幫 AI 加上外掛！
* 給 AI 權限去讀 file
* 查看最新的文件回答

#### 還沒有 MCP？先從這裡開始

先用檔案提供 Context ，之後再導入 MCP

#### AI 不懂的：錯誤處理

講者補充：現在的AI比較少遇到這個問題

#### AI 不懂的：競態條件

race c 是 AI 比較能理解的

### AI 寫的程式碼誰來測

以前藉口沒時間寫測試
現在產生很快，但一定要審查測試邏輯
可能只有 Happy path
沒有測試錯誤情境

## TDD 的復興

1) 🧑: 定義 interface
2) 🖥️: 生成測試
3) 🧑: 審核補充情境
4) 🖥️: 生成實作
5) 🧑: 最後把關

TDD 變成保護我們的工具
生成的 code 會有一定的品質

測試先行＋

## Agentic Workflow

讓 AI 自己修 bug

## 延伸：PR Review by AI

給明確的審查角度，才能給有價值的回饋

## 為 AI 提供足夠的上下文

## 不是能跑就好
AI ：快速完成任務
人類：把關品質

前端不死，真正結束的是舊的開發模式
AI 讓我們走得更快，但方向由我們決定

# VUECONF 2026 coming soon

> emoji
> 🧑🏻‍💻
> 🖥️
> ➡️
> ❎
> ✅

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}