WEBSITE
品牌官網 / Landing Page
需要網站、內容、頁面與正式網域。
SECTION 00AI TOOL LAB · FOONPLAY SCE
AI WEBSITE TOOLS
AI 網頁設計工具到底怎麼選？工具都很強。
但不是每一個都在做同一件事。
有人要品牌官網，有人要 App，有人只想先做 UI，有人真正需要的是會員、資料庫與 Backend。先選「你要做什麼」，再選工具，會比找一個所謂最強 AI 更有效。
TOOL SELECTOR CONSOLE
WHAT ARE YOU BUILDING?
CURRENT MATCH
WEBSITE
LOVABLELUMIFRAMERWIX
QUICK ANSWER · SCE
AI 網頁設計工具怎麼選？
AI 網頁設計工具大致可以分成 Website Builder、App Builder、UI Generator、Full Stack Builder 與 AI Coding 五種類型。
選擇時不要只看生成速度，要一起看原始碼、資料庫、後端、SEO、GitHub、API、部署與後續擴充能力。
SECTION 01START WITH THE BUILD TYPE
先不要選品牌。
先選你要做哪一種東西。
Tool logo 只是入口。真正決定你會不會踩坑的，是產品類型、資料、後端與未來維護方式。
APP
Mobile / Web App
需求核心是產品功能，而不是單純頁面。
UI
介面 / Prototype
先把 Component、畫面與互動快速做出來。
FULL STACK
前端 + Backend + Data
網站需要登入、資料、API 與商業邏輯。
CODE
AI Coding / Agent
你已經有 Codebase，希望 AI 直接加入開發。
SECTION 02AI TOOL ATLAS
11 個 AI 工具，
各自在做什麼？
這不是排行榜。不同工具服務不同工作，不需要硬選一個「第一名」。
FULL STACK WEB
LOVABLE
適合從 Prompt 快速推進 Web Project，把畫面、資料與產品原型拉進同一個開發流程。
GOOD FIT
品牌網站、MVP、Web App、快速迭代
WEBSITE / CMS
LUMI
網站與內容工作流導向。Foonplay 自己也有真實的網站、CMS 與 Media 使用經驗。
GOOD FIT
網站、內容、CMS、快速頁面
DESIGN / WEBSITE
FRAMER
偏視覺網站與 Landing Page，適合需要快速把品牌畫面做得完整的人。
GOOD FIT
品牌網站、Landing Page、視覺呈現
BUSINESS WEBSITE
WIX
成熟的 Website Builder 路線加入 AI，適合希望把內容、網站管理與商務功能放在同一平台的使用者。
GOOD FIT
企業網站、小型商務網站
不要只問「哪一個 AI 最強」。
先問你的網站最後要長成什麼。
SECTION 03WHAT ACTUALLY MATTERS
不要看 Logo。
真正要比較的是這 10 件事。
這些項目比「生成得漂不漂亮」更接近正式商用網站的長期成本。
01
WEBSITE / APP
先確定你到底要做網站、App，還是產品系統。
02
CODE OWNERSHIP
程式碼是不是你的？能不能離開工具繼續維護？
03
GITHUB
能不能正常版控、回滾、多人協作。
04
BACKEND
是否能處理真正的商業邏輯。
05
DATABASE
資料放在哪裡，能不能掌握與搬移。
06
AUTH
會員、登入、角色與權限能不能做。
07
API
能不能接 CRM、ERP、金流或其他外部系統。
08
SEO
Title、Canonical、SSR、Schema 與內容結構能控制多少。
09
DEPLOY
正式網域、Hosting、部署與更新流程是不是清楚。
10
EXIT / SCALE
未來專案變大，能不能繼續擴充，而不是被鎖死。
SECTION 04FREE AI WEBSITE · COST REALITY
免費 AI 網站，
真的免費嗎？
免費很適合開始。只是「免費生成第一版」和「免費長期營運」不是同一件事。
FREE TO START
免費開始
很多工具都有免費額度或試用，適合先驗證想法。
DOMAIN
正式網域
真正上線後，Custom Domain、SSL 與正式環境要另外確認。
CREDITS
AI 生成額度
生成、修改、Agent 工作通常會消耗不同形式的使用額度。
BUSINESS COST
營運成本
Database、Email、API、Storage、流量與第三方服務才是長期成本。
免費做出第一版，
跟免費營運一個網站，是兩回事。
SECTION 05AFTER PUBLISH
AI 建站工具最常忽略的：
網站做完以後呢？
Publish 只是第一公里。正式網站後面還有搜尋、追蹤、CRM、廣告、內容、資料與自動化。
SEARCH
Google 與 AI 找不找得到你
TRACKING
誰從哪裡來、做了什麼
CRM
表單之後有沒有進真正的客戶流程
ADS
廣告點擊最後有沒有成交
CONTENT
網站之後誰更新、怎麼擴張
DATA
資料是不是完整留下來
AUTOMATION
能不能接進後面的營運
SECURITY
權限與資料責任怎麼管理
Generate Website 只是 第一公里。
SECTION 06FOONPLAY · REAL WORKFLOW
WE DON'T JUST REVIEW AI TOOLS.
WE USE THEM.
這些工具不是寫在文章裡而已。它們已經進到我們真正的網站、程式、資料與營運工作流。
REAL STACK
CHATGPT
MCP
GITHUB
LOVABLE / LUMI
SUPABASE
CLOUDFLARE
NEXUS
PROOF 01
LOVABLE × GITHUB
正式專案怎麼開發、同步、版本控制，而不是只停在 Prompt。
PROOF 02
LUMI / AI-CMS
內容生成之後，怎麼進 Draft、Preview、Version、Publish。
PROOF 03
CHATGPT × MCP × NEXUS
從聊天跨到 Search Console、GitHub、CMS、Tracking、Ads 與真實工作。
SECTION 07MATCH BY NEED
哪一種人，
適合哪一條路？
不需要追逐所有工具。需求不同，最合理的 AI 工作方式也不同。
LANDING PAGE
我要快速做一頁
先看 Website Builder。
速度、版面、表單、網域與基本 SEO 通常是第一優先。
BRAND WEBSITE
我要正式品牌官網
AI Builder + Brand / UX / SEO。
工具可以加速製作，但品牌定位、內容與搜尋架構要一起決定。
APP
我要做 App
直接看 App Builder。
不要拿純 Website Builder 硬做產品型需求。
SYSTEM
我要會員、Database、Backend
看 Full Stack。
資料、Auth、API、權限與部署會比 Hero 長什麼樣更重要。
ENGINEERING
我已經有工程團隊
AI Coding + Agent + MCP。
真正的價值是把 AI 接進既有 Codebase 與日常工作流。
SECTION 08FAQ · AI ANSWER LAYER
AI 網頁設計工具常見問題
工具選擇、免費方案、商用、SEO、原始碼與後台，一次回答。
01AI 網頁設計工具哪個好？
沒有單一工具適合所有情境。先分清楚你要做 Website、App、UI、Full Stack 還是既有 Codebase，再比較資料、原始碼、SEO、部署與後續擴充。
02有免費 AI 網站工具嗎？
很多工具可以免費開始或提供試用額度，但正式網域、生成額度、資料庫、Email、Storage、API 與流量成本通常要另外評估。免費做出第一版，和免費長期營運，是兩回事。
03AI 網頁生成器可以商用嗎？
要看工具的方案與授權，也要確認你使用的素材、程式、第三方服務與資料處理是否符合商業需求。正式上線前不要只看畫面是否能跑。
04AI 生成網站能做 SEO 嗎？
可以做部分 SEO，但真正的企業 SEO 還要確認 SSR、Canonical、Schema、內部連結、內容結構、效能與可持續維護能力。
05生成後可以自己拿原始碼嗎？
不同工具的做法不同。這也是選工具前一定要確認的項目：原始碼、GitHub、資料庫與網域到底由誰控制。
06AI 可以做後台、會員與資料庫嗎？
部分 Full Stack 工具已經能協助建立這些功能，但正式商用還要處理資料結構、Auth、權限、安全、備份與後續維運。
NEXT QUESTION
已經選好 AI 工具了？下一個問題，是你的網站要怎麼長大。
工具負責把東西做出來。專業負責確定做的是對的東西：品牌、資訊架構、SEO、資料、追蹤、CRM 與長期營運。
AI TEAM · WE'RE HIRING
你會用 AI
做網站？
不是只會下 Prompt。你能把 AI 真的變成網站、Code、資料、CMS、MCP 或 Agent Workflow？ Foonplay 正在找願意把 AI 做進真實專案的人。
不一定要每一項都會；但要敢做、會查、會驗，最後能交付。
AI WEBSITELOVABLELUMIREACTGITHUBSUPABASEMCPAGENT
BUILD
SHIP
CONNECT
WORK WITH AI