前一篇文章：Claude也推出了視覺化互動式內容幫助你學習，介紹了 Anthropic 的 Claude AI 也開始提供視覺化互動式內容來輔助學習。現在的 AI 不再只是單純輸出文字，而是可以在對話中即時生成可互動的圖表、模擬器或小型應用，讓使用者透過操作來理解概念。無論是 Claude、Gemini，或是 ChatGPT，都逐漸具備這類能力，讓「對話式學習」變得更加直覺與具體。
不同 AI 所能接受與輸出的資料型式並不完全相同。有些平台偏向直接生成互動式介面，有些則是透過產生程式碼，讓使用者自行在本地端或其他環境執行。因此，同樣是「AI 生成互動內容」，在教師和學生在實際應用時，使用流程、整合方式與適用場景上，往往會出現不同的做法。
接下來的內容將整理幾種常見且實用的方法，說明如何利用 AI 生成的程式碼來建立視覺化或互動式內容，包括直接執行程式碼、嵌入網頁、搭配開發工具或部署到線上環境等不同模式，幫助你依照需求選擇最適合的使用方式，將 AI 產生的程式碼真正轉化為可使用的工具或學習資源。產生 HTML 檔
例如，使用提示詞：以互動式視覺化解釋月亮、地球、太陽運轉的相對關係
在 Claude 回覆時提供了一個程式碼（HTML）供你下載， 而你必須要下載後執行，才能看到結果。
在瀏覽器中執行這個 HTML 檔，你就可以改變速度，來觀察其變化。
產生分享網頁
相同的提示詞（以互動式視覺化解釋月亮、地球、太陽運轉的相對關係）使用在 Gemini 中，選取：Canvas，會產生一個網頁程式。
產生的程式碼可以複製和分享，例如：
https://gemini.google.com/share/c2fbf247fb85
單機執行
如果教師不想受限於網路而想要單機執行，或是想要傳送給學生使用，可以先複製 AI 提供的程式碼：
到記事記本貼上，再另存新檔為 HTML 檔。
在瀏覽器中執行：
在協作平台使用
如果你想要讓學生在自己的網站上看這些 AI 產生的內容，可以先複製 AI 產生的完整程式碼（HTML內容），在協作台上新增網頁：整頁嵌入。
加以命名：
選取：新增嵌入內容。
選取：嵌入程式碼，貼上先前複製的程式碼。
預覽內容：
AI 提供的程式碼已經成式協作平台的網頁：
發佈後即可讓學生使用自己的網站來學習。
