# HTML 對話術 — 18 個提示詞模板速查表（給工作中跟 AI 一起做決策的人）
> by N · @be.ai.curator · 2026-05-15
跟 AI 要建議滑下去就忘第一段？
答案不是改開頭、是改結尾形狀。
下次跟 AI 對話、加一句「請給我網頁版」、配上對應的場景描述 — AI 會給你**並排卡片 / 時間軸 / 儀表板 / 摺疊說明** 這些剛好對應你問題的形狀。
---
## 18 個完整對話起手式（直接複製貼給 AI）
### 比較選項
**1. 並排方案對比（3 優 / 3 缺 / 適合誰）**
> 我正在比較 [A / B / C] 三個 [軟體 / 提案 / 房型]。請給我一張並排網頁、三張卡片並排放、每張卡片包含：標題、3 個優點（用 ✓）、3 個缺點（用 ✗）、一行「適合誰」的描述。卡片寬度等寬、視覺對齊清楚、用橘紅色 `#d4623b` 為主色。
**2. 加權評分表（自動填欄）**
> 我要評估 [N 個方案]。請給我一張網頁、列出評估維度（[功能 / 價格 / 學習曲線 / 整合度]）、每個方案在每個維度給 1-5 分、最右一欄自動算加權總分、總分高的列在最上面。
---
### 學陌生主題
**3. 摺疊式問答（5 題、由淺到深）**
> 我想了解 [陌生主題]。請給我一張網頁、由淺到深列 5 個我可能會問的問題、每題預設只看到問題、點開才看答案。第一題最基本、第五題進階。
**4. 帶詞彙表的網頁（術語滑過顯示）**
> 我在學 [主題]。請給我一張網頁、主文用流暢段落寫、所有專業術語底部加底線、滑鼠滑過顯示白話解釋。網頁底部附完整詞彙表。
---
### 規劃時間軸
**5. 三個月計畫（含里程碑 + 風險）**
> 我下季要推 [三件事]。請給我一張網頁、橫式時間軸、三條 swim lane（每件事一條）、橫軸是 12 週、每條 lane 上標里程碑（用菱形）、高風險週用警告三角形標出來。
**6. 雙視圖網頁（左總覽 右細節）**
> 我有 [N 個專案] 同時推。請給我一張網頁、左半是垂直時間軸概覽（只顯示日期 + 標題）、右半是被選中那個專案的詳細卡片（描述 / 負責人 / 狀態 / 卡關）。點左邊任一項、右邊內容切換。
---
### 個人盤點 / 週報
**7. 一頁式週報儀表板**
> 我這週做了 [流水帳貼上]。請整理成一張儀表板網頁、上方一行三個指標大數字（例：完成項數 / 卡關項數 / 滿意度）、中間 grid 列「已完成」「進行中」「卡關」三欄、每欄是 card 形式、底部一個一句話本週反思。
**8. 一週時間軸 + 心情標記**
> 我這週發生 [一連串事件 + 情緒]。請給我一張網頁、橫式時間軸、每天一個欄位、每個事件是一個小卡片、心情用 emoji 標（😀 / 😐 / 😟）、底部統計一週情緒分佈。
---
### 把對話變開會材料
**9. 把這份討論變 10 頁簡報**
> 把上面這份討論變成 10 頁可翻頁的網頁簡報。每頁一個重點 + 一個圖示 + 兩三行說明。鍵盤左右鍵切頁、底部顯示「X / 10」進度。色調走 [你的色票]。
---
### 流程可視化
**10. 可點流程圖（滑過顯示解釋）**
> 我要解釋 [工作流 / 決策邏輯]。請給我一張網頁、用向量圖畫流程、每個節點用方框、節點之間用箭頭、滑鼠滑過任一節點顯示詳細說明氣泡。
**11. 決策樹網頁（葉節點是建議）**
> 我要幫讀者做 [情境決策]。請給我一張決策樹網頁、根節點是初始問題、每個分支是條件、葉節點是具體建議。點分支會展開下一層。
---
### 產品評估表
**12. 五工具對比表（含分數欄）**
> 我要比較 [5 個工具]。請給我一張對比表網頁、橫軸是工具、縱軸是維度（[功能 / 價格 / 易用度 / 整合 / 社群]）、每格填具體值或 ✓ ✗、最後一列自動算總分。
---
### 視覺草稿
**13. 三種配色的草稿圖**
> 我在設計 [產品 / 簡報 / 海報]、想試三種配色。請給我一張網頁、三個向量草稿並排、每個用不同配色（[配色 1 / 配色 2 / 配色 3]）、底部列每個配色的色票跟使用情境建議。
---
### 互動原型
**14. 帶動效的原型**
> 我想 demo [互動概念]、用文字描述不出感覺。請給我一張網頁、實作 [滑過改變顏色 / 點擊展開卡片 / 拖拉排序] 之類的互動、不用接後端、純前端就好。
---
### 工程師專區（精選 Thariq 原作中譯）
**15. 標註式程式碼審查**
> 這是一個 PR 的差異 [貼程式碼]。請給我一張網頁、左邊顯示差異（紅綠標示）、右邊每行可加註解、scroll 同步。
**16. 模組依賴圖**
> 這是專案的檔案結構 [貼 tree]。請給我一張網頁、用向量圖畫模組依賴關係、節點是模組、邊是引用關係、可拖拉、滑過顯示模組描述。
**17. 除錯紀錄**
> 我剛 debug 了 [某個 bug]、過程是 [貼步驟]。請整理成一張網頁、像一份偵探筆記、每個假設一張卡片（含「我以為...」「實際發現...」「下一步」）、按時間順序。
---
### 邀請投票
**18. 你想看哪個範例先 ship？**
> 還想看哪一類範例？留言告訴我、我把投票最多的那類做進下一波。
---
## 我自己用的三個接力動作
光知道 18 個對話起手式還不夠、第一版出來通常不會剛好對齊你想要的。三個動作讓你接力修到對。
### 動作一：講「情境 + 限制 + 形狀」三件套
> 我在 [情境]、限制是 [限制]。請給我一張 [形狀] 的網頁。
三件套缺一不可。
- 只講情境沒講形狀 → AI 預設給你文字
- 只講形狀沒講限制 → AI 用它腦補的限制、出來的不對
- 三個一起講、AI 才能對齊你心裡的版本
### 動作二：改特定點記得加「其他保持」
第一版不滿意？指明要改哪一點：
> 上一版的 [元素] 太擠 / 太空 / 顏色不對。改成 [具體調整]、**其他保持**。
關鍵在「其他保持」四個字。
- 少了這四個字 → AI 把整張網頁重畫、連你滿意的部分都改掉
- 加了這四個字 → AI 只改你指定的點、其他維持
### 動作三：要求網頁底部附「這張網頁的生成提示」
這招是重點 ——
> 最後在網頁底部加一個摺疊區、放這張網頁的生成提示、讓我下次可以直接複製貼用。
AI 會把它**自己**剛才用來生這張網頁的提示攤給你看。
- 下次你不用重新想怎麼問
- 直接複製這段提示、改幾個字（換情境、換限制）、貼給 AI 就好
我自己做了 18 個範例就是用這招累積出來 — 每次都讓 AI 把它的提示自己攤給我看、我整理成這份速查表。
---
## 進階用法：怎麼把跟 AI 的討論變成可以給人看的東西
跟 AI 討論完一個專案、整段對話散在聊天紀錄裡。要給老闆 / 同事 / 客戶看的時候、你不能把整段對話貼過去。
我的做法 ——
> 把上面這份討論變成 10 頁可翻頁的網頁簡報。每頁一個重點 + 一個圖示 + 兩三行說明。鍵盤左右鍵可以切頁、底部顯示「X / 10」進度。
它把整段討論濃縮成 10 頁、我打開直接給對方看、或截圖傳。
過去要花半小時自己整理、現在 30 秒。
---
## Thariq Shihipar 原文重點中譯
來源：
- X 文（[@trq212](https://x.com/trq212/status/2052811606032269638)、2026/5/8）
- 範例頁：[thariqs.github.io/html-effectiveness](https://thariqs.github.io/html-effectiveness/)
核心論點：
1. **「AI 給的文字檔我不再讀了」** — 太長、太線性、滑下去就忘。改要網頁。
2. **「網頁不是 toy、是工程級輸出」** — 加上樣式跟互動可以做出可量產的儀表板 / 報告 / 原型。
3. **「同樣問題、AI 用網頁回 vs 用文字回、人類做決定的速度差很多」** — 不是品味、是短期記憶的物理限制。
4. **「我擔心讀者把這個變成一個技能名」** — 重點不是格式、是想清楚輸出物的用途。
implicator.ai 補充：
> **網頁贏在當下做決定、文字贏在長期存檔。**
當下用網頁、存檔用文字 — 不要棄一邊。
---
## 我新的「請給 AI 哪種形狀」對照表
| 情境 | 該要哪種形狀 | 為什麼 |
|------|------------|------|
| 比較選項（軟體 / 提案 / 房型） | 並排卡片 + 評分欄 | 視覺對齊、不用滑動 |
| 多步驟規劃 | 時間軸 + 里程碑 | 看到全貌、不漏步驟 |
| 個人盤點 / 週報 | 一頁儀表板 | 指標 / 完成 / 卡關一眼看完 |
| 學陌生主題 | 摺疊式問答 + 詞彙表 | 由淺到深、不必背術語 |
| 把對話變開會材料 | 翻頁簡報 | 打開直接報、不用整理 |
| 流程 / 決策樹 | 可點流程圖 | 滑過顯示細節、不用讀文字 |
| 純對話 / 創意發想 | **還是文字** | 不要過度工程 |
| 存檔給之後的 AI 自己讀 | **還是文字** | AI 母語、跨對話最省事 |
---
下次跟 AI 對話、試著加那一句 — **「請給我 HTML」** — 然後告訴我你的體感。
好奇大家有沒有開始將溝通 HTML 化？
最想知道 你第一個試的是哪個場景。
— N
[@be.ai.curator](https://www.threads.com/@be.ai.curator)