GPT製作網頁是它的強大功能之一，可以快速依照需求產生HTML原始碼。本文從最基本的1張表格開始，介紹簡單的完整流程，帶你瞭解AI如何協助設計網站。
一、貼上文字列表
很多時候會有一些條列式的資料，例如贊贊小屋線上課程平台的相關資訊，可以直接將它貼到ChatGPT的提問框中，按下右下角熟悉的箭頭按鈕。
二、AI整理成表格
不需要任何的ChatGPT問問題技巧，聰明的 AI 善解人意，完全瞭解贊贊小屋需求，馬上就幫忙「整理成一個清晰的表格」，正是想要它做的，右上角還有個很方便的「複製表格」按鈕。
三、直接貼上表格
接下來前往WordPress後台，直接將上個步驟複製的資料貼上，編輯器會自動辨識這是屬於表格資料，將它設定為適當的區塊形式。
四、網頁預覽確認
在後台編輯好了之後，瀏覽器前往預覽網頁了解狀況，可以看到確實是呈現了預期內容，ChatGPT怎麼用有發揮作用，將資料用整齊有序的表格形式呈現出來。不過同時也發現到有兩個狀況：首先第一欄的編號欄倍太寬了；再者，單純的表格沒有任何外觀樣式，總是缺少了什麼東西，看著似乎有些欠缺。
五、具體說明用途
既然是ChatGPT寫程式做的東西出了狀況，就讓ChatGPT去處理。不過其實現在AI 很聰明，在每一次回答之後，結尾都會有小小的補充，在既有的提問回答之餘，熱心詢問還可以再做些什麼。例如這裡看到的「加上課程亮點或適合對象欄位」，或者是「HTML 表格版本」。
在此是簡單提出用途和需求如下：
「這個表格貼到WordPress，設定編號欄位寬度為30px」。
六、HTML程式碼
根本不需要ChatGPT問題範例，只要清楚敍述需求，萬能AI助理馬上就設計好了程式碼，完全依照要求。即使是對於HTML沒有概念，看到其中有一行關鍵字 「width：30px」(寬度30像素)、「編號」，大概能瞭解它便是編號欄位設定為30px的程式碼：「<th style=”width: 30px; text-align: center;”>編號</th>」，跟先前第二步驟的表格一樣，點一下右上角的「複製」。
七、WordPress區塊
再進入WordPress後台，將程式碼貼到測試文章的編輯器中，它會是一個自訂HTML區塊，其中當然會有一行欄位寬度的代碼。之所以要特別注意這一行程式碼，有過設計網頁的經驗者，甚至是Excel表格製作的人都會知道，像這樣子的欄位寬度很有可能會需要修改，也許實的結果不理想，或者是資料有變更。在這些種種情況下，只要簡單將30改成50或70便是調整欄寬，就算沒有任何程式基礎，其實照樣造句就好了。
八、兩種表格樣式
實際比較前後兩張表格，即使沒有做任何外觀的改變，單純只是調整欄寬，也會讓表格更容易閱讀。
補充一下，這裡的欄寬有經過上個步驟提到的手動修改，早已經不是30px了，是在過程中有幾次的測試調整，雖然也可以簡單的ChatGPT使用攻略讓AI幫忙，但是像這樣子的操作不會很難。如果能自行簡單修改的話，會更快、更有效率，也會更符合需求。
九、GPT製作網頁
最後補充一下，贊贊小屋實際採用的表格是在外觀上做了適當調整，其實也是像ChatGPT文章改寫一樣透過問答完成，實際的提問如下：
做成有條紋與邊框的美化版表格，在WordPress裡直接套用CSS，好看又可讀。
每個人偏好風格不一樣，但同樣都能把自己的GPT製作網頁需求提交，AI設計師會盡力將你的願望全數實現。
三個提問原則
總結起來，這篇文章在利用ChatGPT設計網頁的時候有三個原則：
首先，提供的原始資料不一定要自己整理，可以直接讓 AI幫做預先處理，例如整理成表格。
再者，在ChatGPT完成草稿後，可以進一步跟它說明我想要用途，讓它再進行修改。
最後，外觀樣式的調整可以視情況自己微調，又或者是讓ChatGPT去設計整體的風格。
學會計、學Excel、學習AI工具，歡迎加入贊贊小屋社群。
報名課程：
AI活用術：1人公司與會計人的數位工具大全集
