設計師學前端從哪開始？2026接案協作轉職技能路線與作品集準備

設計師學前端，應該先釐清哪一種目標？

設計師學前端，第一步不是急著買課或追 React，而是先決定自己要接案、協作，還是轉職。只想把設計稿做成可上線網頁，HTML、CSS、RWD 會比框架更重要。

我在看台灣設計師的學習路線時，最常看到的問題不是不努力，而是目標混在一起。接案型設計師去讀完整工程師路線，很容易卡在 JavaScript；協作型 UI 設計師只看影片不寫切版，又很難真正理解工程限制。

學習目標	你需要先補的能力	先不用急著學	成果判斷
接案	HTML 結構、CSS 切版、RWD、表單與基本互動	完整 React 專案、後端、資料庫	能交付一頁式 Landing Page 或中小企業形象頁
工程協作	語意結構、元件狀態、斷點規劃、設計系統命名	深度演算法、雲端維運	設計稿更容易被前端工程師實作
轉職前端	HTML CSS、JavaScript、Git、部署、框架基礎與作品集	一開始就追太多工具	有 Demo、GitHub、技術說明與面試可講的專案

只想接案：學到可交付 Landing Page

如果你是平面、品牌、社群或電商視覺設計師，最務實的起點是把單頁設計稿切成可瀏覽、可在手機閱讀、按鈕狀態完整的網頁。這條路不要求你立刻成為前端工程師，但要求你知道版面為什麼跑掉、字級為什麼在手機太大、表單欄位為什麼不能只看起來漂亮。

想和工程師協作：學到看懂限制與標註

如果你已經會 Figma、Wireframe、Design System，學前端的價值在於降低溝通成本。懂 CSS 的設計師會知道元件狀態要補 hover、focus、disabled，也會在設計稿中留下合理的間距規則與 RWD 行為，而不是只交一張桌機畫面。

想轉職：學到 JavaScript、Git、部署與作品集

如果你的目標是從設計轉前端工程師，HTML 和 CSS 只是起點。你需要補 JavaScript、GitHub、基本部署、API 串接，以及至少幾個能說明思考過程的作品。轉職路線可以保留設計優勢，但不能只靠美感過面試。

前端設計師、UI/UX 設計師、前端工程師差在哪？

UI/UX 設計師主要負責需求、流程與介面設計；前端設計師通常介於設計與切版之間；前端工程師則負責互動邏輯、資料串接、效能與工程維護。

台灣職場的職稱不一定標準，104 職缺上也常把網頁設計師、UI 設計師、前端設計師混用。中小企業更常出現一人多工：同一個人要做 Banner、Figma、WordPress、Landing Page，甚至處理一點 GA 或表單串接。職稱可以參考，但不要只用職稱決定學習深度。

角色	主要工作	前端深度	作品集重點
UI/UX 設計師	使用者流程、Wireframe、介面、原型、設計系統	看懂 HTML/CSS 限制與元件狀態	流程思考、元件規格、設計決策
前端設計師	網頁視覺、切版、RWD、基礎互動	能獨立完成靜態頁面與簡單互動	RWD Demo、切版品質、元件一致性
前端工程師	JavaScript 邏輯、框架、API 串接、狀態管理、效能	需要工程化與維護能力	GitHub、部署、專案架構、問題解法

我的判斷是，設計師不用急著把自己貼上工程師標籤。先把自己的工作半徑講清楚，學習才會準。能把設計稿做成穩定網頁的人，在接案與公司內部都比只會輸出漂亮畫面的人更有彈性。

設計師學前端，應該先學 HTML 的哪些部分？

設計師學 HTML，應該先掌握語意標籤、頁面結構、圖片、連結、表單與可維護的區塊層級。HTML 是設計稿轉成網頁的骨架，會影響 SEO、無障礙與工程協作。

語意標籤比 div 更重要

初學者很容易用一堆 div 把畫面包起來，但真正好的切版會先想內容結構。header、nav、main、section、article、footer、h1 到 h3、button、a、form 這些標籤，能讓瀏覽器、搜尋引擎與工程師都更容易理解頁面。

常見需求	建議 HTML	設計師要注意
主選單	nav 搭配 a	不要把可點擊文字只畫成視覺元素
主要內容區	main、section	區塊層級要對應設計稿結構
按鈕	button 或 a	操作與連結用途要分清楚
表單	form、label、input、textarea	欄位名稱、錯誤狀態、送出狀態都要設計

設計稿切版時常用的 HTML 結構

多數 Landing Page 會由導覽列、Hero、特色區、內容區、案例或評價、表單、頁尾組成。設計師練習時，不要只練單一元件，要練整個頁面的資訊順序。這會讓你更快理解為什麼 Figma 裡看起來合理的間距，到了瀏覽器會受到內容長度與螢幕寬度影響。

初學者最容易忽略的結構問題

常見問題包含標題層級亂跳、圖片沒有替代文字、按鈕其實是連結卻用錯標籤、表單沒有 label、整頁只有 div。這些問題短期看起來不影響畫面，但會影響可讀性、維護與 SEO。設計師如果能先把 HTML 結構打好，後面的 CSS 會少很多補洞。

CSS 要先學哪些？不要一開始就卡在框架

設計師學 CSS，應該先學 Box Model、排版、字體、間距、Flexbox、Grid、狀態與 RWD。框架可以晚一點碰，因為你要先知道瀏覽器原生排版規則。

Box Model 是設計師最容易理解也最容易踩雷的地方

Box Model 對設計師很直覺，因為它對應寬度、高度、內距、邊框與外距。但踩雷也常從這裡開始，例如卡片寬度加上 padding 後超出容器、外距互相影響、手機版按鈕高度不一致。建議一開始就學 box-sizing、padding、margin、border 與 display 的關係。

Flexbox 處理元件排列

Flexbox 適合處理導覽列、按鈕群、卡片內部、icon 加文字、左右排列與垂直置中。設計師常需要做元件層級的排列，Flexbox 是最快看到成果的 CSS 技能。可搭配站內 CSS Flexbox 延伸練習。

Grid 處理整體版面

CSS Grid 適合處理整頁欄位、卡片列表、作品牆、桌機多欄轉手機單欄。設計師如果只會 Flexbox，常會用很多巢狀結構硬排版；學 Grid 後，會更理解版面系統與 RWD 的關係。可搭配 CSS Grid 把整體版面補起來。

狀態、hover、focus 與元件一致性

介面不是靜態圖片。按鈕要有 hover、focus、disabled，表單要有錯誤與成功狀態，卡片可能有互動狀態。設計師學 CSS 時，應該把狀態當成元件規格的一部分，這會直接改善設計系統與工程交付品質。

學習順序	技能	練習方式
第一階段	選擇器、字體、顏色、Box Model	重做一張名片型個人頁
第二階段	Flexbox、按鈕、導覽列、卡片	切一組可重用元件
第三階段	Grid、版面欄位、RWD	切完整 Landing Page
第四階段	狀態、動畫基礎、設計系統	整理成元件規格

RWD 響應式網頁設計：設計師最該補的實作能力

RWD 是設計師學前端最有回報的能力，因為它直接連接桌機設計稿、手機瀏覽體驗與實際交付。你要學會斷點、流動寬度、圖片縮放與手機優先思考。

很多設計稿只畫桌機與手機兩張，工程師卻要處理中間所有寬度。這就是懂前端的設計師會拉開差距的地方：你知道哪些區塊該換行、哪些內容該縮短、哪些按鈕不能只靠固定寬度。

RWD 檢查項目	設計稿要交代	前端實作要注意
斷點	手機、平板、桌機的版面變化	不要只用單一固定寬度
容器	最大寬度與左右留白	使用 max-width 與相對單位
圖片	裁切位置與比例	避免圖片壓扁或主體被裁掉
文字	手機字級、行高、段落長度	避免桌機字級直接套到手機
互動元件	觸控範圍與排列	按鈕不能太小或太密

我的建議是，每個作品至少檢查 360px、768px、1024px 與一般桌機寬度。這些不是硬性標準，而是能涵蓋多數常見瀏覽情境的練習範圍。

設計師學切版，不只是把畫面排出來

好的切版不只看起來像設計稿，還要結構清楚、命名穩定、元件可重用，並讓後續串接內容更容易。這是設計師與工程師協作時最有價值的地方。

如果一個頁面只能在固定文字長度下正常，換成真實客戶文案就破版，那它還不是可交付的切版。台灣接案常遇到客戶臨時改標題、增加段落、替換圖片，結構品質會決定你是快速調整，還是每次都重修版面。

• 區塊命名要能看出用途，例如 hero、feature、pricing、contact。
• 元件命名要可重複使用，例如 card、btn、form-field、section-title。
• HTML 層級要反映內容，而不是只反映視覺位置。
• CSS 不要為每個畫面都寫一次，應該整理共同規則。
• 預留真實內容長短變化，尤其是標題、卡片、按鈕與表單錯誤訊息。

這也是為什麼設計系統值得提早理解。你不一定要做大型 Design System，但要知道元件、狀態、間距規則與命名會影響後續維護。可延伸閱讀 Design System 與 CTA Button Design。

2026 年還需要學 jQuery、Bootstrap 或 Sass 嗎？

2026 年設計師學前端，不建議把 jQuery 當主線；Bootstrap 可認識但不必先依賴；Sass 可在 CSS 基礎穩定後學。Tailwind、Vue、React 則要看你的目標。

工具	2026 年定位	設計師該怎麼學
jQuery	舊專案維護仍可能遇到	知道它的存在即可，不當入門主線
Bootstrap	快速做後台或制式版面仍有用途	先學原生 CSS，再理解框架規則
Sass	整理變數與巢狀規則有幫助	CSS 基礎穩後再補
Tailwind	常見於現代前端與快速開發	適合懂 CSS 後用來提高速度
Vue 或 React	前端工程師與互動產品常見技能	轉職路線再深入，接案切版不必第一天學

工具選擇最怕跟流行跑。設計師先把 HTML CSS 與 RWD 練到能交付，再看要不要用 Tailwind 加速、用 Vue 或 React 做互動專案。框架會變，但排版邏輯、結構判斷與除錯能力比較耐用。

自學、線上課、職訓班、Bootcamp 怎麼選？

自學適合紀律強、預算有限的人；線上課適合需要結構化教材的人；職訓班與 Bootcamp 適合轉職目標明確、需要同儕與就業輔導的人。

台灣設計師常問該不該報職訓班。我的看法是，如果你只是想接案切版，先用線上課或自學做出兩個作品更划算；如果你要轉職前端，職訓班或 Bootcamp 的價值在於固定節奏、專案壓力、履歷修改與面試準備。

學習模式	適合對象	優點	風險
自學	已有設計基礎、能安排時間的人	成本低、彈性高	容易跳題、缺少回饋
線上課	需要教材順序與範例的人	可重看、入門友善	看完影片不等於會做
職訓班	希望較完整轉職訓練的人	節奏固定、同儕壓力、可能有就業資源	品質差異大，仍要靠作品證明能力
Bootcamp	能承受密集學習與專案壓力的人	專案密度高、接近轉職節奏	時間與費用壓力較高

1 個月、3 個月、6 個月學習路線範例

1 個月可以做出靜態個人頁，3 個月可以完成 RWD Landing Page，6 個月才比較適合挑戰轉職型作品集。時間長短取決於每週練習時數與回饋品質。

時間	學習重點	作品成果	適合目標
第 1 個月	HTML、CSS、Box Model、Flexbox、基礎 RWD	個人介紹頁、簡單元件庫	建立切版手感
第 2 到 3 個月	Grid、完整頁面、表單、部署、GitHub 基礎	RWD Landing Page、Figma 切版作品	接案與協作
第 4 到 6 個月	JavaScript、API、Vue 或 React 基礎、專案整理	互動作品、API 小專案、作品集網站	轉職前端

不要把 6 個月理解成保證轉職。它比較像最低可執行週期：你需要足夠時間犯錯、重構、部署、寫技術說明，並把設計師原本的視覺能力轉成工程可讀的作品。

設計師轉前端作品集要放什麼？

設計師轉前端作品集至少要放 3 件作品，而且不能只有截圖。每件作品最好包含 Demo、GitHub、設計稿、RWD 說明與技術決策。

至少 3 件，不要只有截圖

純截圖只能證明你會排畫面，不能證明你會做網頁。轉職或接案作品應該讓人能打開 Demo、縮放視窗、點擊按鈕、看表單狀態。對面試官或客戶來說，能操作的作品比漂亮封面更有說服力。

每件作品要附 Demo、GitHub、設計稿與技術說明

Demo 展示結果，GitHub 展示程式碼，設計稿展示你的設計來源，技術說明展示你的判斷。即使程式碼還不完美，只要你能說清楚斷點怎麼設、元件怎麼拆、哪些地方重構過，就比只丟一個作品連結更可靠。

面試官會看什麼

面試官通常會看作品是否真的能跑、手機版是否破版、程式碼是否有基本結構、命名是否混亂、是否使用 Git、是否能說明自己解過哪些問題。設計師的優勢是美感與使用者視角，但前端職缺仍會檢查基本工程能力。

作品類型	應展示能力	建議內容
RWD 企業官網	版面、結構、RWD	首頁、服務頁、聯絡表單、頁尾
Figma 切版	設計到程式的轉換	原設計稿、切版 Demo、差異說明
互動 Landing Page	按鈕狀態、表單、簡單 JavaScript	表單驗證、互動區塊、部署連結
API 小專案	資料處理與前端邏輯	列表、搜尋、篩選、載入狀態

AI 時代，設計師還需要自己學前端嗎？

有 ChatGPT、Copilot 和 Figma-to-code，設計師仍然需要懂 HTML、CSS 與 RWD。AI 可以加速產出，但你要能判斷程式碼是否合理、能不能維護、為什麼會破版。

我會把 AI 當成練習助教，而不是替代基礎。你可以請 AI 解釋 CSS、協助除錯、產生初版結構，但最後仍要自己檢查語意標籤、RWD 行為、命名與互動狀態。看不懂產出的程式碼，就無法對交付品質負責。

使用 AI 的情境	可以做	不能省略
學 HTML/CSS	請 AI 解釋語法與錯誤	自己手寫並在瀏覽器檢查
切版	請 AI 產生初版區塊	自己調整 RWD 與結構
除錯	貼錯誤訊息與相關程式碼詢問	理解原因後再修改
作品集	協助整理技術說明	保留真實決策與解題過程

常見卡關與避坑：為什麼你看完影片還是不會做？

看完影片仍不會做，通常是因為只跟打、沒有重做、沒有部署、沒有處理真實內容。前端能力要靠反覆做出可運作頁面，而不是累積觀看時數。

卡關狀況	常見原因	對策
影片看得懂，自己寫不出來	只跟著打，沒有關掉教材重做	同一個版面隔天從空白檔重切一次
CSS 越寫越亂	缺少命名規則與元件拆分	先整理按鈕、卡片、表單等共同樣式
手機版一直破	使用固定寬度與桌機思維	從手機寬度開始檢查，再往桌機擴展
怕 JavaScript	一開始就碰太大的框架或專案	先做選單開合、表單驗證、篩選列表
作品無法被檢查	沒有部署，只有本機檔案	學會 GitHub Pages、Netlify 或類似部署方式

設計師最容易低估部署。只要作品不能被打開，就很難被評估。把作品放上線，會逼你面對路徑、圖片、RWD、表單與真實瀏覽器問題，這些才是接案與求職會遇到的狀況。

常見問題

設計師學前端最常見的疑問，通常集中在學習時間、工具取捨、是否需要 JavaScript、作品集規格與 AI 是否能替代基礎。

設計師學前端要多久才會有成果？

如果每週穩定練習，1 個月通常可以做出簡單個人頁或靜態區塊；3 個月比較有機會完成 RWD Landing Page；6 個月才比較接近轉職型作品集。成果不只看時間，也看你有沒有從空白檔重做、部署上線、修過手機版破版問題。

UI/UX 設計師一定要會寫 HTML 和 CSS 嗎？

不一定要寫到工程師等級，但建議至少懂 HTML 結構、CSS 排版、RWD 與元件狀態。這些能力能讓設計稿更可實作，也能減少和前端工程師來回修改的成本。

平面設計師要先學 UI/UX 還是先學前端？

如果目標是接網頁案，可以先同步補 UI 基本觀念與 HTML CSS。若目標是產品設計職，UI/UX 流程、使用者需求與原型會更優先。平面設計師的視覺能力有優勢，但網頁需要補資訊架構、互動狀態與 RWD。

不會數學可以學前端嗎？

可以。設計師入門 HTML、CSS、RWD 不需要高深數學。前期比較需要的是邏輯拆解、耐心除錯、理解版面規則與願意查文件。若之後走工程師路線，再逐步補 JavaScript 邏輯與基礎資料處理即可。

只想接案需要學 JavaScript 嗎？

只做靜態頁與基本形象網站時，JavaScript 不一定要很深，但建議學會選單開合、表單驗證、輪播替代方案、按鈕互動與簡單 DOM 操作。這些能力能處理多數 Landing Page 與中小企業網站需求。

2026 年還需要學 jQuery 嗎？

jQuery 仍可能在舊網站或 WordPress 專案中遇到，但不建議當成 2026 年的主線入門技能。設計師應先學原生 HTML、CSS、RWD 與基礎 JavaScript，再視工作需求理解 jQuery 維護方式。

Bootstrap、Tailwind、Sass 應該先學哪一個？

先學原生 CSS。CSS 基礎穩定後，Sass 可用來整理變數與巢狀規則，Tailwind 可用來提高開發速度，Bootstrap 則適合快速做制式版面或後台。若一開始就依賴框架，容易不知道版面為什麼會成功或失敗。

設計師轉前端作品集要放幾件作品？

建議至少 3 件。包含一個 RWD 官網或 Landing Page、一個 Figma 切版作品、一個有 JavaScript 或 API 的互動專案。每件作品都應附 Demo、GitHub、設計稿來源與技術說明。

自學和職訓班哪個比較適合轉職？

紀律強、能自己找資源與請人 Review 的人，可以先自學或搭配線上課。需要固定節奏、同儕壓力、履歷協助與面試準備的人，職訓班或 Bootcamp 可能更適合。關鍵仍是作品集品質，不是上課形式本身。

有 ChatGPT 和 Copilot，還需要自己懂前端嗎？

需要。AI 可以協助產生範例、解釋錯誤與加速除錯，但無法替你判斷結構是否合理、RWD 是否穩定、程式碼是否可維護。設計師至少要懂到能檢查、修改與說明 AI 產出的程式碼。

設計師學前端一定要會問問題和查文件嗎？

一定要。前端工具與瀏覽器行為會變，單靠記語法不夠。你需要學會描述問題、貼出相關程式碼、讀 MDN 或官方文件，並用瀏覽器開發者工具檢查樣式。這是從跟打影片走向獨立完成作品的分界。

前端設計師在台灣公司通常做什麼？

常見工作包含網頁視覺設計、Figma 設計稿、HTML CSS 切版、RWD 調整、活動頁製作、WordPress 或 CMS 內容頁、與工程師溝通元件狀態。不同公司分工差異很大，中小企業更常需要一人多工。