讓 AI 用網頁跟你溝通
上次你跟 ChatGPT 要建議、它給你三段文字、你滑下去就忘了第一段？ 這不是你笨、是 AI 給錯了形狀。一坨文字適合存檔、不適合你拿來做決定。
Anthropic 做 Claude Code 的工程師 Thariq Shihipar 也在講這事 — 他自己已經不讀 AI 給的文字檔、改要 AI 給網頁。他做了 一個工程師版的範例庫、我翻成「給文組 / 管理 / 不寫 code 的人」用得上的版本。
18 個我自己卡過的場景、做成能直接打開玩的網頁。 點任一個、玩一玩、想做自己的版本就複製 prompt 帶回家。
決策對比三個工具攤一起選一個
查 5 個 SaaS 分頁滑著滑著就忘了第一個。三欄並排比、點細節展開、選一個 highlight。
決策對比三個版本攤開選一個跑
週日叫 AI 規劃下週、它給一份你說太滿、改了變太鬆。攤三版本（精實/平衡/飽和）一起選。
學習導覽陌生領域的可摺疊解釋
AI 給你 300 字看完還是不懂、用 30 秒結論 + 可摺疊細節 + 名詞 hover 三層學
學習導覽用拖的學概念
左邊看文字、右邊拖 slider 看數字即時動、複利跟資產配置兩個範例
規劃時間軸六個月轉職計畫攤成時間軸
AI 給你 12 個步驟的轉職計畫、攤成可點開的月份時間軸 + 風險紅黃綠燈表
規劃時間軸下季產品上市規劃攤成時間軸
12 週上市計畫拆成 4 階段標籤、每週卡片含負責人 + 檢核點、底下風險表
個人盤點週五的週報儀表板
週五下午要交週報、打開 5 天紀錄不知從哪講起、攤成一頁全貌
個人盤點月底回頭看：時間都花到哪了
月底想知道整月過得怎樣、把記事行事曆攤成時間圓環 + 能量起伏
對話翻頁簡報跟 AI 討論完該不該換工作、做成 6 頁簡報
整個下午的對話、變成明天會議可翻頁的 6 張投影片
流程可視化該不該換工作？決策樹
AI 給你五段文字分析利弊、你還是不知道怎麼決定。畫成可點流程圖、只走自己那條路。
流程可視化把你的工作流程畫成一張可以點的圖
新同事問你工作流長什麼樣、口頭講第三步就跳針。畫成可點圖、每步寫清楚做什麼、用什麼、多久。
產品評估表5 個線上學習平台比一比
5 個平台月費 / 特色 / 適合誰一表攤開、自己點星星打分、推薦即時算給你看
視覺草稿個人品牌配色草稿
三組配色直接攤開貼上樣張看、點色塊複製色碼
視覺草稿社群貼文版型 sheet
三個 IG 版型並排比較、hover 看適用場景、點下載 SVG
互動 prototype活動報名流程走一遍
白板畫了三張草圖、講二十分鐘大家腦袋裡長的還是不一樣——攤一個可以點的版本給對方走一遍
工程師專區標註型 PR Review — 行內 diff + margin notes
PR diff 跟 review notes 同頁、嚴重度 color-coded、點哪邊另一邊高亮
工程師專區陌生 Codebase 模組地圖
把 repo 畫成 boxes + arrows、hot path 標橘、entry point 列右邊、點 box 看詳情
工程師專區給 reviewer 看的 PR 導讀
動機 → before/after → 一檔一檔導讀 → 我希望你重點看哪、reviewer 5 分鐘抓全貌
研究、本來就是給人玩的。打開、玩壞、然後做出自己的版本。