Agentic coding 做網站:從需求、AI 實作到秒站上線的完整流程

用 Agentic coding 做網站,可以先把需求交給 AI 代理完成前端草稿,再確認產出格式、功能與手機版,最後放進適合的網站環境並驗收。如果你要經營品牌官網、文章或服務頁,可以把相容的前端成果接到秒站;涉及獨立後端與資料庫時,則先做技術評估。

這份流程面向網站經營者,不要求你從零學會寫程式,但會把 AI 交付、頁面內容、表單與上線責任拆清楚。要先理解代理如何讀檔與修正,可看 Agentic coding 入門;工具尚未選定,可看 coding agent 工具比較。

第一步:把網站目的與驗收寫清楚

先決定讀者來到網站後要做什麼,例如看服務、詢價或報名。把既有素材與不可更動的資訊提供給 AI,避免它自行填入不存在的客戶見證、價格或認證。

需求項目服務型官網的示意內容完成時如何檢查
主要讀者正在比較服務方案的企業窗口首屏能看懂服務對象與內容
頁面資訊服務範圍、流程、真實案例與聯絡方式文案與提供的資料一致
主要操作前往既有詢價表單按鈕目的地正確,手機可點擊
功能範圍介紹頁面,不自建會員或付款系統沒有未確認的登入、交易或資料庫需求
視覺與裝置既有品牌色、桌機與手機文字可讀,圖片正常,版面不溢出

以上是交付項目的示例,不是實際客戶案例。如果你尚未確定內容方向,先用自然語言探索;開始串接功能前,再把欄位與規則寫清楚。Vibe coding 與 Agentic coding 的比較也說明了這兩個階段如何配合。

第二步:確認 AI 交付的是什麼,決定網站放法

拿到的成果放進網站前要做的事
可獨立預覽的 HTML、CSS 與 JavaScript檢查素材網址與樣式範圍,確認相容後放入 Vibe 畫布
需要安裝套件或打包的前端專案先確認能否轉成相容的靜態前端產出,檢查路徑與外部相依
需要 Node.js、Python 或其他後端執行環境另行評估主機、API、權限與維護責任,不能直接貼成畫布
會員、金流、表單或訂單功能優先確認是否由所選網站方案與既有模組承接,再測試真實流程

Vibe 畫布是秒站的頁面類型,可搭配頁面編輯器或直接編輯使用。它不是任意後端程式的執行空間;把完整 React 專案資料夾貼進自訂 HTML,也不等於完成整合。實際建立入口見新增頁面與 Vibe 畫布教學。

第三步:先做一張草稿頁,再接上真正功能

在草稿裡確認內容與版面後,再把表單與付款接到實際支援的服務。單純用 JavaScript 顯示「送出成功」,不能證明資料已保存;展示一個付款按鈕,也不能證明訂單與付款狀態能核對。

以詢價表單為例,要確認必填欄位、送出結果、後台紀錄與通知信。若只是標準官網加外部付款連結,可參考秒站標準版搭立即付;若需要站內課程與交易流程,應依專業方案功能評估。涉及金流時,仍先準備網站或商店,再申請金流,核准後才回平台串接與測試。

第四步:需要 AI 直接操作網站時,再評估 MCP

手動放入前端內容,與讓 AI 連線操作網站是兩種方式。秒站 AI 連接器(MCP)屬可加購功能;完成連線後,AI 能操作的項目仍依帳號、模式與支援工具而定。

第一次交辦可先要求唯讀查詢,核對頁面名稱、編號與狀態,再指定要修改的區塊。若任務以背景工作執行,要查詢工作是否完成,並讀回正式內容;收到已排程訊息不等於已上線。操作前可參考 AI 連接器安全交辦與結果驗收。

第五步:照這張清單驗收,別只確認首頁能打開

驗收範圍檢查方式
內容價格、服務、案例與聯絡資料對照原始素材
手機版檢查文字、導覽、表格與按鈕,確認沒有整頁水平溢出
互動實際開啟連結,測試有效與無效輸入,核對表單紀錄
圖片與腳本確認圖片載入;腳本有時序需求時依頁尾腳本教學處理
搜尋入口確認正式網址、標題、描述與索引設定符合用途
版本與維護保留可回復版本,寫明內容與功能由誰持續維護

JavaScript 有載入時序需求時,請依 Vibe 畫布頁尾腳本設定處理;SEO 欄位填好也不保證排名或 AI 引用。先確保網站可讀,內容有依據,再從實際曝光與詢問資料調整。

第六步:用營運需求選購秒站

秒站提供現成架構、頁面編輯器與 AI 協作的 Vibe 畫布,可依不同頁面混用。品牌官網與文章經營可從標準方案開始;課程與站內交易看專業方案;實體物流需求則看輕電商。輕電商描述的是適用營運量級,仍需依實際商品與訂單流程確認功能。

依 2026 年 10 月 4 日公開定價,標準方案首年 NT$24,000、次年 NT$12,000 起;專業首年 NT$36,000、次年 NT$18,000 起;輕電商首年 NT$48,000、次年 NT$24,000 起。這些是年費,AI 工具帳號、網域與加購功能另計,MCP 不應當成標準方案免費內含。

還沒決定可以先看網站案例,再申請 4 小時免費試用。若要保留試用時 AI 生成的內容,先依匯出內容教學保存,購買正式方案後告知客服協助匯入。

重點整理

AI 寫好 HTML 後可以直接公開嗎?

先檢查內容、素材、手機版、連結與真正功能;表單或付款流程還需確認後台結果。能顯示頁面不代表所有功能已完成。

不用 MCP,也能把 AI 頁面放到秒站嗎?

可以先評估手動把相容的前端內容放入 Vibe 畫布。MCP 是讓 AI 連線操作網站的加購方式,不是所有畫布工作的必要條件。

網站只有詢價功能,應選哪種方案?

可先評估標準方案與表單需求。若還需要課程、站內交易或實體物流,再依功能選擇專業或輕電商;特殊串接需另行確認。

試用做出的內容如何保留到正式網站?

試用結束前先匯出 AI 生成內容,購買正式方案後告知客服協助匯入;不要假設試用網址或全部設定會自動接續。