跳转到主内容

Vibe Coding：自己做一个小应用

使用 Vibe Coding（氛围编程）时，你只需用日常语言描述想做的东西。助手会编写代码、展示结果，并根据你的反馈进行调整。你自己不需要会编程。例如，你可以为班级做一个练习测验、一个小游戏或一个实用的小工具。

你只需要桌面应用程序。无需安装 Node.js 和 git：应用已经自带。

1. 选择工作文件夹​

在电脑上新建一个空文件夹，例如 口算测验，并把它选为聊天的工作文件夹。具体做法请参阅本地文件访问。助手只会在这个文件夹中工作。

2. 描述你想要的东西​

尽可能具体地说明你想做什么。例如：

为三年级学生做一个单页 HTML 口算测验。十道 1 到 10 的乘法题，按钮要大，最后显示得分，并有一个重新开始的按钮。

像这样的简单页面，助手会用应用内置的 Web 服务器来显示。结果会出现在内置浏览器中：顶部栏右侧的浏览器按钮（地球图标）。详情请参阅本地服务器和内置浏览器。

不满意？直接说出要改的地方：

把按钮改成绿色，答错时显示正确答案。

自己的照片，以及让助手查看页面​

在消息中附上一张照片，然后说：

把这张照片放到网页上。

助手会把照片保存到项目文件夹中（例如 img/），并放到页面上。助手刚为你生成的图片也可以这样做。

内置浏览器中打开的页面有问题？可以说：

看看页面哪里出错了。

助手会查看页面的文字、截图和错误信息。参见让助手查看页面。

当助手自己在内置浏览器中打开页面时，它会等页面加载完毕，并查看页面的错误信息，例如脚本错误或无法加载的文件。它会先修复这些问题，再告诉你可以正常运行。然后它会像用户一样试用页面：点击按钮、填写字段、按下按键，并修复期间出现的错误。一切是否按你的想法运行，需要你自己检查。

3. 更大的应用​

如果你想做更大的东西，比如有多个页面的应用，助手可以用 Vite 和 React 等工具创建一个项目：

在此文件夹中用 Vite 创建一个用于单词测验的 React 应用。安装所有依赖，启动应用并显示结果。

创建这样的项目（例如使用 npm create vite@latest）需要你在命令卡片上批准。之后助手会安装软件包。这同样需要你批准，或者你可以开启允许无需询问即可安装软件包。请参阅安装软件包。 不想每条命令都出现卡片？在第一张卡片上选择 信任此项目。

4. 保存版本​

版本是项目在某一时刻的快照。如果不喜欢某个改动，你可以回到之前的版本。在合适的时候告诉助手：

保存一个版本。

第一次保存时，助手会为该文件夹创建版本历史。看起来像机密信息的文件（例如密码或密钥，也包括 Google API 密钥）永远不会被纳入版本。助手跳过某些内容时会告诉你。

5. 把项目放到 GitHub 上​

GitHub 可以在线保存你的项目。这样你就有了备份，也可以在另一台电脑上继续工作。

连接 GitHub​

每个人都连接自己的 GitHub 账号。还没有账号？请先在 github.com/signup 免费注册一个。

  1. 前往设置，在桌面状态中找到 GitHub 面板。
  2. 点击连接 GitHub。应用会显示一个代码，并在浏览器中打开 github.com/login/device。
  3. 在 GitHub 上输入代码（可以用复制代码复制）并授权。如果页面没有打开，请点击打开 GitHub。
  4. 面板现在会显示已连接为 @你的用户名。

GitHub 请求的权限。 GitHub 会显示 HandiHow-B-V 的应用 AI-School Desktop，并请求访问你的仓库（repo）：读取和写入，包括私有仓库。创建和更新项目需要此权限。只有在页面位于 github.com 时才授权。

代码过期了？ 代码的有效期约为 15 分钟。过期后，请再次点击 连接 GitHub。

组织的仓库，例如你学校的 GitHub 组织：

  • 如果组织限制第三方应用，请在授权页面上点击组织旁边的 Request（申请访问）。也可以稍后在 github.com/settings/applications > AI-School Desktop 中申请。
  • 组织所有者在组织的 Settings > Third-party access > OAuth application policy 中批准。
  • 未经批准时，你自己的仓库可以使用，但组织的仓库不行。

要换一个账号？ 点击 断开连接，并在重新连接前在浏览器中退出 github.com（或使用隐私窗口）。否则 GitHub 会使用你已登录的账号。

笔记

旧版本的应用会显示“此版本的应用暂不支持使用 GitHub 登录。”此时请更新应用。

发布和更新​

然后你可以这样说：

把这个项目放到 GitHub 上。

助手会显示一张卡片，上面有确切的地址以及应用内置和网络已开启标签。点击运行继续，或点击拒绝停止。新仓库是私有的，除非你要求创建公开仓库。如果地址不是 github.com，或仓库将会公开，卡片会发出警告。发布到网上时，你会看到将要发送哪些文件。

之后你可以这样说：

  • “把新版本发布到网上。”助手会把你的新版本推送到 GitHub。
  • “获取最新版本。”助手会从 GitHub 拉取更改。
  • “把项目 https://github.com/naam/project 下载到这个文件夹。”助手会下载一个现有项目。

公开项目无需连接也可以下载。发布到网上和创建新仓库则需要连接。

6. 安全提示​

  • 新仓库是私有的。只有在任何人都可以查看代码时，才把它设为公开。
  • 切勿在应用中放入密码、密钥或其他机密信息。
  • 如果你使用 Google API 密钥（以 AIza 开头，例如 Firebase 应用的 Web 密钥），请把它放在助手不纳入版本的文件中，例如 .env。如果密钥写在代码里，该文件就不会被发布到网上。
  • 点击运行之前，务必检查卡片上的地址。
  • 连接信息以加密方式保存在这台电脑上你的用户帐户中。助手永远看不到你的 GitHub 密钥。如果你使用的是共用电脑，用完后请点击断开连接。
  • 断开连接只会从这台电脑上移除连接。如果要彻底撤销访问权限，请在 GitHub 的 Settings > Applications 中操作。

本页