「設計師要不要寫代碼？」這個爭論了十幾年的問題，在瀏覽器引擎成熟、設計工具智能化、前端工程化高度發展的今天，答案早已不是非黑即白。我們採訪了七位國際一線專家，為你呈現多維決策參考。

專家觀點速覽

專家	身份	核心觀點	金句
Paul Lloyd	英國衛報設計師	技術棧週期性更迭（IE→WebKit→多引擎），核心能力是「適應變化」；跟隨內心喜好選擇廣度或深度。	「歷史不會重演，但會驚人地相似。」
Lea Verou	前端工程師/W3C CSS WG 成員	CSS 已進化為獨立強大語言，將出現「CSS 程序員」專項崗位；精通一技勝過泛泛而學。	「我不認為『人必須多元化發展否則就會沒落』。」
Nicolas Gallagher	Twitter 前端工程師	大型 Web UI 系統維護極其艱難，HTML/CSS 專家稀缺；未來 Web Components + 設計工具將自動生成代碼。	「期待戲劇性的一幕在 HTML/CSS 專家身上發生。」
Rachel Nabors	交互設計師/Tin Magpie 創始人	交互開發需扎實 HTML/CSS 技能；Web Animations API、Houdini 等新標準仍在演進，解決深層問題需前端硬功夫。	「如果涉及交互，我們的工作才剛剛開始。」
Ben Callahan	Sparkbox 董事長	預處理器/工具鏈強大但會讓人喪失手寫 CSS 能力；必須保持「我能行」的工程自信。	「我們的工作需要我們說『我能行』。」
Andrew Clarke	Unfinished Business 設計師/作者	語義化 HTML + 高效 CSS 是必備技能；挑戰已從瀏覽器兼容轉向多尺寸屏幕一致性。	「知道怎麼寫有意義的 HTML 和高效的 CSS 將會是一項必須的技能。」
Paul Annett	Twitter 高級設計師	基礎 HTML/CSS 是入場券，不懂很難拿到機會；管理崗也需保持代碼敏感度以溝通工程師。	「每天了解一下代碼是怎麼工作的也是非常有用的。」

決策矩陣：你該學到什麼程度？

職業階段/定位	HTML/CSS 掌握層級	學習重點	不必深究
求職/初級設計師	入門級：能還原靜態視覺稿	語義化標籤、盒模型、Flex/Grid 佈局、響應式斷點、基本動畫	複雜 JS 框架、構建工具配置、瀏覽器渲染原理
中級/資深視覺設計師	協作級：能輸出工程師可直接用的標註/組件	設計系統 Token 輸出、組件狀態標註、無障礙標記、Figma DevMode 深度使用	獨立構建完整頁面、處理瀏覽器怪癖
交互/動效設計師	實作級：能用代碼驗證交互方案	CSS Animation/Transition、Web Animations API、Scroll-driven Animation、Houdini Paint/Layout API	後端邏輯、資料庫、部署運維
全棧/獨立產品設計師	工程級：能獨立交付 MVP	React/Vue/Svelte + TypeScript + Tailwind/CSS-in-JS + CI/CD + 數據庫基礎	大規模架構設計、DevOps 深度優化
設計管理/總監	溝通級：能看懂 PR、評估技術債、制定技術規範	代碼審閱關鍵點、構建流程、性能指標、無障礙合規、設計工程協作流程	日常寫業務代碼

四大誤區澄清

1. 「學會代碼就能設計出更好的介面」 → 錯。代碼是實現手段，設計決策源於用戶洞察、視覺原理、交互邏輯，而非語法熟練度。
2. 「不寫代碼就會被淘汰」 → 錯。頂級視覺/品牌/插畫設計師從不寫代碼，但其不可替代性極強。
3. 「Figma/Webflow 等工具已取代手寫代碼」 → 部分正確。工具解決 80% 標準化還原，但 20% 邊界創新（極致動效/實驗性交互/性能極限）仍需手寫代碼探索。
4. 「CSS 很簡單，隨時能學會」 → 危險。CSS 看似簡單，實則包含佈局算法、渲染管線、規格演進等深層知識體系，精通需長期沉澱。

行動建議

1. 先問「為什麼」：是為了協作順暢？驗證交互？獨立交付？還是單純焦慮？目的決定深度。
2. 最小可行性學習：用 2 週完成《MDN HTML/CSS 基礎教程》+ 1 個響應式頁面實戰，再評估是否繼續。
3. 建立「設計工程化」思維：哪怕不寫代碼，也要輸出結構化設計文檔（Token/組件/狀態/響應式規則），這才是設計師給工程師的最高禮物。
4. 保持好奇心：關注 CSS 新特性、設計工具新功能、前端工程新趨勢，哪怕不親自寫，也能在溝通中掌握主動權。

正如 Zeldman 所言：「最好的建議就是跟隨你喜歡的方式。」 沒有標準答案，只有適合當下的你的答案。