第五篇:实战案例库
实战案例一:制作一个宠物零食售卖的前端页面网站
从零开始制作可发布在网上的前端网页
在本地创建一个文件夹,命名为 Pet treats
选择好创建的文件夹

开启计划模式
生成初步项目计划,检查没问题后直接执行

打开 index.html 文件进行预览

创建 Git 仓库
创建 Git仓库进行代码管理,方便后续的更新和维护

优化细节更改
直接使用注释在页面进行细节修改

增加月销量

新增功能
新增热销榜

推送更新的代码
检查没有任何问题过后推送更新的代码

上传到 GitHub 仓库
新建一个仓库


复制对应仓库链接

让 Codex 将代码上传到 GitHub 仓库


通过GitHub Pages 发布网页,让其他人也能访问到
在设置里面找到 pages 然后点击保存
等待几分钟

等待几分钟,就会出现一条链接。这个链接可以让别人访问到你的网页。
需要注意的是,GitHub Pages 适合托管静态网站,比如 HTML、CSS、JavaScript 和静态资源;它不适合运行需要后端服务器、数据库或敏感交易的业务逻辑。

打开网页查看做好的项目
不同地区和网络环境访问 GitHub Pages 的稳定性可能不同,如果打不开,可以先换网络或稍等部署完成后再试。
https://vink567.github.io/Pet-treats/

实战案例二:给宠物零食网站增加功能和优化页面
新建用户登录注册页面
用户购买的时候需要填写自己的地址信息,这个时候就需要一个个人的登录账号来保存这些信息了

创建不同宠物分类,并在宠物分类下进行食品分类
依旧先用计划模式,看看AI是否理解了你的需求

使用注释功能优化细节


选择食品加入购物车后,点击购买时候需要提示确认地址

提交到 Git 保存代码

实战案例三:制作宠物零食的管理后台
依旧先使用计划模式


检查效果

提交到 Git 保存代码

实战案例四:制作宠物零食品牌招商 PPT
安装 PPT Skill
这里我安装的是我之前测评过的一个 PPT Skill,直接把 GitHub 上对应的 Skill 地址发给 Codex 让它安装就行了

使用「/」选择对应的 Skill

检查最终的结果
Codex 最终生成了一份完整的招商 PPT。成品已上传到云端,点击下面的链接即可下载查看:

实战案例五:制作宠物零食宣传视频
安装视频插件
这里使用的是 HyperFrames 这个插件

计划生成视频

效果预览
成品是一条宠物零食的宣传视频。完整视频已上传到云端,点击下面的链接即可在浏览器直接播放: