AI 寫網站 prompt 範本大全 2026｜10 個一鍵複製的實戰 prompt（Hero／About／Portfolio／FAQ）

幫我寫一個首頁 hero 區的完整 HTML + CSS。

品牌資訊：
• 品牌名：[你的品牌名]
• 主色：[#XXXXXX]
• 輔色：[#XXXXXX]
• 字型：Noto Sans TC（繁中網站慣用）
• 品牌調性：[專業／親切／科技／溫暖]

設計需求：
• 左側：headline（一句話講清楚你做什麼）+ subhead（30 字內補充）+ 兩個 CTA（主「[主要行動]」、次「[次要行動]」）
• 右側：產品截圖框架或情境圖
• 背景：淺色漸層 + 微妙幾何圖形（不要太搶戲）
• 響應式：手機版改為單欄堆疊、文字置中

技術約束：
• 純 vanilla HTML/CSS、不用 framework
• 所有 selector 用 scoped class（如 .my-hero）、不用 universal selector
• inline style 或 <style> tag 都可以、不要外連 CSS

產出：完整 HTML 一塊、配上每個元素的設計理由。

幫我寫 About Us 頁的完整 HTML + CSS。

品牌資訊：
• 品牌名：[你的品牌名]
• 創辦人：[你的名字]
• 創立年份：[YYYY]
• 主色／輔色：[#XXX / #XXX]
• 故事核心：[一句話講為什麼創辦這個品牌]

頁面結構：
1. Hero 區（含品牌 1 句話 mission）
2. 起源故事（300 字、第一人稱、講為什麼開始做）
3. 核心理念 3 點（每點 1 標題 + 50 字說明）
4. 團隊介紹（3-5 人、每人照片框 + 職稱 + 1 句話）
5. 數字證明（3 個關鍵數字、如「服務 100+ 客戶」）
6. CTA：到「服務頁」或「聯絡我們」

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 響應式：手機單欄、平板兩欄、桌面三欄

產出：完整 HTML、配每段設計理由。

幫我寫案例展示頁的完整 HTML + CSS（grid layout）。

品牌資訊：
• 品牌名：[你的品牌名]
• 主色／輔色：[#XXX / #XXX]
• 案例類型：[我做的服務／設計／顧問項目]

頁面結構：
1. 簡短說明（1 段、解釋這是什麼類型的案例）
2. 案例 grid：3 欄、每欄包含縮圖框架 + 案例標題 + 客戶產業 + 1 句成果（如「轉換率提升 40%」）+ 「查看案例」按鈕
3. 共 6-9 個案例（你會自己改填內容）
4. 文末 CTA：「想看更多？聯絡我們」

設計細節：
• hover 效果：滑鼠移上案例卡片、輕微浮起 + 陰影加深
• 縮圖框架用淺灰色 placeholder（讓使用者後來換真實圖片）
• 響應式：手機單欄、平板兩欄、桌面三欄

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 不要任何 JavaScript（hover 用純 CSS）

產出：完整 HTML、配每段設計理由。

幫我寫活動報名 landing page 的完整 HTML + CSS。

活動資訊：
• 活動名稱：[活動名]
• 日期時間：[YYYY-MM-DD HH:MM]
• 地點：[線上／實體地址]
• 講師／主辦：[名字]
• 適合對象：[誰會來？1 句話描述]
• 主色／輔色：[#XXX / #XXX]

頁面結構（單頁、由上到下）：
1. Hero：活動名稱大字 + 日期地點 + 主 CTA「立即報名」
2. 為什麼參加：3 點重點、每點 1 icon + 標題 + 50 字
3. 講師介紹：照片框架 + 1 段背景 200 字
4. 活動議程：時間表（4-6 個段落）
5. 學員見證：2-3 個過往參加者引述（含名字 + 職稱）
6. 常見問題：4-5 題 FAQ
7. 文末再次 CTA：「立即報名」+「還有 X 個名額」

設計細節：
• 緊迫感：頂部固定 banner 「剩餘 X 名」（你會自己改數字）
• 視覺強調 CTA 按鈕、整頁有 3 個 CTA 都連到報名表單

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 響應式：mobile-first

產出：完整 HTML、配每區塊設計理由。

幫我寫服務介紹頁的完整 HTML + CSS。

服務資訊：
• 服務名：[服務名]
• 服務類型：[顧問／代操／訓練／代工]
• 適合誰：[目標客群 1 句話]
• 不適合誰：[反向定位 1 句話]
• 價格區間：[NT$XX,XXX 起]
• 主色／輔色：[#XXX / #XXX]

頁面結構：
1. Hero：服務名 + 1 句話價值主張 + CTA「諮詢預約」
2. 適合的客戶 vs 不適合的客戶（兩欄對比、坦誠寫不適合誰）
3. 服務內容：3-5 個面向、每個面向 1 標題 + 100 字說明
4. 服務流程：4-6 步驟（從諮詢到結案）
5. 案例成果：1-2 個典型案例的成果摘要
6. 價格與方案：基本／進階／客製 三欄
7. 常見問題 5 題
8. 文末 CTA：諮詢預約表單連結

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 價格表用 grid layout、響應式

產出：完整 HTML、配設計理由。

幫我寫商品介紹頁的完整 HTML + CSS。

商品資訊：
• 商品名：[商品名]
• 類型：[實體商品／虛擬商品／訂閱服務]
• 主色／輔色：[#XXX / #XXX]
• 主要價值：[3 個賣點、每個 5-10 字]
• 售價：[NT$XXX]

頁面結構：
1. 商品大圖（佔上方 60% 視覺）+ 商品名 + 價格 + 加入購物車 CTA
2. 3 個核心賣點（icon + 標題 + 50 字說明）
3. 商品細節：規格、材質、尺寸（適用實體商品）/ 功能列表（適用虛擬商品）
4. 真實使用情境：2-3 張情境圖框架 + 對應描述
5. 用戶評價：5 個短評 + 整體評分
6. 常見問題 4 題（運送、退換、保固）
7. 推薦相關商品（3 件）
8. 文末再次加入購物車 CTA

設計細節：
• 商品圖支援多圖切換（用純 CSS、不要 JS）
• 加入購物車按鈕視覺最強、整頁出現 2-3 次

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 響應式：手機可垂直滑動、桌面左圖右資訊

產出：完整 HTML、配設計理由。

幫我寫 FAQ 區塊的完整 HTML + CSS（手風琴展開效果、純 CSS 不要 JS）。

主題：[FAQ 主題、如「課程相關」、「金流相關」]
品牌主色／輔色：[#XXX / #XXX]
FAQ 數量：[8-10 題]

每一題的結構：
• 問題（H3、加上問號）
• 答案（150-250 字、含具體數字、具體做法）
• 預設收起、點擊問題展開答案

設計細節：
• 用 <details> + <summary> 標籤實作（純 HTML5、無 JS）
• 展開時有箭頭旋轉動畫（純 CSS transition）
• 第一題預設展開

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 字體可讀、行高 1.7
• 響應式：手機左右 padding 16px、桌面 padding 32px

特別要求：
• 問題與答案要寫得具體、避免「請聯繫我們」這種廢話
• 答案要有實際數字（如「7 天內」、「5% 手續費」、「3 步驟」）

產出：完整 HTML（含我可以替換的範例 8 題）、配設計理由。

幫我寫聯絡頁的完整 HTML + CSS。

聯絡資訊：
• Email：[[email protected]]
• 電話：[02-XXXX-XXXX]
• LINE：[@yourbrand]
• 地址：[完整地址]
• 主色／輔色：[#XXX / #XXX]

頁面結構：
1. Hero：「聯絡我們」標題 + 1 句歡迎語
2. 聯絡資訊區（左）：Email、電話、LINE、地址、營業時間（each 加 icon）
3. 聯絡表單（右）：姓名、Email、電話（選填）、訊息主旨、訊息內容、送出按鈕
4. Google Maps 嵌入（可留位、之後手動加）
5. 預期回覆時間說明（如「我們會在 24 小時內回覆」）

設計細節：
• 兩欄佈局：手機單欄、桌面左右各一半
• 表單欄位有 placeholder 提示
• 送出按鈕視覺強調

技術約束：
• 純 vanilla HTML/CSS、scoped class
• 表單用 <form> 標籤但 action 留空（之後接秒站表單）

產出：完整 HTML、配設計理由。

幫我寫客戶見證輪播區塊的完整 HTML + CSS。

需求：
• 主色／輔色：[#XXX / #XXX]
• 見證數量：[6-9 個]

每個見證的結構：
• 客戶照片框架（圓形或方形）
• 引述文字（80-150 字、加上引號圖示）
• 客戶名字 + 職稱 + 公司名

設計細節：
• 桌面版：3 欄 grid、所有見證同時顯示
• 手機版：單欄 + 水平捲動（用純 CSS scroll-snap）
• 不要用 JavaScript carousel
• hover 效果：滑鼠移上某個見證、輕微浮起

技術約束：
• 純 vanilla HTML/CSS、scoped class
• scroll-snap 用 CSS 實作（mobile）
• 響應式：手機單欄滑動、平板兩欄、桌面三欄

特別要求：
• 引述文字寫得「真實」（不要太完美的廣告語氣）
• 給我 6 個範例見證、每個產業背景不同

產出：完整 HTML、配設計理由。

幫我寫 3 欄優勢呈現區塊的完整 HTML + CSS。

需求：
• 主色／輔色：[#XXX / #XXX]
• 3 個優勢主題：[優勢1]、[優勢2]、[優勢3]

每個 card 的結構：
• 上方：icon（用 SVG inline 或 Unicode 表情符號）
• 中間：標題（H3、20-24px）
• 下方：說明文字（80-120 字）
• 底部：「了解更多 →」連結（hover 時箭頭右移）

設計細節：
• 桌面版：3 欄等寬 grid
• 平板版：可改 2 欄 + 1 欄置中
• 手機版：單欄堆疊
• 卡片背景：白底、微陰影、圓角 12px
• hover 效果：陰影加深、卡片浮起 4px

技術約束：
• 純 vanilla HTML/CSS、scoped class
• hover 動畫用 CSS transition
• 不要 JavaScript

產出：完整 HTML、配設計理由。