AI创建网站

好久不运动了，这两天同事叫运动，准备去动动，并且记录下

延伸出去，自己有个需求，1、是给自己设置个运动目标（以终为始），2、是把运动过程记录下来，看自己离目标还有多远。当前没找到合适的软件，想着自己AI搓一个。

---

这里以创建一个健身管理软件为例，创建一个网站，所有终端可访问，数据自动保存同步

00 构思

首先构思自己想要什么，最好画个简图（低保真）

01 AI生成代码

提示词，原则是 1、尽量详细，2、能写多少写多少，后面慢慢改就行（不要追求一次全部都考虑到）：

参考图片，我想要创建一个身体管理系统，主要目的是用于健身管理，分为2页，第一页为总览，标题为“自律，专注”，右上角有个编辑按钮，编辑后可新增和删除项目，新增项目后，在下面展示，格式为（序号）-（项目）-（目标）-（进度），图片中的横线为分隔符。每一个项目点击后弹出第二页面，第二页面主要是对项目内容进行展示和编辑，右上角有个编辑按钮，编辑后可新增和删除任务，点击编辑的时候可以填写项目的目标，然后可以新增和删除任务，任务里面可以填入时间和数量，而进度就是所有数量总和除以目标的百分比（0%为默认并且是灰色，100%是绿色，60%以下是橙色，60%~100%是蓝色）。用HTML实现

第一版本最好用Claude官方来实现，好处是：

1. 编程能力Claude最强
2. 编程完成后可直接展示

（稳定后把代码上传到GitHub，然后切换到Gemini来优化代码）

基本就生成了，这个代码可以copy到本地，取名字xx.html就可以本地打开了（这里让他先预置些数据效果更好）

第二次prompt

优化点： 1、自律、专注 - 放中间 2、自律、专注下面的分割线改成渐变线，两边是白色 3、整体界面太丑，做个优化

结果，好了点，还是有点问题

第三次prompt

优化点： 1、去掉所有的（），字体加粗 2、百分比的框太丑了，优化下 3、百分比数量那个地方的最好用按钮配合数字来，渐变色

结果，好了不少

第四次prompt

优化点：

1、第二页的进度参考第一页，第二页目标后面增加一个单位（比如km，次数，个数这样可以自己填入）

2、返回和编辑按钮，去掉文字，放入图标

3、第一页后面已经展示了进度，前面的进度可以去掉

4、项目名字为 俯卧撑 - 1000，感觉不好看，做个优化，项目展示为 序号（保持不变），项目名字（比如这里的俯卧撑）（前面用渐变的按钮写下项目，字体为项目字体80%），中间是目标（带上单位）（前面用渐变的按钮写下目标，字体为目标字体80%），最后为进度（这个保持不变），第二页的目标和进度也放一行展示，参考第一页；第二页任务的时间和数量也参考第一页的方式

结果，效果还是不行

第五次 prompt

优化点：

1、项目和目标这些按钮太难看了，最好用浅色的渐变色，并且效果可以修改为嵌入到界面那种感觉

2、填入单位后，目标和单位之间要有空格展示

3、排版优化，修改为项目最左边，目标最中间，进度最右边

4、第二页的返回功能失效，修正

5、第二页的进度按钮去掉

6、整体的文字从黑色改成大标题的颜色。如果是100%进度的项目，颜色改成跟进度框一个颜色，同时增加删除线

第六次 prompt

优化点：

1、第二页的左上角返回按钮无法点击，并且太丑，美化下

2、第一页的字体也跟大标题一致，并且整个项目竖着排版一致，整个目标竖着排版一致

第7次 prompt

优化点：

1、第一页去掉序号，项目和目标的颜色跟大标题一致

2、第二页的返回按钮换个好看的按钮，内容最好也是用图标emoji

…（直到你自己满意为主）

（小技巧：一次性给AI太多输入，它会漏改，最好把一类需求统一提，比如修改外观，其他需求在单独提）

最后将生成的代码取名为index.html放在本地

02 GitHub建站

GitHub上创建一个空的仓库，名字自己取

创建好了后，本地拉取和推送

# 拉取操作
git clone https://github.com/LiuMaoDou/vigor-tracker.git
cd vigor-tracker

# 这里把刚才的index.html放到vigor-tracke这个文件夹，然后输入下面命令
git add .
git commit -m "new"
git push

03 创建数据库

缺点是应该国内无法访问，后面我研究下国内用什么

• 登录 Firebase Console
• 创建一个新项目
• 在左侧菜单选择 构建 (Build) -> Firestore Database，点击 创建数据库
  • 安全规则：生产模式
  • 点击规则，里面修改为allow read, write: if true;
• 注册 Web 应用：
  • 在项目概览页面（Project Overview），点击添加应用，然后选择 Web 图标 (</>)。
  • 选择 使用 <script> 标记
    • copy生成的代码填入到html文件中

不需要在本地做初始化，上面copy的内容填入到html中即可

完成后，去Gemini界面，把GitHub的数据导入，如下图

导入后，提问：

将index.html文件生成的数据保存在firebase里面，帮忙生成firebase的代码并且合并到index.html里面，然后提供完整代码给我

生成后的代码，用最开始firebase的代码替换

将优化的代码，覆盖之前的index.html文件即可

04 持续优化界面，并且上线

Information

这里注意，在后半段，只需要导入GitHub给Gemini，就可以一直提问进行优化了

有Gemini持续做微调，满意后上传

git add .
git commit -m "1221"
git push

去GitHub上做修改，如下（点击save）

在如下界面看到编译成功就可以登录网站了

大功告成（需要注意的是要用手机端测试，如果界面有问题，让AI适配下）

电脑端：

手机端：

后面考虑做个Agent，能不能之间把生成代码，创建GitHub，传教Firebase打通