STRUCTURE
頁面架構
從需求拆成頁面、Section 與資訊順序。
SECTION 00AI WEBSITE GENERATOR · FOONPLAY SCE
AI 網頁生成器
AI 網頁生成器一句 Prompt 可以開始。但正式網站，
不只一步。
AI 已經能把需求快速變成頁面、Component、Code，甚至資料與部署。真正的差距不是「能不能生成」，而是能不能把生成結果推進成可搜尋、可追蹤、可維護、可營運的正式網站。
AI GENERATOR FACTORY
PROMPT → PRODUCTION
PROMPT
做一個 AI 網頁生成器介紹頁，要有 SEO、FAQ、正式 CTA，並能繼續接 CMS、Tracking 與部署。
STRUCTURE
READY
UI
READY
CODE
READY
DATA
CHECK
DEPLOY
CHECK
GENERATED
第一版可以很快。真正的工作，是把它從「看起來完成」推到「可以長期營運」。
QUICK ANSWER · SCE
AI 網頁生成器是什麼？
AI 網頁生成器可以根據自然語言需求，快速建立網站架構、UI、程式碼與部分資料功能。它把「第一版」的速度壓到非常快。
但正式商用前，仍要處理資料、會員、SEO、追蹤、效能、安全、權限、版本與部署。
SECTION 01WHAT AI ACTUALLY GENERATES
AI 網頁生成器，
到底在生成什麼？
不只是把幾個區塊排漂亮。現在的生成工作可以一路碰到程式、資料、CMS 與部署。
UI
介面與元件
Hero、Card、Form、Navigation 與互動初稿。
CODE
前端與邏輯
Component、Route、狀態與部分 Backend。
DATA
資料結構
資料表、欄位、關聯與資料流。
CMS
內容管理
讓網站之後不是每改一個字都找工程師。
DEPLOY
正式環境
網域、Hosting、版本與發布流程。
SECTION 02PROMPT → PRODUCTION
一句 Prompt，
到真正上線要走幾層？
Demo 可以很快。Production 要把每一層真正接起來。
01
PROMPT
需求
02
STRUCTURE
架構
03
UI
畫面
04
CODE
程式
05
DATA
資料
06
AUTH
權限
07
CMS
內容
08
SEO
搜尋
09
TRACKING
追蹤
10
DEPLOY
上線
Generate 是開始。
不是交件。
SECTION 03PROMPT QUALITY
Prompt 寫得越短，
AI 猜得越多。
「幫我做一個漂亮網站」可以得到畫面，但企業網站真正需要的是目標、受眾、內容結構、功能、資料、搜尋、追蹤與限制條件。
VAGUE PROMPT
「幫我做一個高級、很有 AI 感的網站。」
畫面可能很快出來，但架構、功能與商業目標幾乎都靠 AI 猜。
BUILD BRIEF
目標客戶
核心轉換
頁面架構
品牌語氣
資料需求
SEO Intent
Tracking
Deployment
SECTION 04DEMO ≠ PRODUCTION
Demo 能跑，
不等於正式網站可以營運。
真正要驗的是搜尋、資料、權限、追蹤、效能與安全。
SEO
SSR、Canonical、Schema、內鏈與可索引性
DATA
資料放哪裡、誰能讀、誰能寫
AUTH
登入、角色、權限與敏感操作
TRACKING
Click、Form、Order 有沒有被正確記錄
PERFORMANCE
圖片、Bundle、LCP 與行動裝置體驗
SECURITY
Secret、API、權限與資料責任
SECTION 05FOONPLAY AI-CMS · REAL PROOF
我們自己的 AI-CMS，
就是在解這一段。
不是 AI 生完 HTML 就結束，而是把內容真正送進 Draft、Preview、Version 與 Publish。
REAL PUBLISH FLOW
PAGE PACK
DRAFT
PREVIEW
VERSION
PUBLISH
Foonplay AI-CMS 的 Page Pack Prompt 會要求 Title、Description、Canonical、Schema、Quick Answer、FAQ 與 CTA；發布流程則有 Draft、Preview、Revision 與 Publish，不是單純複製貼上。
aicms.page-pack
›
H1 → Quick Answer → H2/H3
›
Meta + Canonical + Schema
›
FAQ → CTA → Draft
›
Preview → Version → Publish
IMAGE UNDERSTANDING
圖片也能進 AI 工作流：理解內容、產 Alt、Title、Description、Role 與 SEO Keywords，再進頁面編排與優化。
SECTION 06AI × HUMAN DIVISION OF WORK
AI 很會做。
人要負責決定。
生成速度越快，越需要有人知道什麼值得做、什麼不該做。
AI CAN DO
DRAFT
先做第一版
把模糊需求快速變成可看的東西。
EXPAND
快速長頁
延伸 Section、FAQ、內容與 Component。
REFACTOR
改結構
把頁面、元件與 Code 重新整理。
CONNECT
接功能
在明確規格下串 API、資料與工具。
HUMAN DECIDES
WHY
為什麼做
商業目標、客戶與優先順序。
BRAND
品牌怎麼被理解
語氣、定位、質感與差異。
ARCHITECTURE
未來怎麼長
不是只看今天這一頁能不能跑。
RESPONSIBILITY
誰負責
資料、安全、發布與結果都要有人承擔。
SECTION 07FROM GENERATOR TO SYSTEM
網站生成完，
下一步是讓它接上真正的工作。
當 AI 開始連接 GitHub、CMS、Search Console、Ads、CRM、Database 與其他工具，網站就不只是被生成，而是開始進入公司的工作流。
SECTION 08FAQ · AI ANSWER LAYER
AI 網頁生成器常見問題
把最常被問的「到底能不能直接做完」一次講清楚。
01AI 網頁生成器是什麼？
AI 網頁生成器是用自然語言或其他輸入，協助建立網站架構、UI、程式與部分資料功能的工具。不同產品能做到的深度不同，有些偏版面，有些可以進到 Full Stack。
02一句 Prompt 真的可以做完整網站嗎？
可以快速做出可看的第一版，甚至完成很多功能；但正式商用網站還要處理資料、Auth、SEO、追蹤、效能、安全、版本與維護。
03AI 自動生成網頁可以直接上線嗎？
技術上常常可以，但是否適合直接商用要另外驗證。能部署和能長期營運是兩件不同的事。
04AI 生成網站可以接資料庫嗎？
部分 Full Stack 工具可以協助建立或串接資料庫，但仍要確認資料結構、權限、備份、遷移與後續維護。
05AI 生成網站能做 SEO 嗎？
AI 可以協助 Title、Meta、Schema、內容與頁面結構，但正式 SEO 還要確認 SSR、Canonical、內鏈、效能、搜尋意圖與持續內容策略。
06AI 生成完網站後還需要工程師嗎？
視專案複雜度而定。簡單頁面可能不需要太多工程投入；當需求涉及資料、權限、系統整合、安全與長期維護時，工程與產品判斷仍然重要。
FROM PROMPT TO BUSINESS
AI 可以幫你把第一版生出來。我們負責把它推到能工作的版本。
如果你的需求已經超過一頁網站，開始碰到 SEO、會員、資料、CMS、Tracking、API 與長期營運，就該把「生成」和「系統」一起規劃。
AI TEAM · WE'RE HIRING
你會用 AI
做網站？
不是只會下 Prompt。你能把 AI 真的變成網站、Code、資料、CMS、MCP 或 Agent Workflow？ Foonplay 正在找願意把 AI 做進真實專案的人。
不一定要每一項都會；但要敢做、會查、會驗，最後能交付。
AI WEBSITELOVABLELUMIREACTGITHUBSUPABASEMCPAGENT
BUILD
SHIP
CONNECT
WORK WITH AI