# 策展 · X (Twitter) 🔥🔥🔥🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：Notion (@NotionHQ) · 平台：X (Twitter) · 日期：2026-07-02
> 原始來源：https://x.com/NotionHQ/status/2072354853821755822
## 中文摘要
Notion 推出 HTML 區塊功能，讓使用者能直接在頁面上建立並與互動式內容協作。
**核心功能與應用**
Notion 新增的 HTML 區塊允許使用者在筆記中嵌入互動式元件，並透過 AI 即時生成與調整。這項功能打破了傳統靜態文件的限制，讓團隊能直接在 Notion 頁面上進行以下操作：
- **互動式視覺化**：使用者可透過 `/html` 指令插入區塊，並透過示範畫面中選用的 AI 模型（畫面顯示為 GLM 5.2），將複雜的資料或概念轉化為互動式時間軸、地圖或知識圖譜。例如，透過 AI 修改時間軸事件或調整地圖配色，讓資訊呈現更具彈性。
> 這段影片展示了如何在 Notion 筆記中透過 HTML 區塊嵌入互動式時間軸與地圖，並利用 AI 更新與調整內容。
- **資料重組與分析**：AI 助理能分析會議記錄（如 Customer Meeting Transcripts）並自動生成業務洞察報告。在示範中，AI 針對 51 通會議記錄進行分析，產出包含功能需求排行（如 Linked databases & rollups 獲 18 次請求）、交易停滯原因及銷售管道回顧的互動式儀表板。
> 這段影片展示了如何利用 AI 工具在 Notion 平台中快速分析會議記錄並生成業務洞察報告。
- **原型設計與教學**：使用者可將產品需求文件（PRD）或 GitHub 專案（如 `zen-garden`）交由 AI 處理，自動生成輕量級原型或互動式教學頁面。AI 會讀取 `package.json`、`main.js` 等程式碼檔案，並產出包含 3D 視覺原理說明、參數調整滑桿以及即時測驗的互動頁面，讓團隊在進入 Figma 設計前就能先行測試與回饋。
> 透過 AI 自動生成技術文件與互動式教學頁面的流程演示。
**技術整合與操作流程**
這項功能強調「在頁面上直接互動」的體驗，透過 AI 代理將原本分散的資料轉化為可操作的工具：
1. **資料轉換**：將雜亂的資料庫、試算表或會議筆記，透過 AI 重新混合（remix）成簡報、儀表板或互動式報告。
2. **程式碼轉譯**：AI 系統能自動瀏覽 GitHub 儲存庫，解析程式邏輯並生成對應的 HTML 說明文件，使用者可直接在 Notion 內調整參數（如 ISO TILT、SPLIT、CONTRAST）觀察即時渲染效果。
3. **互動式知識圖譜**：透過 AI 將草圖轉換為 `knowledge_graph_prototype.html`，使用者可透過搜尋、篩選與節點懸停互動，快速瀏覽包含「User research」、「Team & rituals」等關聯資訊。
> 這段影片展示了如何在 Notion 筆記軟體中使用 AI 功能，將草圖轉換為可互動的知識圖譜（Knowledge Graph）區塊。
**娛樂與協作場景**
除了專業用途，該功能亦支援建立互動式網頁遊戲。使用者可在 Notion 頁面中直接嵌入如 `blocks.html`（俄羅斯方塊）、`breakout.html`（打磚塊）、`pong.html`（乒乓球）、`snake.html`（貪食蛇）或 `space_invaders.html`（太空侵略者）等復古遊戲。這些遊戲不僅能直接在頁面內遊玩，還能與團隊成員共享，讓 Notion 頁面從單純的資訊儲存庫，轉變為具備協作、分析與娛樂功能的互動式 workspace。
> 這段影片展示了一個名為「Arcade」的網頁應用程式，其中包含多款經典復古風格的網頁小遊戲。
## 媒體內容
**這段影片展示了如何在 Notion 筆記中透過 HTML 區塊嵌入互動式時間軸與地圖，並利用 AI 進行內容更新與調整。**
**影片中的 Prompt 與操作**
Prompt（00:14）：
```
生成一份關於 Notion 歷史的互動式時間軸。
```
原文：Generate an interactive timeline about the history of Notion.
Prompt（00:44）：
```
你能更新時間軸，將發生在京都的事情包含進去嗎……還有，你能讓地球變得色彩繽紛嗎？
```
原文：Can you update the timeline so that includes what happened in Kyoto.... also can you make the earth colorful?
操作步驟：
1. （00:10）輸入「/html」並選擇 HTML 區塊
2. （00:14）在 AI 對話框輸入指令並送出
3. （00:44）在 AI 對話框輸入修改指令並送出
**這段影片展示了如何利用 AI 工具在 Notion 平台中快速分析會議記錄並生成業務洞察報告。**
**影片中的 Prompt 與操作**
Prompt（00:00）：
```
請閱讀此資料庫中的會議記錄，並為第二季製作一份客戶洞察報告。請在每個章節中使用 HTML 區塊來說明您的發現。
```
原文：Could you read through the transcripts in this database and create a customer insights report for Q2? Use HTML blocks in each section to illustrate your findings.
操作步驟：
1. （00:00）開啟 Notion AI 對話框
2. （00:10）輸入指令並點擊發送
3. （00:15）AI 生成報告並點擊「Open page」
4. （00:20）瀏覽報告中的功能請求列表
5. （00:26）瀏覽交易停滯原因分析
6. （00:29）瀏覽銷售管道數據圖表
7. （00:35）瀏覽方法論與數據分析細節
**透過 AI 自動生成技術文件與互動式教學頁面的流程演示。**
**影片中的 Prompt 與操作**
Prompt（00:17）：
```
你能為這個儲存庫建立一個說明頁面嗎：https://github.com/geoffreylitt/zen-garden。
我想了解它是如何運作的。請在頁面上建立各個章節來描述其運作方式，並在每個章節中加入 HTML 說明。
```
原文：Could you create an explainer page for this repo: https://github.com/geoffreylitt/zen-garden.
I want to understand how it works. Create various sections on the page describing how it works. In each section add an HTML explainer.
操作步驟：
1. （00:03）點擊「Zen Garden」網頁上的互動按鈕。
2. （00:17）在 AI 平台的輸入框中輸入指令。
3. （00:28）點擊送出按鈕。
4. （00:36）點擊「Open page」進入生成的說明頁面。
5. （00:40）在互動區塊中拖曳物件。
6. （00:46）調整「ISO TILT」滑桿。
7. （00:51）調整「SPLIT」與「CONTRAST」滑桿。
8. （00:59）在測驗區塊中點選答案。
**這段影片展示了如何在 Notion 筆記軟體中使用 AI 功能，將草圖轉換為可互動的知識圖譜（Knowledge Graph）區塊。**
**影片中的 Prompt 與操作**
Prompt（00:08）：
```
你能將這些線框草圖轉換為此頁面原型區塊中的原型嗎？它應該要是可點擊的，並且能為框架製作動畫。
```
原文：Could you turn the wireframe sketches into a prototype in the prototype section of this page? It should be clickable, and animate the frames.
操作步驟：
1. （00:04）點擊 Notion 區塊選單並選擇「Ask AI」
2. （00:08）在 AI 對話框輸入指令並送出
3. （00:19）點擊 AI 生成的「knowledge_graph_prototype.html」連結
4. （00:22）點擊互動式知識圖譜中的節點進行查看
5. （00:31）切換「Cluster by similarity」開關以調整節點分組顯示
6. （00:34）調整縮放比例以檢視圖譜細節
**這段影片展示了一個名為「Arcade」的網頁應用程式，其中包含多款經典復古風格的網頁小遊戲。**
**影片中的 Prompt 與操作**
操作步驟：
1. @00:03 玩家操作滑鼠在「blocks.html」中移動方塊。
2. @00:07 玩家操作滑鼠在「breakout.html」中移動擋板。
3. @00:11 玩家操作滑鼠在「snake.html」中控制蛇的移動。
4. @00:18 玩家操作滑鼠在「pong.html」中移動球拍。
5. @00:22 玩家操作滑鼠在「space_invaders.html」中移動飛船並發射子彈。
## 標籤
功能更新, Web, AIGC, Notion