使用 ChatGPT 來設計 HTML 網頁檔是件容易的事,但是 ChatGPT 並不提供執行和檢視 HTML 檔案的功能。你可以透過 Claude AI 協助,將 ChatGPT 產生的結果,上傳至 Claude 修改後,在 Claude 中執行。

提示詞:設計一個互動式網頁HTML,用來做為說明台灣常見的10個網路用語解釋。

ChatGPT 會傳回一個 HMTL 程式碼,複製這個程式碼。貼至記事本中,再另存為 .html 檔案。

將ChatGPT產生的HMTL檔上傳至Claude中修改或發

將這個檔案使用瀏覽器打開即可查看效果!可以看到頁面上有互動效果。

將ChatGPT產生的HMTL檔上傳至Claude中修改或發

將這個 HTML 檔案,上傳至 Claude AI,並使用以下提示詞:

提示詞:根據檔案中的資料,為我加強加強互動效果及視覺化設計,並豐富網頁的色彩。

結果如下,Claude 除了強化原 HTML 檔案中的內容,最重要的是在此就可以利用分享機制,就可以將 HTML 程式在網頁上播放。

將ChatGPT產生的HMTL檔上傳至Claude中修改或發

如果點選:Publish,即可取得分享網址。

本例:https://claude.site/artifacts/e8ce10ac-67e1-4a62-a556-5531ec27e6af

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

arrow
arrow
    文章標籤
    ChatGPT Claude HTML
    全站熱搜
    創作者介紹
    創作者 vincent 的頭像
    vincent

    學不完.教不停.用不盡

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