AI 幫我做 HTML — 一頁版起手包

by N · @be.ai.curator · 2026-05-15

跟 AI 要建議滑下去就忘第一段？ 答案不是改開頭、是改結尾形狀。

下次跟 AI 對話、加一句「請給我網頁版」、配上對應的場景描述 — AI 會給你並排卡片 / 時間軸 / 儀表板 / 摺疊說明 這些剛好對應你問題的形狀。

STEP 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、2026/5/8）
• 範例頁：thariqs.github.io/html-effectiveness

核心論點：

1. 「AI 給的文字檔我不再讀了」 — 太長、太線性、滑下去就忘。改要網頁。
2. 「網頁不是 toy、是工程級輸出」 — 加上樣式跟互動可以做出可量產的儀表板 / 報告 / 原型。
3. 「同樣問題、AI 用網頁回 vs 用文字回、人類做決定的速度差很多」 — 不是品味、是短期記憶的物理限制。
4. 「我擔心讀者把這個變成一個技能名」 — 重點不是格式、是想清楚輸出物的用途。

implicator.ai 補充：

網頁贏在當下做決定、文字贏在長期存檔。

當下用網頁、存檔用文字 — 不要棄一邊。

我新的「請給 AI 哪種形狀」對照表

下次跟 AI 對話、試著加那一句 — 「請給我 HTML」 — 然後告訴我你的體感。

好奇大家有沒有開始將溝通 HTML 化？

最想知道 你第一個試的是哪個場景。

— N @be.ai.curator