场景实战
给现有网站或小程序改样式、加功能
在已有的网站、小程序代码上改颜色字体、调整布局、加一个小功能,并在改之前做好存档。
开始前
先存档或把整个项目文件夹复制一份。项目配置里的密钥(比如 .env 文件里的内容)不要贴进对话。正在线上运行的网站,不要直接在线上改。
适合谁
手里有一个网站、小程序或模板代码(自己做的、外包做的、网上下载的),想改改样式、加个小功能,又不想每次都找人。
准备什么
- 项目的完整文件夹,加进 Codex;
- 让 Codex 先帮你存档:
帮我给这个项目开启 Git 存档并存一次档,说明写"修改前"。如果已经有 Git,就直接存一次档。- 想清楚要改什么,最好准备一张截图指出位置。
复制这段话给 Codex
先让它熟悉项目:
先不要修改任何文件。请告诉我:
1. 这是一个什么项目(网站 / 小程序 / 其他),用了什么技术;
2. 怎么在本地预览它;
3. 首页的[导航栏 / 按钮 / 页脚]是在哪个文件里写的。再提出修改:
请修改[首页的导航栏]:
- 现在:[白色背景,文字太小];
- 想要:[深色背景、白色文字,字号大一点,手机上折叠成菜单按钮]。
只改这一部分,其他页面不要动。改完告诉我改了哪些文件,以及怎么预览效果。加一个小功能:
在[联系页]加一个留言表单:姓名、邮箱、留言内容三个输入框和一个提交按钮。
先只做前端界面和输入检查(比如邮箱格式不对要提示),不需要真的发送。
先告诉我你的方案,我确认后再做。你会看到什么
Codex 先介绍项目结构和预览方法,然后只修改相关的文件。网页项目它可能会启动一个本地预览,给你一个 http://localhost:... 的地址。
检查结果
- 按 Codex 说的方法预览,看改动效果;
- 在桌面应用的审阅面板里看它改了哪些文件、哪些地方(做过存档才能看到);
- 顺便点一点其他页面,确认没被改坏;
- 满意就让它再存一次档:
存档,说明写"导航栏改版完成"。想再改进可以这样说
这个按钮颜色和整体风格不搭,给我三个配色方案,说明理由。在内置浏览器里打开预览,检查手机宽度下的显示,有问题直接修。我想上线这些改动,正常流程是怎样的?先给我讲讲,不要动手。常见问题
| 问题 | 怎么办 |
|---|---|
| 不知道怎么预览 | 让 Codex 帮你启动预览,并告诉你地址 |
| 改完其他地方乱了 | 在审阅面板里撤销,或说"恢复到'修改前'那次存档" |
| 小程序在电脑上看不了效果 | 小程序通常需要在对应平台的开发者工具里预览,让 Codex 告诉你具体步骤 |
| 项目太大,Codex 找不到要改的地方 | 截图并说清楚是哪个页面、哪个区域,或者告诉它大概在哪个文件夹 |