在現今的人工智慧應用中,對話機器人的功能已超越了傳統的一問一答。除了生成文章內容、繪製圖片等視覺效果,這些工具還具備產生程式碼的能力。其中,Claude AI(https://claude.ai/)提供了非常直觀且功能強大的介面,使用者可以透過此平台生成各類型的程式碼,滿足不同程式設計需求。

Claude AI 的一大特色是其線上互動執行功能。這項功能讓開發者和程式愛好者能夠在瀏覽器中即時測試和執行產生的程式碼,不需額外安裝或設定軟體環境,極大地提升了開發過程的便利性和效率。此外,Claude AI 支援多種程式語言,這樣的整合式設計讓使用者能夠輕鬆無縫地將構想轉化為具體的程式應用,並及時調整與優化程式碼,達到理想的效果。透過 Claude AI,不僅能快速產生程式碼,還能即時進行測試與修改,這種互動式體驗是許多開發工具無法媲美的。

本篇來練習如何請 AI 撰寫程式和執行程式。

提示詞:請為我生成「根據所輸入資料產生QR Code」的HTML程式碼

Claude 隨即產生了 HTML 程式碼,並且可以執行。在頁面上可以看到:Preview,在此模式下可以執行程式。

利用Claude AI產生互動式的網頁程式,快速而且可以立即

如果點選「Code」,則會顯示程式碼:

利用Claude AI產生互動式的網頁程式,快速而且可以立即

在視窗右下角還有三個圖示:

複製圖示:複製程式碼。(複製 Code 的內容)

下載圖示:下載HTML檔,可以在瀏覽器中執行該網頁程式。

利用Claude AI產生互動式的網頁程式,快速而且可以立即

Published 圖示:公開程式碼。再點選:Copy Link,即可取得分享的網址,例如:https://claude.site/artifacts/c16fbb39-a4a0-4b5f-b4d9-629128aa6f03

在此點選:Unpublish,也可以取消分享。

利用Claude AI產生互動式的網頁程式,快速而且可以立即

在此分享數個我請 Claude AI 撰寫的程式碼:

提示詞:為我產生12X12的踩地雷遊戲的HTML程式碼

投影片1.PNG

提示詞:為我建立一個抽籤的網頁程式,可以根據最大值的數字產生一個亂數。

投影片3.PNG

提示詞:為我產生一個類比時鐘的網頁程式。

投影片4.PNG

提示詞:為我設計一個國小高年級程度的四則運算練習器遊戲。

投影片5.PNG

提示詞:為我設計一個翻牌記憶遊戲。

投影片6.PNG

提示詞:為我設計一個和電腦對玩的井字遊戲。

投影片7.PNG

提示詞:為我設計一個15個方塊的數字推盤遊戲。

投影片8.PNG

提示詞:為我建立一個貪食蛇遊戲,其中必須可設定難易度,呈現分數,增加啟動按鈕。

投影片9.PNG

提示詞:為我建立一個1A2B遊戲。

投影片10.PNG

提示詞:為我製作一個網頁中的七段顯示器風格的數位時鐘。

投影片11.PNG

提示詞:為我產生三個圓盤的河內塔網頁遊戲。

投影片12.PNG

提示詞:建立一個網頁程式,可以根據輸入的中文字產生以圓點構成的24X24點陣字。

投影片13.PNG

學不完.教不停.用不盡文章列表

arrow
arrow
    文章標籤
    Claude 互動式
    全站熱搜
    創作者介紹
    創作者 vincent 的頭像
    vincent

    學不完.教不停.用不盡

    vincent 發表在 痞客邦 留言(0) 人氣()