用 AI 做官網,第一句話該怎麼說?

主題插畫:小鹿與狐狸整理網站需求紙卡與森林風格草圖

這是「用 AI 做官網」系列的第 1 篇,分類:AI 應用。第一句話要怎麼對 AI 說,才不會拿到一個「看起來很完整、卻不像我」的網站?答案是先說清楚目的,再把「喜歡的感覺」拆成 AI 做得到的條件。

先說清楚:這個網站要替我完成什麼

我的第一句指令很簡單,但它已經包含官網最重要的方向。

筆記裡的一句話
當時我這樣說:「我想要做一個個人的官網,讓大家知道我可以教什麼課、提供什麼服務。」我同時附上一個參考網站,讓 AI 先理解我要的是講師與服務邀約類型的網站。

這句話其實說了三件事:我是誰、我提供什麼、有需求的人要怎麼找到我。後來不管是加插畫、改選單,還是做聊天室,我都會回到這個目的。

如果第一句只說「幫我做漂亮的網站」,AI 會先給你一個看起來很完整的版型,卻不知道你做什麼工作、給誰看、希望對方看完做什麼。

先準備一份基本資料

開始前,我建議先列出這六件事:

  • 姓名與職稱
  • 主要服務
  • 希望接觸的對象
  • 現有作品
  • 聯絡方式
  • 最希望訪客採取的行動

資料不必一次齊全,但要把「已確定」和「待補」分開。

以我的網站來說,重要的訪客包括學校老師、行政人員、推廣教育單位、企業與設計業主。所以他們要能快速看懂課程對象、能做出的成果,以及怎麼邀約。

可以直接複製的第一句指令

可以直接使用的指令
我要做一個個人官網。我是__,提供__,主要訪客是__。我希望對方看完後能__。請先整理網站架構,再做第一版。尚未提供的經歷、合作對象與成效數字不要自行補寫。

最後一句很重要。AI 很會把空白補得像真的,你不先叫它不要編,它就可能幫你寫出不存在的經歷。

參考網站,要說明「參考哪裡」

我提供參考網站,是為了讓 AI 理解網站類型。更完整的做法,是指出你喜歡的細節,例如課程分類清楚、個人介紹有溫度,或合作入口容易找到。

這比要求「整站照抄」更容易做出適合自己的網站。

筆記裡的一句話
記住這件事:先講清楚這個網站要替我做什麼,再談好不好看。

把「喜歡的感覺」變成 AI 做得到的視覺條件

「可愛一點」對 AI 來說很模糊,要說成場景、畫風、角色和閱讀條件,它才做得出來。

我要的是森林裡的動物園

筆記裡的一句話
當時我這樣說:「風格我想要用一個動物園的感覺,有 Q 版的動物偶(蠟筆風格)。」我還希望從封面往下有視差滾動,課程與成果能橫向瀏覽。

方向確立後,我又提出了一個很重要的修正:

筆記裡的一句話
「我期待的是整個背景就是在一個森林裡面的感覺,不要是素色的加上圖片而已。」

兩句話的差異很具體。前者可能只是一般網站加上動物插圖,後者要求背景、空間、光線、植物與內容卡片一起構成完整場景。我要訪客感覺自己走進森林,而不是在看幾張被貼上去的可愛圖片。

畫風要和文字閱讀一起考慮

我同時提醒 AI:「記得注意文字是不是好閱讀的,字型幫我用源泉源體粗體。」這讓需求不只停在「可愛」,也包含中文字型、粗細和閱讀性。

森林背景很豐富,文字如果直接壓在樹葉與光影上,閱讀會很吃力。後來網站用較安定的紙張感區塊承接文字,既保留森林氛圍,文章、表單和課程資訊也有可以停留的地方。

字型名稱也要確認清楚。相近的字體或不同字重很容易混淆,最好提供指定的字型檔,並請 AI 說明實際使用的字型與替代字型。看起來效果相近,不代表一定載入了你指定的那一套。

可以直接複製的視覺風格指令

可以直接使用的指令
參考這個網站的__,但內容與角色要依我的品牌設計。主場景是__,畫風是__,角色是__。我希望背景、卡片與插畫有一致的世界觀,同時維持文章與表單的閱讀性。中文字型指定為__,請確認實際載入的字型與授權條件。先維持角色外貌、配色與比例一致。

裝飾要能解釋內容

我要求每堂課的長方形縮圖,都要有對應的圖像。例如繪本課,就是小動物在讀繪本。這比所有課程共用同一張可愛圖片更有用,訪客在讀標題之前,就能先感受到課程的大致方向。

新手可以把每張圖的需求寫成「角色正在做什麼」,例如小鹿整理筆記、狐狸練習簡報、動物夥伴一起研究防災地圖。畫面的動作,應該和課程的核心任務有關。

筆記裡的一句話
記住這件事:用場景、畫風、角色與閱讀條件,取代一句「做可愛一點」。

整理課程、服務與作品:讓訪客一眼判斷要不要邀你

內容整理得越貼近真實的工作樣貌,邀課單位越快判斷適不適合。

讓網站逐漸接近真實的工作樣貌

我先提供課程介紹,請 AI 擴充自主學習、學習科學、議題探索、專案製作等方向,也把過去防災 AI 網站的教學經驗放進討論。

接著,我修正了課程的稱呼:

筆記裡的一句話
當時我這樣說:「課程你現在是用『系列』和『單元』,但我一個系列就是一堂課,所以改個敘述。」

AI 可以把內容整理得很有架構,但它用的分類名稱,不一定符合你的實際授課方式。訪客如果以為一個主題要上很多堂課,就可能對合作產生錯誤想像。

設計接案的部分,我也列清楚能做的內容:社群輪播圖、網頁 Banner、商品詳情頁、海報文宣、網頁設計、簡報製作,以及其他可討論的需求。

不要只寫課程名稱

對學校而言,「AI 課程」太廣了。後來我在課程卡補上適合對象、建議安排、設備準備與成果方向,邀課單位可以更快判斷。

時間還沒定案,就寫「依需求規劃」;筆電只是實作建議,就明確標示為建議。不要為了讓每張卡片看起來整齊,就替所有課程填入同一個時數,或保證同樣的成品。

可以直接複製的課程與成果指令

可以直接使用的指令
請依提供的資料建立課程卡,列出對象、時數、設備與成果。這些作品分別屬於個人作品、學生作品與示意圖,請清楚標示,避免混淆。內容未定案的地方保留可討論。

作品要有合適的觀看方式

我提供了平面作品的雲端資料夾,並指定:同一個資料夾有多張圖時,合成同一個輪播,讓訪客滑動觀看。繪本作品則放進繪本課程裡,成為理解課程與創作風格的例子。

這裡還有一個內容判斷:個人作品、學員作品與課程成果示意,要清楚區分。我自己的繪本可以展示創作能力,但不能讓人誤以為它是學生在某堂課完成的成果。

筆記裡的一句話
記住這件事:課程卡要讓邀課單位一眼判斷,還沒定案的條件就寫「可討論」。
← 回到AI 應用書架探索相關課程 ↗