Vibe Coding 下载网页程序码

透过 Vibe Coding 的方式产生出一个精美的网页之后，下一步最重要的动作就是“把程序码拿回来”，虽然许多 AI 工具都提供线上预览功能，但如果想真正拥有、分享或持续开发这个网页，就必须学会如何正确地下载与存储程序码，这篇教学会介绍下载 Vibe Coding 程序码的方法。

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 为什么要下载 Vibe Coding 的网页程序码？
• 好用的编辑 Vibe Coding 程序码工具
  • 线上编辑工具 JSBin
  • 本地编辑工具 VS Code ( Visual Studio Code )
  • 记事本/文字编辑器
• Gemini 下载 Vibe Coding 程序码方式
• ChatGPT 下载 Vibe Coding 程程序码方式
• Canva AI 下载程 Vibe Coding 程序码方式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

为什么要下载 Vibe Coding 的网页程序码？

虽然在 AI 的对话视窗或画布 ( Canvas ) 中看程序码很方便，但仍然有下载到自己的电脑或自己的服务器的必要性，下方列出这些优点：

• 突破 AI 工具的分享限制

  许多 AI 平台的“分享链接”有时效性，或需要对方也登录账号才能查看，部分工具的预览环境甚至无法直接作为正式对外的网站。

• 技术自主与隐私

  对话纪录可能会因为账号问题、平台维护或对话过长而被删除或遗忘，但只要下载之后，这份程序码就完全属于自己，不再受限于 AI 平台的服务条款。

• 布署到自己的服务器

  可以将网页上传到 GitHub Pages、Vercel 或 Netlify，取得一个永久且自定义的网址，而且还可以使用 GitHub 进行版本管控。

• 整合与深度开发

  当网页规模变大，AI 的线上编辑器可能会变得卡顿，下载程序码之后，就可以利用更强大的开发工具进行细部微调。

• 离线浏览

  下载后的网页文件，即使在没有网络的环境下，只要打开浏览器就能运行。

好用的编辑 Vibe Coding 程序码工具

虽然有些 AI 提供下载 Vibe Coding 的功能，但仍有一些 AI 只能复制程序码，不能直接下载，因此需要透过一些“程序编辑器”或“文字编辑器”，进行编辑程序码或复制程序码的动作，下方列出一些“线上版本”和“本机安装版本”工具：

线上编辑工具 JSBin

JSBin 是非常老牌的线上“网页展示工具”，许多网页课程都是使用这个编辑器进行教学，JSBin 的界面会将 HTML、CSS、JS、Console ( 控制台 ) 和 Output ( 预览 ) 用页签的方式分开显示，也支援对应的程序码色彩与高亮度语法 ( 基本上 Vibe Coding 只会用到 HTML 页签 )。

前往 JSBin：https://jsbin.com/

由于 JSBin 无法打开外部文件，只能够在遇到“不能下载，只能复制的 Vibe Coding 程序码”的状况时，将程序码复制起来，贴到 JSBin 的“HTML”页签里，进行更近一步的编辑或下载动作，下图是只显示“HTML”页签，并把 Vibe Coding 的网页程序码贴在此处。

按下上方的“File > Save Snapshot”储存这个网页，接着点击“Download”，就可以把网页下载到电脑中。

本地编辑工具 VS Code ( Visual Studio Code )

VS Code (Visual Studio Code) 是目前全世界最流行的程序编辑器，除了本身强大的功能 ( 程序码高亮度、缩排、提示...等 )，还有具有许多软件包和外挂，是大多数工程师爱用的工具。

下载 VS Code：https://code.visualstudio.com/

打开 VSCode 之后，就可以直接用它打开 Vibe Coding 所下载的网页程序码，或者也可以新建一个副档名为“.html”的网页文件，把 Vibe Coding 的网页程序码贴上之后储存即可。

记事本/文字编辑器

如果没有线上工具也没有安装编辑器，还可以使用电脑本身的“文字编辑器”新建文件或者打开下载的网页档，不过存档时需要将文件的副档名储存为“.html”，才可以正常运作 ( Mac 的纯文字编辑器要先勾选“设定 > 打开和储存 > 将 HTML 显示为 HTML 码” )。

Gemini 下载 Vibe Coding 程序码方式

如果使用 Gemini 的 Canvas 工具产生程序码，可以点击右上角“共用”按钮，选择“复制内容”。

用上述介绍的方式贴上网页程序码 ( 下图使用 JSBin )，就可以看到一模一样长相的网页了。

ChatGPT 下载 Vibe Coding 程序码方式

如果使用 ChatGPT 的 Canvas 工具产生程序码，除了可以点击右上角“复制”按钮复制内容，也可以直接点击“下载”按钮将内容下载为 HTML 文件，直接打开文件就可以观看网页。

Canva AI 下载程 Vibe Coding 程序码方式

如果使用 Canva AI 产生程序码，要特别注意要要求 AI “删除所有相对路径资源”，避免部署到自己的服务器之后发生问题，下方是让 Canva AI 产生简单的 Hello World 网页。

产生网页后，点选“显示代码”，继续点击“复制代码”就可以复制程序码。

把程序码贴到笔记本或程序编辑器，就可以储存为自己的网页啰！

注意，因为 Canva 仍然会强制添加相对路径的 SDK 文件，为了避免有错误消息，分别搜索下面这段程序码并删除。

<script src="/_sdk/element_sdk.js"></script>

下方还有一段。

<script src="/_sdk/data_sdk.js" type="text/javascript"></script>

小结

Vibe Coding 让写程序变成了“讲话”一样简单，但“下载程序码”则是将虚拟想法转化为实体资产的关键步骤，只要可以顺利下载，就可以开始挑战将它上传到 GitHub 并发布成网页。现在，试着把最满意的那个 Vibe 成果下载下来，并在自己的电脑上运行看看吧！

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈