學不完．教不停．用不盡

前二篇使用 Claude AI 和 v0.dev 來製作互動式網頁，非常簡單易學。

利用Claude AI產生互動式的網頁程式，快速而且可以立即線上執行

一個指令即可完成互動式網頁(V0.dev)

你也可以上傳圖片讓 AI 仿製設計，例如：Claude AI 和 v0.dev，讓你上傳一張圖就製作好互動式網頁的全部內容！

下圖是教育部所做的臺灣台語的教學圖，如果取用其設計概念來製作互動式網頁，也是不錯的設計。本篇又要出動 Claude AI（https://claude.ai/） 和 v0.dev（https://v0.dev/） 來協助！

在 Claude AI 中上傳一張圖片（如下圖），再利用提示詞製作互動式網頁，文字內容也是由 AI 產生。

提示詞：為我設計一個類似這張圖的互動式頁面，用來做為10個「網路常用詞語」的解釋。

Claude AI 立刻產生了 10 個網路常用語，並且可以透過「上一個／下一個」的方向圖示來顯不同的網路用語。

點選：Publish，可以取得這個網頁的公開網址。

參考：https://claude.site/artifacts/0109e336-7e15-4a8d-b459-1c54d04d2129

另一個實例：

再來試試 v0.edv。

在 v0.dev 中上傳一張圖片（如下圖），再利用提示詞製作互動式網頁，文字內容也是由 AI 產生。

提示詞：為我設計一個類似這張圖的互動式頁面，用來做為10個台灣「網路常用詞語」的解釋。

結果如下，參考：https://v0.dev/chat/Zmz2Xq0yHbe?b=b_QjYuvFV2klp

你也可以依據一個問卷內容的圖，直接請 AI 製作成互動式網頁。例如，使用下圖的心情溫度計。

提示詞：依據這張圖像的內容，轉換為一個互動式的網頁，並且可以計算分數，給予得分說明。頁面設計盡量色彩豐富，重視視覺化效果。

Claude AI 果然很給力！直接將圖中內容（文字）製作為互動式網頁，而且在色彩上也盡量視覺化設計。

參考：https://claude.site/artifacts/25f62094-dfb8-46cb-a2a3-8114b3a76568

在互動網頁中除了可以點選分數，還能計分，並且給予評分的說明，實在太輕鬆就完成了這個轉換工作。推薦你也試試Ｚ！

以下的範例，題目較多，而且選項不是每一題的配分方式相同。提示詞：

圖的內容是一個壓力知覺量表(PSS)，請設計一個互動式網頁用來測驗，並可以計算得分，再依得分給予說明。請注意加強視覺化設計，並且以豐富的色彩呈現。
選項：0：從不、1：偶爾、2:有時、3: 時常、4：總是
計分：
第4、5、6、7、9、10、13題：從不(4)偶爾(3)有時(2)時常(1)總是(0)，
其他題：從不(0)偶爾(1)有時(2)時常(3)總是(4)
分數越高表示壓力越大。
0-28 ：壓力屬正常範圍
29-42：壓力偏大，需注意
43-56：壓力太大，需尋求資源協助

參考：https://claude.site/artifacts/dff2b713-b01a-48ee-ba20-c51d539ec67a，互動效果和視覺設計也表現良好。