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