01 · UI / UX
畫面、元件與互動初稿
SECTION 00AI WEB DESIGN · FOONPLAY SCE
AI 網頁設計 MCP · NEXUS · AGENTS
AI 網頁設計AI 已經會做網站。但「生成出來」不等於「做好」。
現在一句 Prompt，就能開始生成畫面、程式、資料庫、登入功能，甚至直接部署。 LOVABLE、RORK、LUMI、V0、BOLT、REPLIT 正在快速降低「做出網站」的門檻。
真正的差距，已經從「會不會做網頁」移到「知不知道這個網站應該怎麼工作」。
AI WEBSITE
FROM PROMPT
TO BUSINESS SYSTEM
LOVABLE
LUMI
RORK
V0
BOLT
REPLIT
MCP
LOVABLERORKLUMIV0BOLTREPLITFRAMERWIXCURSORCLAUDECHATGPTLOVABLERORKLUMIV0BOLTREPLITFRAMERWIXCURSORCLAUDECHATGPT
QUICK ANSWER · SCE
AI 網頁設計是什麼？
AI 網頁設計，是利用 AI 協助網站的企劃、UI、程式、內容、資料與部署。AI 可以大幅縮短製作時間，但企業正式網站仍需要處理品牌、SEO、資料權限、系統整合、追蹤、維護與轉換。
真正的差距，已經從「會不會做網頁」移到「知不知道這個網站應該怎麼工作」。
SECTION 01AI CAN BUILD
AI 現在真的可以
做多少網站？
以前要不同角色接力，現在 AI 已經可以一次跨過很多層。但跨得過去，不代表每一層都做對。
02 · CODE
React、前端與部分後端
03 · DATABASE
資料表與資料流程
04 · AUTH
會員、登入與權限
05 · API
串接外部系統與服務
06 · CMS
內容管理與頁面維護
07 · SEO
Meta、Schema、內容結構
08 · TRACKING
事件、來源與 Conversion
09 · DEPLOY
網域、部署與更新
10 · AUTOMATION
把網站接進工作流程
AI 已經可以跨過很多以前需要不同工程角色才能完成的工作。
SECTION 02AI TOOL UNIVERSE
做 AI 網站，
不只有一種工具。
不同工具解決不同問題：有人擅長 UI、有人擅長 App、有人擅長 Full Stack，也有人更接近 AI Coding 與 Agent 協作。
FULL STACK WEB
LOVABLE
從 Prompt 到 Web Project，適合快速把產品與網站做成可運作版本。
APP / MOBILE
RORK
偏向 App 與行動應用生成的工作路線。
WEBSITE / CMS
LUMI
網站、內容與 CMS 工作流，適合快速建立可維護頁面。
UI / COMPONENT
V0
介面與 React Component 生成，適合快速探索 UI。
BROWSER BUILD
BOLT
在瀏覽器裡生成、修改並執行應用。
CODE / BACKEND
REPLIT
AI Coding、後端與 Deploy 放在同一工作環境。
AI CODING
CURSOR
更貼近開發者的 AI 程式協作。
AGENT LAYER
CHATGPT / CLAUDE
當它們接上工具與 MCP，就不只剩下聊天。
NEXT CLUSTER PAGE
工具都很強，但你先要知道自己最後要做什麼。
SECTION 03FROM PROMPT TO PRODUCTION
一句 Prompt，
到真正能營運的網站，中間還有很多層。
Generate 是開始，不是交件。
PROMPT
01
STRUCTURE
02
UI
03
CODE
04
DATA
05
AUTH
06
CMS
07
SEO
08
TRACKING
09
DEPLOY
10
PRODUCTION CHECK
Demo 能跑，不等於 Production 可以營運。
資料、權限、SEO、追蹤、效能、安全、版本與維護，才是網站從「看起來完成」走到「真的能工作」的地方。
ai-website.pipeline
›
prompt → structure → ui → code
›
data → auth → cms
›
seo → tracking → deploy
›
status: ready for business
SECTION 04MCP · FROM CHAT TO ACTION
AI 網頁設計的下一步，
不是生成更多頁面。
是讓網站開始連接整間公司。
MCP 讓 AI 從「知道事情」跨到「使用工具做事情」。網站可以開始和程式、資料庫、CMS、搜尋、廣告與營運系統建立受控連接。
GITHUB
SUPABASE
CLOUDFLARE
SEARCH CONSOLE
GOOGLE ADS
META ADS
CRM / ERP
CMS
EMAIL / CALENDAR
WITHOUT MCP
「我的 Search Console 最近怎樣？」
AI：請把資料貼給我。
WITH MCP
AI 可以先確認權限，再直接讀 Project、GSC、Page、Source 與 Draft。
從回答問題，跨到真正執行工作。
SECTION 05NEXUS · REAL AI WORKSPACE
我們不是在研究 AI 做網站。
我們每天就在用 AI 讓網站工作。
NEXUS 是我們把網站、資料、內容、追蹤、會議、Agent 與 MCP 接起來的真實工作系統。
AI-CMS
AI 不是只生文案，而是進正式發布流程
Page Pack、Meta、Schema、圖片理解、Draft、Preview、Version、Publish。
KRONOS
網站做完，還要知道流量最後發生什麼
Source、Campaign、Event、Conversion 與 Revenue，回到同一條商業路徑。
SIGNAL CORE
一堆 Event，不等於有用的資訊
把點擊、表單、訂單與來源整理成可判斷的 Signal。
JOURNEY
今天點廣告，幾天後成交，仍然是一段 Journey
Click → Form → Email → Return → Order，不只看最後一次造訪。
IMAGE OPTIMIZER
圖片也可以進 AI 工作流
Vision → Alt → Role → SEO Keywords → WebP → R2 → Delivery。
PM / MEETINGS
會議不是錄完就躺在資料夾
PLAUD → Transcript → Summary → Context → Task。
WORKER / AGENTS
AI 不只聊天，也可以執行受控工作
固定能力、狀態、Log 與背景 Workflow，讓 Agent 真正加入日常營運。
MCP / CONNECTIONS
工具、資料與權限必須接在一起
Project、Scope、CMS、GitHub、Tracking、Ads 與 Agent 在同一層管理。
NEXUS PRINCIPLE
AI 不該拿到所有權限。
它應該拿到完成這份工作所需要的權限。
READWRITEPUBLISHRBACAPPROVALAUDIT LOG
SECTION 06AI × PROFESSIONAL JUDGMENT
AI 很會生成。
但企業網站最難的，本來就不是生成。
製作速度被壓縮之後，策略、架構、資料與商業判斷反而更重要。
01
STRATEGY
網站到底要解決什麼生意問題
02
BRAND
品牌要被怎麼理解、怎麼記住
03
ARCHITECTURE
未來 50、100 頁要怎麼長
04
SEARCH
Google 與 AI 要怎麼理解你
05
SYSTEM
資料、會員、CRM、ERP、API 怎麼連
06
CONVERSION
流量最後有沒有變成詢問與成交
AI 可以把「製作」壓縮到幾小時。商業判斷、架構與責任，不會因此消失。
SECTION 07WILL AI REPLACE WEB DESIGNERS?
AI 會取代
網頁設計師嗎？
會取代一部分工作。
AI 正在快速取代重複、規格明確的網頁製作工作。但品牌策略、資訊架構、系統整合、資料治理、搜尋策略與商業責任，仍然需要人負責。
AI 越來越會做
UI 初稿
Component
切版
基本 Code
文案初稿
簡單 Backend
測試
Debug
價值反而上升
Strategy
Brand
UX Judgment
Architecture
System Design
SEO Strategy
Data
Responsibility
AI 讓「做網站」變便宜。
也讓「知道該做什麼」變得更值錢。
SECTION 08FAQ · AI ANSWER LAYER
AI 網頁設計常見問題
把「AI 能不能做網站」後面真正會遇到的問題一次講清楚。
01AI 網頁設計是什麼？
AI 網頁設計是利用 AI 協助網站的企劃、UI、程式、內容、資料與部署。對正式企業網站來說，還要處理品牌、SEO、資料權限、系統整合、追蹤、維護與轉換。
02AI 可以自己做完整網站嗎？
可以快速做到很大一部分，包含 UI、程式、資料庫、登入、API 與部署。但能不能直接商用，仍要看安全、資料、SEO、追蹤、權限與後續維護是否處理完整。
03LOVABLE、RORK、LUMI、V0、BOLT 這些工具差在哪？
它們的強項不同，有些偏網站、有些偏 App、有些偏 UI 或 Full Stack。真正要比較的是你要做什麼，以及原始碼、後端、資料庫、SEO、部署與後續擴充能不能掌握。
04MCP 跟 AI 網頁設計有什麼關係？
MCP 讓 AI 不只回答問題，而能在授權範圍內連接 GitHub、資料庫、CMS、搜尋、廣告與其他系統。AI 網頁設計因此可以從「生成頁面」進一步變成「參與營運」。
05AI 會取代網頁設計師嗎？
AI 會降低大量重複、規格明確的製作成本，但品牌策略、資訊架構、系統整合、資料治理、搜尋策略與商業責任仍然需要專業判斷。
FINAL CONVERSION
你要的是「AI 幫你做一個網站」還是「讓 AI 幫你的公司開始工作」？
如果你只是想快速做一個網站，AI 工具已經非常夠用。當你的需求開始涉及品牌、SEO、AI Search、系統整合、資料追蹤、廣告、CRM 與長期營運，就不只是「生成網站」了。
GENERATE
AI 會做。
CONNECT
MCP 會接。
OPERATE
NEXUS 會工作。
DECIDE
專業負責方向。
AI TEAM · WE'RE HIRING
你會用 AI
做網站？
不是只會下 Prompt。你能把 AI 真的變成網站、Code、資料、CMS、MCP 或 Agent Workflow？ Foonplay 正在找願意把 AI 做進真實專案的人。
不一定要每一項都會；但要敢做、會查、會驗，最後能交付。
AI WEBSITELOVABLELUMIREACTGITHUBSUPABASEMCPAGENT
BUILD
SHIP
CONNECT
WORK WITH AI