UI DRAFT
介面初稿
快速產生 Hero、Card、Layout 與視覺方向。
SECTION 00AI × WEB DESIGN CAREER · FOONPLAY SCE
WILL AI REPLACE WEB DESIGNERS?
AI 會取代
網頁設計師嗎？會取代一部分工作。但不是把整個角色一鍵刪掉。
AI 正在把 UI 初稿、Component、切版、基本 Code、內容初稿、測試與 Debug 的時間大幅壓縮。真正被重新定價的，是「執行」。
當製作變快，策略、品牌、架構、搜尋、資料與責任反而更重要。
ROLE SPLIT · 2026
WHAT AI TAKES / WHAT HUMAN OWNS
AI COMPRESSES
UI DRAFT
COMPONENT
CODE
CONTENT
TEST
REPEAT
HUMAN OWNS
STRATEGY
BRAND
UX
ARCHITECTURE
DATA
RESPONSIBILITY
THE SHIFT
從「把網站做出來」→「設計網站怎麼工作」
QUICK ANSWER · SCE
AI 會取代網頁設計師嗎？
AI 會自動化一部分重複、規格明確的網站工作，但網頁設計師的角色不只包含製作。
更精準的說法是：AI 正在取代「工作切片」，同時把品牌、UX、架構、資料、搜尋與商業判斷的價值往上推。
SECTION 01WHAT GETS COMPRESSED FIRST
最先被 AI 壓縮的，
通常不是職稱，是工作切片。
越容易規格化、越容易描述輸入輸出、越容易驗證的工作，越適合被 AI 自動化。
COMPONENT
元件製作
Button、Form、Navigation、Table 等規格明確元件。
CODE
切版與程式
React、CSS、Route、簡單互動與部分後端。
CONTENT DRAFT
內容初稿
標題、段落、FAQ、Meta 與多版本文案。
TEST / DEBUG
測試與除錯
找錯、補型別、重構與基本 QA。
REPEAT WORK
重複工作
大量頁面、規格化調整與重複搬運。
如果你的價值只剩「把規格做出來」，
AI 的確正在逼近。
SECTION 02WHAT BECOMES MORE VALUABLE
AI 越會做，
人越需要會判斷。
真正變貴的，不是滑鼠點得多快，而是知道哪個方向值得做。
STRATEGY
商業策略
先知道網站到底要替公司解決什麼問題。
BRAND
品牌判斷
不是產生漂亮，而是產生對的品牌感受。
UX JUDGMENT
UX 判斷
知道什麼該簡化、什麼該保留、使用者卡在哪。
ARCHITECTURE
資訊與系統架構
讓 1 頁能長成 50 頁、100 頁，而不是越做越亂。
SEARCH
搜尋策略
知道哪些 Query 值得做、內容如何連成權威主題。
DATA
資料與治理
資料放哪、誰能讀寫、怎麼追蹤與回溯。
CONVERSION
轉換設計
把流量、表單、CRM、廣告與成交串起來。
RESPONSIBILITY
責任
誰最後對上線、安全、版本與商業結果負責。
SECTION 03ROLE SHIFT
網頁設計師沒有消失。
但角色正在升級。
從執行者，走向會設計流程、系統與 AI 協作方式的人。
LEVEL 01
只會執行
等規格、做畫面、切版、搬內容。
最容易被 AI 壓縮工時。
LEVEL 02
會使用 AI
能用 AI 加速設計、Code、內容與 Debug。
效率提升，但仍需要別人決定方向。
LEVEL 03
AI-Native Web Designer
會拆需求、定架構、用 AI 執行，還能把資料、MCP、CMS、SEO 與營運接起來。
角色從製作者變成設計工作系統的人。
AI 不只是多一個工具。
它正在重寫「網頁設計師」這個職位的工作內容。
SECTION 04AI-NATIVE WEB DESIGNER · SKILL STACK
2026 的網頁設計師，
Skill Stack 應該長什麼樣？
不需要每一項都成為專家，但要能把這些層串起來，知道哪裡需要深入。
01
BRAND / UX
懂人、懂品牌、懂資訊層級。
02
AI TOOLS
會用 LOVABLE、LUMI、V0、RORK 等工具加速。
03
CODE
至少能看懂、修改、驗證產出的程式。
04
GITHUB
版本、分支、回滾與協作。
05
DATA / AUTH
知道 Database、會員與權限不是畫面問題。
06
SEO / AI SEARCH
知道搜尋意圖、Schema、內鏈與答案層。
07
MCP / AGENT
讓 AI 從聊天走到工具與真實工作流。
08
MEASURE
Tracking、Conversion、Revenue 與後續迭代。
SECTION 05FOONPLAY · HOW WE WORK NOW
我們自己的工作方式，
已經不是「設計完交給工程」。
AI 工具、GitHub、CMS、MCP、資料與追蹤正在同一條工作流裡協作。
OLD WORKFLOW
01PM 寫需求
02Designer 出稿
03Developer 切版
04SEO 再補
05Tracking 最後裝
AI-NATIVE WORKFLOW
STRATEGYPROMPTUICODEGITHUBDATABASECMSMCPSEOTRACKINGDEPLOYITERATE
角色不是變少而已，而是邊界正在重組：設計、程式、內容、SEO 與營運不再完全分成一條條獨立流水線。
SECTION 06CAREER DECISION
那現在還要不要學
網頁設計？
要。
只是不要只學「怎麼把畫面做出來」。把品牌、UX、AI、Code、資料、搜尋、MCP 與商業一起學，你學的就不是一套很快會過時的操作流程，而是一種能持續升級的能力。
BETTER QUESTION
不要只問：
「AI 會不會搶走我的工作？」
「AI 會不會搶走我的工作？」
改問：
「我能不能把 AI 變成我的工作能力？」
「我能不能把 AI 變成我的工作能力？」
SECTION 07NEXT CLUSTER PAGE
如果 AI 已經開始改變職位，
那公司要怎麼把 AI 真正放進工作？
下一頁直接看 Foonplay 自己怎麼把 AI-CMS、Agent、Tracking、Worker、Meeting 與 MCP 接進 NEXUS。
REAL AI WORKSPACE
NEXUS
從 AI 做網站，到 AI 開始參與整間公司的工作。
下一頁
SECTION 08FAQ · AI ANSWER LAYER
AI 取代網頁設計師常見問題
工作、技能、程式、AI 工具與職涯方向，一次拆開。
01AI 會取代網頁設計師嗎？
AI 已經能自動化一部分重複、規格明確的網站工作，例如 UI 初稿、元件、切版、基本程式與內容初稿。但網頁設計師的角色不只包含製作，還包含品牌、UX、架構、資料、搜尋、系統與商業判斷。
02最容易被 AI 取代的是哪些網頁工作？
通常是輸入與輸出都很明確、可以被規格化的工作，例如重複切版、簡單頁面延伸、基本元件、文案初稿、內容搬運、測試與部分 Debug。
03學網頁設計還值得嗎？
值得，但學習重點正在改變。除了視覺與前端，也要理解 AI 工具、程式、資料、SEO、GitHub、MCP、系統整合與商業目標。
04設計師一定要會寫程式嗎？
不一定要成為全職工程師，但在 AI 生成 Code 的環境裡，能讀懂、驗證與修改程式，會大幅提升你能負責的範圍。
05未來網頁設計師最重要的能力是什麼？
能把模糊需求拆成清楚策略與系統，並判斷 AI 產出的結果是否符合品牌、UX、搜尋、資料、安全與商業目標。
06只會操作 AI 工具夠嗎？
不夠。工具會持續更換，真正能累積的是需求拆解、架構、判斷、驗證、資料與責任能力。
AI-NATIVE WEB DESIGN
AI 讓「做網站」變便宜。也讓「知道該做什麼」變得更值錢。
如果你的公司要做的不是一張漂亮首頁，而是一套能搜尋、能追蹤、能接資料、能持續成長的網站系統，真正該找的是會把 AI 放進完整工作流的人。
AI TEAM · WE'RE HIRING
你會用 AI
做網站？
不是只會下 Prompt。你能把 AI 真的變成網站、Code、資料、CMS、MCP 或 Agent Workflow？ Foonplay 正在找願意把 AI 做進真實專案的人。
不一定要每一項都會；但要敢做、會查、會驗，最後能交付。
AI WEBSITELOVABLELUMIREACTGITHUBSUPABASEMCPAGENT
BUILD
SHIP
CONNECT
WORK WITH AI