短文約 3 分鐘

怎麼從零用 AI 架網站

我一直有一個「創作邦」網站,希望能建立一個符合我想像並能提供資源與工具給創作者的實用網站。

過去我嘗試過許多不同的工具與平台,但總是無法同時完全滿足我在功能與視覺上的要求。於是我不斷嘗試、替換工具,前段時間找到一款名為 Lovable 的 AI 工具。透過它,我得以在不到一週內、花費不到二千元的條件下,以一人之力完成「創作邦」的整個網站建置。

為什麼 Lovable 這麼厲害呢?它可以串接資料庫、能輕鬆串 API、能理解各種我想要的功能需求,並提供好看的視覺呈現。

對我而言,建置網站的過程本來是非常困難且複雜的事,但有了 AI 工具的協助,我只需要能清楚傳達需求,它就能幫我實現。

當然聽起來很簡單,實際製作時還是有很多難點,下面就來分享一些收穫。

與 AI 工具溝通的要點

逐步提出需求,避免一次過度複雜化

當你向 AI 工具提出需求時,盡量先從簡單的功能與架構開始,不要一開始就拋出太龐雜的邏輯。

當基本功能完成後,再針對不滿意之處進行優化與補充。如此一來,AI 工具較容易理解與執行,同時你也能更清楚掌握整個網站逐步成形的過程。

反覆調整與嘗試

在開發過程中,你會不斷發現新的不足之處或想到新的功能。這是正常的!你可以不斷與 AI 工具溝通,要求微調功能或介面設計。

若遇到明顯卡關時,可嘗試從不同角度提問,或移除有問題的功能後再重新要求 AI 開發。

也可以嘗試更換描述方式、重新命名功能或提供更詳細的指令,都可能讓 AI 更容易完成任務。

參考其他網站與設計

在提出要求之前,多看看其他網站的架構與設計。觀察他們如何呈現資訊、網站的規劃、如何運用互動與視覺元素,並將這些經驗與參考圖提供給 AI 參考。

我會建議多去體驗和觀察細節,知道這些功能的實際運作邏輯會更好的跟 AI 溝通,AI 在得到足夠且清晰的指引後,也比較能夠產出足夠好的成果。

學習一點程式設計或網頁設計專有名詞

這邊很推薦大家可以去找一些基礎的影片、文章來看,或是請 AI 幫你,像是請他列出網頁設計必學的基礎名詞,並請他介紹給你。

學習這些名詞的好處在於我們跟 AI 的溝通可以更精準,舉例來說,你知道網頁最下面每個分頁都固定有的區塊叫什麼嗎?那個區塊叫 footer,如果你不知道,你是不是都要描述一堆?甚至 AI 可能會搞錯,但你說 footer,他就一定能懂。

功能規劃與細節思考

前台與後台的整合

過去架設網站,以我們一般人來說,使用的服務多數都是有後台系統,我們只需要處理前台網頁長怎樣就好。

但用 AI 架設,是從 0 開始,你需要的是全盤的規劃,前台只是畫面,很多功能要能正確的執行就需要後台對應的功能。

所以這邊我們就必須要先把前後台的關係確認清楚,再請 AI 來執行,不然有時候他只會執行你跟他說的,總是在功能無法正確執行時才發現問題。

明確列出你需要的功能清單

建議在開發前先列出所有預期的功能和操作流程,例如:

你想要製作一個網站上的「Email 收集功能」,你可能要思考

-前台樣式與文案內容

-要有一個後台呈現收集名單

-設定日期篩選功能,方便篩選名單

-設定匯出功能,並規劃匯出格式,這邊就要考慮你要如何使用資料,如果要用在電子報系統,檔案匯出就適合用 CSV

-基礎的刪除功能

這些都是你需要先擬定好,再跟 AI 溝通,請他執行的,不然有時會發現功能東缺一點西缺一點。


你說 AI 架網站難,但我卻一個人,花不到二千元,六天時間內,就完成了一整個網站從零開始的建置。

你說 AI 架網站簡單,我其實不確定是否所有人用這個工具都能有滿意的效果,畢竟我是對於網站有清晰的架構,本身有一些網站架設概念,才能完成的。

但不能否認的是 AI 出現後,讓原本成本很高的事情變得簡單,人人都有機會打造自己理想中的產品或網站。