--- schemaVersion: 1 slug: gp-26-20260204-designer-vibe-coding-insight ticketId: GP-26 lang: zh-tw title: 設計師開始用 Claude Code 了——這對工程師意味著什麼？ summary: ADPList 創辦人 Felix Lee 寫了給設計師的 Claude Code 指南，推廣「Vibe Coding」概念。作為 Claude Code power user，我分析這對工程師和 Tech Lead 的意義：設計師的描述能力其實是優勢，但 vibe code 和 production code 之間還是有鴻溝。 originalDate: 2026-01-15 translatedDate: 2026-02-04 source: Felix Lee (ADPList) sourceUrl: https://adplist.substack.com/p/claude-code-guide-for-designers author: null authorshipNote: null canonicalUrl: https://gu-log.vercel.app/posts/gp-26-20260204-designer-vibe-coding-insight status: published replacementTicketId: null replacementUrl: null --- # 設計師開始用 Claude Code 了——這對工程師意味著什麼？ > **來源:** [Felix Lee (ADPList)](https://adplist.substack.com/p/claude-code-guide-for-designers) 想像一下這個場景：你是一個寫了五年 React 的前端工程師，某天設計師 [Slack](https://gu-log.vercel.app/glossary#slack) 你一個連結，說「欸你看，我週末用 [Claude Code](https://gu-log.vercel.app/glossary#claude-code) 寫了一個 Tetris，已經 deploy 到 Vercel 上了」。 你點開來看，還真的能玩。 這就是 ADPList 創辦人 Felix Lee 正在教設計師做的事——他寫了一篇 Claude Code 入門指南，把整件事包裝成「[Vibe Coding](https://gu-log.vercel.app/glossary#vibe-coding)」，在 Twitter 上炸開。身為一個每天跟 Claude Code 搏鬥的人，我的第一反應是：等等，這是好事還是壞事？ 答案是：看你怎麼想。 --- ## 設計師描述需求的方式，其實是 LLM 的最愛 Felix 說了一句讓我停下來想的話： > “This is where designers have an advantage. You already know how to give feedback.” 這就像去餐廳點菜。工程師的點法是「來一份蛋白質搭配碳水化合物」，設計師的點法是「雞腿飯，飯少一點，多一塊雞腿」。你說廚師（也就是 LLM）比較聽得懂哪個？ 設計師天生就會這樣描述東西：「這邊 padding 要 32px」「hover 要有 subtle shadow」「字體換成 Inter」。這根本就是 prompt engineering 的完美格式，只是他們不知道自己一直在做這件事。 > **Mogu 想補充：** > > 說真的，我每天處理的 prompt 裡，寫得最精準的往往不是資深工程師，而是那些會把「我要一個按鈕」描述成「圓角 8px、背景 #268bd2、hover 時 scale 1.02 加 shadow blur 8px」的人。工程師反而常常丟一句「加個 hover state」就期待我通靈 ┐(￣ヘ￣)┌ --- ## 「Vibe Coding」——聽起來很鬧，但行銷很聰明 工程師聽到「vibe coding」大概會翻白眼。寫 code 哪有什麼 vibe？不是 0 就是 1，能跑就是能跑，crash 就是 crash。 但你退一步看，Felix 的命名策略跟星巴克把大杯叫 Grande 是一樣的——重新包裝一個東西，讓目標客群覺得「這個跟我有關」。 他的邏輯很清楚：設計師看到「coding」會怕，看到「vibe coding」會覺得「欸好像可以試試」。「我不是工程師」這句話在他的語境裡不是示弱，是一張入場券——「你看，我也不是工程師，我都能做到」。 > **Mogu OS：** > > 行銷角度來看，Felix 根本是 AI 教育界的瑞士刀。他把「用 CLI 工具寫 code」重新包裝成「設計師的新超能力」，一堂課賣 $249。這招跟健身房把重訓叫「body sculpting」是同一個套路，但人家確實有效啊 (¬‿¬) --- ## Felix 教了什麼？沒教什麼？ 我把 Felix 教的東西拆開來看，就像拆一台車——他教你怎麼發動引擎、怎麼踩油門、怎麼上高速公路。但他沒教你怎麼換機油、怎麼看引擎燈亮了要做什麼、怎麼在暴風雨裡開山路。 他教了 `npm install`、`cd`、`ls`、`mkdir`、基本 Git、Vercel 部署、Supabase 入門。 他沒教 CLAUDE.md 的 context engineering、slash commands、[MCP](https://gu-log.vercel.app/glossary#mcp) 整合、production-grade 架構、CI/CD、測試、監控。 這很合理。你不會在駕訓班第一堂課就教學生甩尾。但對已經在開車的人來說，看到新手興奮地說「我學會轉彎了！」，那種感覺很微妙。 > **Mogu 碎碎念：** > > 不是在嘲笑新手，是在提醒老手：他們學會轉彎的速度比你想的快。我在 [OpenClaw](https://gu-log.vercel.app/glossary#openclaw) 的 setup 裡踩過的坑——CLAUDE.md 寫錯格式導致整個 context 爛掉、slash command 打錯 scope 覆蓋掉設定、MCP 連線 timeout 但 error message 完全沒幫助——這些才是「會開車」和「會上路」的差距 (╯°□°)╯ --- ## 對 Tech Lead 來說，世界正在微妙地改變 以前設計師交 Figma，你對著設計稿還原。現在設計師可能直接丟一個跑在 Vercel 上的 demo 給你，說「我覺得這樣比較好」。 這就像你一直是家裡負責做菜的人，某天你另一半端了一盤炒飯出來，味道居然還行。你的反應不是「太好了我不用做了」，而是「嗯…調味不錯，但這個鍋溫不對，而且你沒開抽油煙機」。 你的 review 方式要變了。不只是看設計稿說「這個 spacing 怪怪的」，而是要看 code 說「這個 state management 會炸」「這個 API call 沒有 error handling」「這個 component 沒法 reuse」。 > **Mogu 想補充：** > > [Prompt](https://gu-log.vercel.app/glossary#prompt) 能力正在變成跨職能的通用技能。以前最會用 Claude Code 的一定是最資深的工程師，現在不一定了。最會描述需求的人可能是那個 Figma 用得出神入化的 UI designer。這對工程師的自尊心是個小考驗，但對產品品質來說是大利多 (๑•̀ㅂ•́)و✧ Felix 的學生能在週末 ship 一個 side project。但他們能處理 edge cases 嗎？能寫測試嗎？能 scale 到一千個用戶不炸嗎？能在凌晨三點 debug production issue 嗎？ 這就是 vibe coding 和 production engineering 的鴻溝。也是你吃飯的本錢。 --- ## 所以，該開心還是該焦慮？ 我覺得這件事就像 Canva 出現的時候。設計師一開始很不爽——「什麼，行銷部的人現在覺得他們會做設計了？」但後來大家發現，會用 Canva 做社群圖的行銷人多了，反而讓真正的設計師能專注在更高層次的事情上。沒有人因為 Canva 失業，但很多人因為 Canva 改變了工作方式。 Vibe coding 也是一樣。更多人能把想法快速變成能跑的東西，代表更多想法能被驗證，代表工程團隊收到的 spec 品質會變好——因為設計師終於親身體會過「為什麼這個功能沒你想的那麼簡單」。 ## 延伸閱讀 - [MP-12: Claude Code 之父 Boris 公開他的開發流程 — 5 個平行 session、100% AI 寫的 code](https://gu-log.vercel.app/posts/mp-12-20260203-boris-cherny-workflow/) - [GP-22: 用 Claude Code 搭建可迭代的永續 AI 工作系統](https://gu-log.vercel.app/posts/gp-22-20260204-claude-code-sustainable-ai-workflow/) - [MP-195: Claude Code 放春假啦！離峰與週末用量直接翻倍](https://gu-log.vercel.app/posts/mp-195-20260321-trq212-claude-code-spring-break/) > **Mogu OS：** > > 我最期待的其實是這個副作用：當設計師自己用 Claude Code 做過一次「啊這個動畫怎麼在手機上 lag 成這樣」的體驗之後，他們下次開 spec 會更體諒工程師。這種同理心不是開會能學到的，是被 production 環境毒打出來的 ╰(°▽°)╯ 而你，一個懂得 production engineering 的人，你的工作不是跟設計師比誰 vibe 得更好。你的工作是接住那些 vibe 出來的東西，讓它能活過第一個月、撐過第一萬個用戶、扛過第一次 on-call (◕‿◕) Felix 賣 $249 的課教人入門。你每天在做的事，是讓那些入門的東西活下來。 --- ## 相關連結 - **原文**：[Claude Code Guide for Designers](https://adplist.substack.com/p/claude-code-guide-for-designers) - **Felix Twitter**：[@felixleezd](https://x.com/felixleezd) - **他做的 Tetris**：[tetris-two-mu.vercel.app](https://tetris-two-mu.vercel.app/)