不用會寫程式，跟著這 5 個步驟，你也可以
下面附贈一份完整的傳送門範本，包含頁首（大頭貼、社群連結）和這 3 種區塊。先看看範本效果，再把整份範本複製貼給 AI，讓它先「學會」整個網頁長怎樣；之後就不用再貼程式碼了，直接跟 AI 說要用哪個區塊、放什麼內容就可以。
查看範本實際效果 →<!-- 傳送門完整範本：這是一份包含頁首和 3 種區塊的完整網頁，
請先學會這個網頁的結構和樣式，
之後我會直接跟你說要用哪個區塊、放什麼內容 -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>你的名字｜傳送門</title>
<style>
:root{--paper:#FCF9F3;--card:#FFFFFF;--ink:#2B2B2B;--muted:#767676}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.8}
.wrap{max-width:480px;margin:0 auto;padding:44px 22px 40px}
a{text-decoration:none;color:inherit}
/* 頁首 */
.hero{text-align:center;margin-bottom:30px}
.avatar-wrap{width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto;display:block}
.avatar{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.2);display:block}
.hero h1{font-size:22px;font-weight:700;margin-top:14px}
.hero p{font-size:13px;color:var(--muted);margin-top:4px}
.socials{display:flex;justify-content:center;gap:16px;margin-top:14px}
.socials a{width:36px;height:36px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.socials svg{width:16px;height:16px;fill:#000}
/* 分區標題 */
.sec{margin:30px 0 12px;text-align:center;font-size:16px;font-weight:700}
/* 區塊 1：文字型・清單樣式（適合放多個連結） */
.app-list{display:flex;flex-direction:column;gap:12px}
.app-card{display:flex;align-items:center;gap:15px;background:#fff;border-radius:16px;padding:18px}
.app-ic{flex:none;width:54px;height:54px;border-radius:16px;background:#F0F0F0;display:grid;place-items:center;font-size:22px}
.app-txt{flex:1}
.app-txt b{display:block;font-size:16px;font-weight:600}
.app-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.app-card .arr{flex:none;font-size:18px}
/* 區塊 2：圖片型・大圖卡片（適合單一課程或活動） */
.feature{position:relative;display:block;border-radius:16px;overflow:hidden}
.feature img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#ddd}
.feature .badge{position:absolute;top:14px;left:14px;background:#000;color:#fff;font-size:12px;padding:5px 14px;border-radius:20px}
.feature .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;font-size:14px;text-align:center}
/* 區塊 3：四宮格・商品陳列（適合同時展示多個商品或作品） */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid4 a{display:block;border-radius:14px;overflow:hidden;background:#fff}
.grid4 img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#ddd}
.grid4 .name{display:block;padding:8px 10px;font-size:13px;font-weight:600;text-align:center}
/* 頁尾 */
.foot{text-align:center;margin-top:36px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);font-size:11px;color:var(--muted)}
</style>
</head>
<body>
<div class="wrap">
<!-- 頁首：大頭貼、名字、簡介、社群連結 -->
<header class="hero">
<span class="avatar-wrap"><img class="avatar" src="assets/avatar.png" alt="你的名字"></span>
<h1>你的名字</h1>
<p>一句簡短的自我介紹</p>
<div class="socials">
<a href="IG連結" target="_blank" aria-label="Instagram">
<svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 3.9a5.9 5.9 0 100 11.8 5.9 5.9 0 000-11.8zm0 9.7a3.8 3.8 0 110-7.6 3.8 3.8 0 010 7.6zm7.4-9.9a1.4 1.4 0 11-2.8 0 1.4 1.4 0 012.8 0z"/></svg>
</a>
<a href="FB連結" target="_blank" aria-label="Facebook">
<svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z"/></svg>
</a>
<a href="YouTube連結" target="_blank" aria-label="YouTube">
<svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.5A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.5a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.5 15.5v-7l6.3 3.5-6.3 3.5z"/></svg>
</a>
<a href="mailto:你的信箱" aria-label="Email">
<svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4.2l-8 5-8-5V6l8 5 8-5v2.2z"/></svg>
</a>
</div>
</header>
<!-- 區塊 1：文字型・清單樣式 -->
<div class="sec">分區標題文字</div>
<div class="app-list">
<a class="app-card" href="連結網址" target="_blank">
<span class="app-ic"><img src="assets/icon-notebook.png" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:16px;"></span>
<span class="app-txt">
<b>標題文字</b>
<span>一段簡短說明</span>
</span>
<span class="arr">→</span>
</a>
</div>
<!-- 區塊 2：圖片型・大圖卡片 -->
<div class="sec">分區標題文字</div>
<a class="feature" href="連結網址">
<img src="assets/feature.png" alt="說明文字">
<span class="badge">標籤文字</span>
<span class="cap">圖片下方說明文字</span>
</a>
<!-- 區塊 3：四宮格・商品陳列 -->
<div class="sec">分區標題文字</div>
<div class="grid4">
<a href="連結網址"><img src="assets/grid-1.png"><span class="name">筆記本</span></a>
<a href="連結網址"><img src="assets/grid-2.png"><span class="name">帆布袋</span></a>
<a href="連結網址"><img src="assets/grid-3.png"><span class="name">馬克杯</span></a>
<a href="連結網址"><img src="assets/grid-4.png"><span class="name">香氛蠟燭</span></a>
</div>
<!-- 頁尾 -->
<footer class="foot">
<p>© 你的名字</p>
</footer>
</div>
</body>
</html>
建議把這幾件事講清楚，AI 生成的結果會更準確：
直接用你自己的話講就可以，例如：
記得先完成上一步「把模板複製給 AI」，這裡就不用再重複貼程式碼，直接用文字說明要用哪個區塊、放什麼內容即可。
AI 生成第一版之後，通常不會一次就完全滿意，這是正常的。看到成果之後，哪裡不喜歡就直接跟 AI 說：
不用懂程式碼，用平常講話的方式描述你想要的改變就好，AI 會直接幫你修改，重複這個步驟直到滿意為止。
如果不知道要改成什麼樣子，也可以直接請 AI 給建議，不用自己想破頭。例如背景顏色，可以說：
AI 會列出幾種不同的配色給你比較，選一個喜歡的就好，其他區塊（例如字體、排版）也可以用同樣的方式請 AI 給建議。
如果是用一般 ChatGPT 網頁對話，沒辦法直接操作你的電腦，請用下面的手動步驟：
index.html 檔案index.html 拖進去上傳教學來源
兔子 @rabbitdesignlife