展开可复制文字
第五篇:实战案例库
实战案例一:制作一个宠物零⻝售卖的前端⻚面网站
从零开始制作可发布在网上的前端网⻚
在本地创建一个文件夹,命名为 Pet treats
选择好创建的文件夹
开启计划模式
生成初步项目计划,检查没问题后直接执行
展开可复制文字
打开 index.html 文件进行预览
创建 Git 仓库
创建 Git仓库进行代码管理,方便后续的更新和维护
展开可复制文字
增加月销量
新增功能
新增热销榜
推送更新的代码
检查没有任何问题过后推送更新的代码
展开可复制文字
复制对应仓库链接
让 Codex 将代码上传到 GitHub 仓库
展开可复制文字
通过GitHub Pages 发布网⻚,让其他人也能访问到
在设置里面找到 pages 然后点击保存
等待几分钟
等待几分钟,就会出现一条链接。这个链接可以让别人访问到你的网⻚。
需要注意的是,GitHub Pages 适合托管静态网站,比如 HTM L 、CSS、JavaScript 和静态资源;它不适合
运行需要后端服务器、数据库或敏感交易的业务逻辑。
展开可复制文字
打开网⻚查看做好的项目
不同地区和网络环境访问 GitHub Pages 的稳定性可能不同,如果打不开,可以先换网络或稍等部署完成后
再试。
https://vink567.github.io/Pet-treats/
实战案例二:给宠物零⻝网站增加功能和优化⻚面
新建用户登录注册⻚面
用户购买的时候需要填写自己的地址信息,这个时候就需要一个个人的登录账号来保存这些信息了
展开可复制文字
创建不同宠物分类,并在宠物分类下进行⻝品分类
依旧先用计划模式,看看AI是否理解了你的需求
展开可复制文字
选择⻝品加入购物⻋后,点击购买时候需要提示确认地址
提交到 Git 保存代码
展开可复制文字
实战案例三:制作宠物零⻝的管理后台
依旧先使用计划模式
展开可复制文字
实战案例四:制作宠物零⻝品牌招商 PPT
安装 PPT Skill
这里我安装的是我之前测评过的一个 PPT Skill,直接把 GitHub 上对应的 Skill 地址发给 Codex 让它安装就
行了
展开可复制文字
使用「/」选择对应的 Skill
检查最终的结果
Codex 最终生成了一份完整的招商 PPT。成品已上传到云端,点击下面的链接即可下载查看:
⬇ 下载招商 PPT
展开可复制文字
实战案例五:制作宠物零⻝宣传视频
安装视频插件
这里使用的是 HyperFrames 这个插件
展开可复制文字
计划生成视频
效果预览
成品是一条宠物零⻝的宣传视频。完整视频已上传到云端,点击下面的链接即可在浏览器直接播放:
▶ 在线观看演示视频
