Contact
工程師讀書會① 使用 Claude Code × Figma MCP 進行 Vibe Coding
此篇作者為 GEAR8 JP 的前端工程師石塚竣也。
大家好，我是工程師石塚竣也！
大家平時有在使用 AI 工具嗎？像是 ChatGPT、Gemini、NotebookLM 等，都已經成為日常使用的工具了吧。我自己也在工作流程中導入了程式碼編輯器 Cursor 以及 Claude Code。以前需要耗費大量時間的標記（Markup）與複雜的 JavaScript 實作，自從 2025 年後導入 AI Coding 以來，製作速度獲得了相當大幅度的提升。
相信有切版經驗的人大多都能理解，標記作業在實際執行時，會發現需要耗費相當龐大的工時。不僅要撰寫 Html 與 CSS，還得考量 class 的命名規則、評估 Html 結構的最佳化等……即使是打字速度極快的工程師，也必須配合瀏覽器的運作行為，反覆針對 div 結構與 CSS 架構進行多次細微調整。明明看似單純的作業，卻往往耗費了超出預期的時間。
因此這一次，我們決定嘗試使用 Claude Code 與 Figma MCP，看看是否能讓這個流程變得更加精簡高效！
什麼是 Claude Code + Figma MCP
Claude Code 是由 Anthropic 公司所提供的終端機（Terminal）架構 AI 寫程式的工具。只要透過自然語言下達指令，他就能自動完成程式碼的生成、編輯乃至執行。可以把他理解成專為寫程式設計的 ChatGPT。
Figma MCP 則是讓 Claude Code 與 Figma 互相串接的機制。MCP 是「Model Context Protocol」（模型上下文協定）的縮寫，能讓 AI 直接讀取 Figma 的設計資料。換句話說，只要一邊展示 Figma 的設計畫面，一邊下達「請幫我把這個 Coding 出來」的指令，AI 就會解讀設計並自動生成 Html 與 CSS。
所謂的「Vibe Coding」，是一種不以手動逐行敲打細節程式碼，而是向 AI 傳達意圖與整體感覺（vibe）來讓其生成程式碼的開發風格。Claude Code + Figma MCP 的組合，正是極為適合這種 Vibe Coding 的環境。
※螢幕上隨時都被編輯器＋AI 工具＋設計工具給佔滿了……笑
舉辦工程師讀書會！
我們在 GEAR8 內部企劃了一場運用 Claude Code 與 Figma MCP 的 Vibe Coding 讀書會。形式為透過 Zoom 連線，大家各自在自己的電腦上動手實作的實體操作工作坊。
讀書會流程
- Claude Code 設定，以及 Figma 與 MCP 的連線
- 首先在沒有先備知識的情況下，進行一個區塊的 Vibe Coding
- 針對初次輸出的成果進行回饋討論
- 分享 Vibe Coding 的技巧
- 再次進行 Vibe Coding
- 成果完成度分享與心得總結
我們採取的流程是先讓大家在不設限的狀態下嘗試 Vibe Coding，隨後分享技巧再挑戰一次。目的是為了讓大家親身體會第一次與第二次的精準度會有什麼樣的變化。
提升 Vibe Coding 精準度的 2 個技巧
在多次嘗試 Claude Code 的 Vibe Coding 後，我們發現了能更忠實且精準輸出 Figma 資料的 2 個技巧。
① 整理 Figma Frame 的命名規則
如果 Frame 的命名使用漢字或是命名太過隨意，AI 就無法正確理解設計的架構，導致輸出的精準度降低。雖然命名規則有許多流派，但這次我們配合了 CSS 架構 FLOCSS來重新命名。
變更範例：在其他專案中，我們會像以下這樣重新命名：
- 區塊 1 → p-section01
- 頁首 → l-header
- 藍色按鈕 → c-button–primary
不限於 FLOCSS，只要配合專案所採用的 CSS 架構（如 BEM 等）統一名稱，輸出的程式碼就更容易符合規範。
② 準備 .md 檔案以確保規範標準
在專案的根目錄下建立 .md 檔案（如 README.md 等），並在其中寫入切版規則（Coding Rules），精準度就會大幅提升。
建議寫入的內容：
- 使用的 CSS 架構（FLOCSS、BEM 等）
- 斷點（Breakpoint）的定義（例：手機版 sp 為 767px 以下、電腦版 pc 為 768px 以上）
- 命名規則的規範（駝峰式命名法 CamelCase 或蛇形命名法 SnakeCase）
- 目錄結構
由於 Claude Code 會讀取這份 README.md 檔案作為寫程式時的參考依據，因此即使每次下 Prompt 時沒有重複指示，他也能輸出具有一致性的程式碼。
GEAR8 工程師夥伴們的心得
🐺 資歷 14 年──須藤良太
能縮短耗時費工的部分，把時間投入到動畫效果等其他環節，真的很讓人開心。
🐨 資歷 3 年──小松田健太
因為他能幫忙完成從 0% 到 80% 左右的進度，讓專案製作進展得非常順暢，這點讓人很高興！在進行 Vibe Coding 的過程中還能處理其他事情，能兼顧多工任務，效率非常好！
🐱 資歷 6 個月──藤原ひとみ
本來覺得學習 Vibe Coding 的門檻很高，但大家一起動手做、也能看到其他人生成的結果，藉此掌握了 AI 的特性，覺得非常棒！
🐣 實習生
覺得非常方便的同時，也深深覺得這很考驗個人的理解能力呢～。希望明年能變得駕輕就熟。
詢問了所有參與讀書會人員的心得，不分資歷深淺，多數人都表示「效率提升了」，但同時也有人提出「需要具備能理解 AI 所輸出之程式碼的能力」的觀點。這讓我們再次體會到，在工具便利性與自身學習之間取得平衡是非常重要的。
總結
以上就是使用 Claude Code × Figma MCP 進行 Vibe Coding 的介紹。在我剛加入 GEAR8 時，如果在寫程式遇到瓶頸，只能透過 Google 搜尋查找資料，或是請教前輩；但透過善用 AI，為了一個問題苦惱數小時甚至數天的情況幾乎已經不復存在。
未來我們也會持續吸收 AI 寫程式的各項優點並舉辦內部讀書會，嘗試打造出高效率與高品質的成果！第 2 次讀書會的實況也預計會發表在 Journal 上與大家分享！
