Notion 推出 HTML 區塊功能，讓使用者能直接在頁面上建立並與互動式內容協作

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 代理將原本分散的資料轉化為可操作的工具： 資料轉換：將雜亂的資料庫、試算表或會議筆記，透過 AI 重新混合（remix）成簡報、儀表板或互動式報告。 程式碼轉譯：AI 系統能自動瀏覽 GitHub 儲存庫，解析程式邏輯並生成對應的 HTML 說明文件，使用者可直接在 Notion 內調整參數（如 ISO TILT、SPLIT、CONTRAST）觀察即時渲染效果。 互動式知識圖譜：透過 AI 將草圖轉換為 knowledgegraphprototype.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」…