我的 Vibe Coding 作品大公開：用 AI 打造內建 CMS 的全功能接案主題模板網站
Hello 我是享哥！今天跟大家分享是我 Vibe Coding 的一個作品，會跟你講我的思路，跟我如何去做到這樣子一個作品。好，話不多說，我們開始吧！
為什麼想打造這個接案網站？
大家看到的這個畫面，是我 Vibe Coding 的一個網站，它是一個形象網站。為什麼會有這樣子的想法跟起源？最近在接案時，我發現這常常是接案遇到的痛點：不管跟業主怎麼溝通，他都不知道要給什麼資料。
所以，不如先做一個 Demo 給他看。他知道至少會有首頁、文章、產品、關於我們、常見問題，跟聯絡我們這些項目，他也就會知道要給我類似的相關問題跟內容。這就是開發這個網站的出發點。
網站核心功能：滿足業主的基本需求
產品型錄與聯絡表單
對方希望有一個產品分類，最核心的功能會是產品這塊。你點進來，它可以去洽詢產品，比如說連到公司的聯絡表單，或是說直接聯絡他、打電話給他。這裡是他的產品型錄，這是最基本他可能會需要用到的一個功能。
文章與最新消息展示
再來是文章這塊，比如說公司有很多最新消息，或是有一些內容希望用文章的方式來做呈現。這些我都會先做假資料，讓他大概能看到它實際的樣子。
內建 CMS 後台管理系統
這些內容我們可以透過類似 WordPress 這種 CMS 的後台來做管理。我們也做了一個專屬的後台，也就是說如果增加了什麼內容（例如文章有什麼更新），它會同步在前台顯示，這是一個最大的優勢。當然，不論你要新增內容、產品文章，包括輪播圖或媒體要上架，這些東西都是可以輕鬆完成的。
實用亮點：一鍵切換產業主題模板
第二個亮點就是我設計的主題模板。也就是說今天我接到了比較偏「工業設備」這塊的案子，我可以先套用該主題，它會先備份並套用起來。
這些全部都是假資料，當我重整一下，你看它就變成了「打造穩定智慧工廠的產線」。圖片都是先用網路上高品質的圖庫去做應用。主要是讓他看到 Demo 網站，讓他知道這些區塊應該要提供什麼樣的素材（比如說他需要給照片套進去，以及相關的資訊內容），大幅方便我們在接案的時候使用。
因應不同組織屬性的彈性調整
當然有的時候除了產品型錄，我們要的可能是比較像「社團組織官網」這種類型。套完版之後，它的一些網址跟內容會比較不太一樣，所以需要重新重整。
像剛剛的「文章」就變成了「最新消息」，因為對社團來說，他們比較需要的是最新消息的發佈；社團沒有產品，所以該區塊可能就會變成「活動」，這部分可能要再微調修改一下。不過這主要是先給業主看一下，原來整個網站的概念會是什麼樣的呈現，後續大家可以再去做一些調整跟處理，這就是套版設計的魅力。
技術架構：AI Coding 與 Cloudflare 部署
要完成這些功能，除了 AI 的 coding 以外，我們還需要進行部署。我是使用 Cloudflare 去做部署的，大家可以稍微再去查一下，包括它的 D1 資料庫，或是相關可以放產品、圖片等內容的儲存方案，它都可以做很好的支援。這是目前最流暢、最簡單的設計 vibe coding 做法。
以上跟大家分享我的 vibe coding 的作品！至於實際怎麼做，之後會再錄相關一系列的影片跟大家分享。
常見問答 (FAQ)
Q1: 什麼是內建 CMS 的接案網站？
內建 CMS 的接案網站，指的是前台網站與後台內容管理系統整合在同一個專案裡，業主可以自己新增文章、產品、圖片與首頁素材，不需要每次改內容都回頭找工程師處理。
Q2: 為什麼做接案提案時，先準備一個 Demo 網站很重要？
因為很多業主其實不知道網站需要準備哪些資料，先做出可操作的 Demo，能讓對方快速理解首頁、產品、文章、聯絡表單與常見問題等區塊長什麼樣子，也比較容易收集正確素材。這篇提到的展示站也可以直接參考： Demo 網站展示
Q3: 這種 Vibe Coding 接案網站適合哪些產業使用？
很適合需要品牌形象頁、產品型錄、最新消息或活動頁面的產業，例如工業設備、服務型公司、教育品牌、協會組織與中小企業官網，都可以用同一套架構再做細部調整。
Q4: Cloudflare 在這個 AI 接案網站架構中主要負責什麼？
Cloudflare 主要負責網站部署與雲端基礎設施，像是 Pages、Workers、D1 資料庫與媒體儲存相關服務，能讓網站前台、後台與資料管理放在同一個生態系裡，部署流程也相對單純。
Q5: 用 AI 打造可切版的 CMS 網站，對接案流程有什麼幫助？
最大的幫助是把提案、製作 Demo、內容上架與後續維護整合成更快的工作流。你可以先用 AI 快速完成初版，再依不同產業切換主題模板，讓業主更快看到成果，也更容易推進合作與簽約。
如果你想要了解更多 AI 自動化，或是 AI 相關應用的話，請訂閱我、關注我！
