前面提到：
用Gemini3 Pro做的这个网站和小程序，说了要写个具体怎么做的教程。
心里老惦记着这个事，今天补上。
首先说明的是，我会一些html的代码，网站配置等知识，其他什么css, js，小程序都不懂，所以可以说是90%是在gemini和Antigravity不断沟通中做出来的。所以在各位懂技术的程序员朋友面前，可能漏洞百出，程序和步骤错误，不过，折腾么，不寒碜，写出来可能会给一些朋友提供些灵感和帮助。
准备的条件：
-
可以正常上Aistudio (https://aistudio.google.com/)的环境;
-
谷歌账号
-
存放网站的虚拟空间，买的域名：https://huxi.love
刚开始蹭的ZenMux的免费额度，后面又用Grok，在后来转到了谷歌的AiStudio，小程序是用Antigravity做的。
动态网站制作步骤：
- 打开Google AI Studio, build, Start，描述想要做的东西。我刚开始不知道这个，所以用的ZenMux，生成的html代码还是粘贴到CodePen.io上面预览的。AI Studio是直接右侧就可以预览。
做一个网页版的动态3d呼吸练习，类似这个网站的 https://breathball.com/ 。流程如下
- 伴随吸起的声音，鼓起的气球4秒钟瘪下去，
- 气球保持不动7秒钟
- 伴随呼气的声音，气球8秒钟鼓起来。 循环动画。
刚开始是非常简单的一个页面：
- 然后就是各种调教修改，
把最上面显示标题478呼吸法，中间是动画，其他描述文字放在下面，文字可以小一点。气球下面有个气嘴，显示气体进出 为什么没有声音呢？然后气球可以做的更立体。像真的气球一样吗？瘪下去有褶皱，鼓起来有立体
不行哦。音频加载不出来 不要声音了，怎么修改 把 标题 4-7-8呼吸法与气球离得远一点，然后文字改成：吸气(4秒)， 屏气（7秒），呼气 (8秒)， 然后页面更简洁，有点zen的感觉 在声音开关按钮上方加上可以切换的动画风格，气球为默认选项，还有线条风格的莲花，随呼吸漂浮上下的羽毛，飘动的云朵，浮动的水母，日出日落的太阳，爆炸收缩的星光。根据下面这个代码，给我全部的代码
首先呼气屏气吸气这里和切换栏互相挡住了。其次更改线条莲花为任意莲花，吸气的时候花瓣闭合，呼气的时候花瓣展开。再次添加蒲公英，呼气的时候，蒲公英随风飘散，吸气的时候逐渐恢复为蒲公英球。然后添加一面镜子，呼气的时候镜子有水雾，吸气的时候镜子变干净。不要其他的动画了
…
期间有各种稀奇古怪的要求，比如加各种动画
这是做出来基本能用的版本：
- 然后参考了Breath Ball, Breath, Prana Breath几个app找灵感，其中Prana这个给的启发最多。
比如呼气吸气屏气是不同的声音，但是让人感觉不到中断，然后除了添加了盒式呼吸，平等呼吸，还可以自定义呼吸时长，自定义练习时长。
还参考了Endel，有点高大上，高攀不起了: Endel：一个听起来没啥特别的APP，却做到了月入百万
- 是加背景音乐，参考了我之前分享的：
【1小时】深度呼吸/冥想音乐系列，再也不担心恍惚的时候就没了
这里面的一呼一吸的声音，经常跟着做很有感觉，还有空寂辽阔的宇宙背景，仿佛漂浮在地球之外。
颂钵的引导音是参考了478呼吸法的视频，而雨水打在雨伞的声音是参考了这个：做了一个解压放松的音频 那种麻麻酥酥的声音。
所以最终版本的声音是2个引导音和2个背景音。
- 因为Ai Studio上是可以直接预览，电脑pad移动端都可以切换预览，感觉满意了就点Download把全部文件下载到电脑。因为是放到网站上运行，所以还要让它重新编译。然后一步步的让它告诉我在电脑上怎么做。
如果我是hostinger的虚拟主机，我是把这些文件下载下来全部上传到file manager里面，打开网站就可以正常运行了吗？
关于您的Hostinger托管问题：不能直接上传这些 .tsx 文件。 浏览器无法直接读取 .tsx 或 TypeScript 文件，它们必须被“编译”成标准的 JavaScript 和 HTML 才能在网站上运行。 为了让您能够在 Hostinger 上运行这个网站，我为您添加了标准的构建配置文件（package.json, vite.config.ts, tsconfig.json）。 操作步骤： 下载：下载所有文件到您的电脑。 安装 Node.js：确保电脑安装了 Node.js。
构建： 在文件夹内打开终端，输入 npm install (安装依赖)。 输入 npm run build (打包网站)。 上传：这会生成一个 dist 文件夹。请将 dist 文件夹里面的内容 上传到 Hostinger 的 public_html 目录中。 同时，我已经检查了代码，清理了 App.tsx 中未使用的引用，并确保 index.html 指向正确的入口文件以便构建。
- 上传文件到主机，测试。哪里不对，再让它修改，再上传…总之是折腾了有十几次，才算基本满意了。
微信小程序的制作步骤：
网站做完了，app暂时还不知道怎么做，有一天我突然想到，是不是搞个小程序也是可行的？然后搜了搜，确实可以。
于是下载了AntiGravity和微信开发者工具的电脑端，主要是参考的这篇文章：
有几个点注意的是：
-
小程序文件只允许几百K，超了得搞云服务器。我就想免费体验一下，所以只能忍痛删了一些动画和背景音。
-
小程序是可以个人注册的，开通后上传版本后会有审核人员打电话来审核沟通；后续还要申请备案。这个过程还是很繁琐的，毕竟，大公司么，精细。
-
对了，还碰到一个问题是刚开始登录AntiGravity电脑端的时候，登录谷歌账号，跳到浏览器，然后浏览器登上之后并不跳转，一直显示AntiGravity
登不上，换梯子才好。
- 因为在微信开发者工具里是直接用的AntiGravity根据需求修改的文件，一边聊，AntiGravity就会根据需求改了，所以基本就是直接能预览，非常方便。
当然这个也修改了好多次，不过有网站版本做基础，好了很多。
好了，教程基本就是这些，更复杂的咱也不会。还有好多改进的地方，但起码从0到1，做出个 MVP （minimum viable product）了。
我都佩服我自己，哼哼