15d • 公開論壇
用 Claude 重建了整個網站（心得＆小技巧分享）
最近我用 Claude 重建了整個網站，實際用 AI 做網頁設計的時候，發現風格其實是次要的，它都能做到很好。
反而真正會遇到問題的是：結構面。
比如當我要它把東西放在左側的時候，它很容易會放得太靠近邊緣，導致畫面看起來很不舒適。
但當你叫它往右的時候，它很容易又會偏到另一邊去，或者是沒有辦法精準地落在你想要的位置上。
還有遇到不少小問題，這邊分享一下後來我是怎麼做的！（運用以前學過一點的網頁設計）
💡小建議！
在你開始做任何風格設置之前，先把結構設置好。
▌結構：設置網頁邊界▐
第一個是比較簡單的方式：
叫它標座標給你，你再看著圖告訴它，你想要放在哪一個座標位置上。
第二個是跟它說：
利用 Grid（網格）或 Flexbox（彈性）布局，來決定畫面要分成幾欄。
〚💡設計白話文〛
Grid（網格）：就像一個個棋盤格，每個人都要站在格子裡。
Flexbox（彈性）：就像一條排隊的人龍，人多的時候會擠一擠，人少的時候中間會有空間。
然後後續搭配 gap、margin 和 padding 去設置欄與欄之間的間距與留白。
這些分別對應不同位置的間距，但講起來有點複雜，可以直接口語跟 AI 說「上面太窄」就好 xD
也可以直接說：「請幫我加上適當的 padding / gap / margin，不要讓物件貼邊。」
簡單來說，我們先限制了「網頁可以放東西的位置」， AI 就不會把東西放到邊疆。
▌結構：設置文字層級▐
再來，我遇到的是文字層級的問題。
AI 有時候會加一些裝飾字或是一些小標籤來豐富畫面，但在它沒有先設定好文字層級的情況下，你的整個網頁可能會出現十幾種不同的字級大小。
也就是說，你的網站文字會忽大忽小，有時候甚至會小到看不清楚，這種情況很常發生。
建議你可以先讓 AI 制定以下層級：
- H1~H5 標題（要到 H6 也可以）
- 一般文字大小（電腦 ≥16pt／手機 ≥14pt）
- 註記 / 標籤（小於一般文字）
先強行規範它可以使用的字級大小，它之後就比較不會突然有時候用 13，有時候用 18。
▌風格：整體設計▐
基本上有剛剛前面做好的結構，就不太會跑版。
在這個情況下，我們再去調整風格設計，呈現出來的網頁會比較接近成品。
風格部分，你可以先提供一些 prompt，或者是直接告訴它你想要什麼樣的風格、什麼樣的色彩等等，然後再根據生成結果微調。
比如：
• Apple 的極簡風格（夠知名不用描述）
• 像這個範例網站（貼上連結）
• 別人分享的 Prompt（貼上指示詞）
生完初稿後，再來進行細節微調，接下來分享我跟它討論的風格內容～
▌風格：顏色設計▐
我的品牌色是大地色系，但之前我一直覺得缺乏一個強調色，所以這次色系有針對這件事調整。
討論後我挑選了一個暖色調橘色，當作強調色。
這個顏色跟品牌的大地色系很接近，但又足夠亮、對比夠強，在一片咖啡色中能跳出來，並達到強調重點的效果。
會建議你在挑選色彩的時候，可以從這兩點出發：
1. 你的品牌色
2. 用色彩心理學挑選配色
在配色部分，我會建議：主色系+無彩色（黑灰白）+強調色。
這樣子其實就很夠用，不需要額外的顏色了（主色系比較明艷的顏色也可以直接拿來當強調色）。
像我這個主色調就是大地色系，因為是同類型的顏色，即使深淺度不同，但看起來還是很協調。
因為我是以現有網站改色，所以顏色部分沒遇到太大問題，所以大概就分享到這邊！
▌風格：字體▐
基本上主要簡單分類就是三種：無襯線、有襯線、手寫字。
簡單來說：
• 無襯線：比較現代、有簡約感
• 有襯線：比較優雅、復古、傳統
• 手寫字：個性強烈，通常拿來做裝飾
這部分就是挑選你喜歡的字體就好，但是要注意一下字體的版權。
建議大家去挑免費、可商用的字體，你可以在 Google Fonts（https://fonts.google.com/）裡挑選，全部都是免費可用字體，而且也能雲端載入。
▌風格：區塊物件▐
我自己習慣會把物件的風格做統一的處理，比如說列表、表格、一些 highlight，還有步驟類的這些常用樣式，我都會先一起進行設置。
這樣可以確保你的風格統一，看起來像是同一個品牌。
至於具體可以設定什麼東西，其實還蠻細節的，包含：
1. 區塊造型：
(a) 框框要不要導圓角？
(b) 圓框要不要有線條？
(c) 後面要不要壓陰影？
(d) 要不要加圖示裝飾？
2. 列點設計：
(a) 列點要不要有背景框？
(b) 列點前面的標記換樣式？
3. 文字強調：
(a) 怎麼樣強調你的文字？
(b) 在底下畫線？螢光筆效果？
總之，可以設置的細節非常多，這些只是舉例而已，可以依照你個人偏好調整。
▌收尾：調整▐
基本上到這邊，你的網頁應該就已經有蠻清楚的樣式了。
接下來就是調整一些文案，以及一些細節你不喜歡的部分，像是想不想要加上動態效果或者是一些裝飾的元素。這樣基本上你就可以獲得一個不錯的網站。
調整完之後可以再進一步，讓它存成品牌規範，讓以後製作電子書、簡報，它都能使用相同風格！
以後就能無痛產出大部分內容啦～
有興趣的話，也可以來我的網站看看新設計🤣！https://storyofdream.com/
【也想問問大家】用 AI 最常遇到哪些問題？
（我覺得它有時候很愛偷懶，一直說這個明天再做 XD）
9
10 comments
用 Claude 重建了整個網站（心得＆小技巧分享）
Leaderboard (30-day)
1
+554
2
+495
3
+371
4
+191
5
+162
Powered by