开始前，准备一个文件夹和一个小目标
第一次可以做个人介绍、作品展示或店铺介绍页。本文用“摄影师作品展示页”举例，目标是在自己的电脑上打开预览。先安装并登录 OpenAI 的桌面应用，进入 Codex，为这次练习新建一个本地项目，把专用文件夹加入项目；已有网页项目，就打开原项目继续改。这样 Codex 才能在正确的位置读取和修改文件。
- 项目文件夹：例如“我的摄影网页”，专门存这次的网页文件。
- 页面内容：一段自我介绍、几组作品、希望访客看到后的下一步。暂时缺的内容可以先标出来。
- 参考与图片：一两张喜欢的网页截图，以及自己拍摄或有权使用的照片。不必等素材全齐再开始。
- 如果 Codex 说打不开某个文件夹，就把它加入当前项目；无法读取参考网址，可以换成截图。
第一步：让它先问，再写页面
只有“帮我做个好看的网页”，它很难猜对你的想法。先让它问清谁会看、要展示什么、按钮要做什么。下面这段会让它分批提问，你用平常说话的方式回答即可。确认它整理的要求没有漏项，再进入下一步。
我想做一个摄影师的作品展示页，但还没想清楚具体内容。 先不要写代码。请每次问我 3—5 个问题，等我回答后再继续。 先问清：谁会看这个页面、我想展示哪些作品、访客看完后要做什么、我喜欢什么风格、现在有哪些文字和照片。 按钮要跳到哪里、暂时不做哪些功能，也请问清。 问完后，把页面内容、版块顺序和按钮用途整理给我确认。缺少的内容直接列出来，不要替我编经历、价格或客户评价。
- 介绍页先做好“作品 → 简介 → 联系方式”，别一开始就塞进登录、付款和后台管理。
- 说“清爽”还不够，可以补一句：“白底，照片大一点，字不要压在照片上。”
- 联系方式没有准备好时，先留明确的待补位置，别让按钮看似能用，实际没有去处。
第二步：给参考，先搭出能看的页面
把参考截图发给它，说明喜欢哪里：例如首屏的大照片、作品的排列方式、文字大小或留白。参考主要用来说明外观，页面里的姓名、作品和介绍仍用自己的内容。先把版块、文字和按钮搭出来，图片暂时用标明用途的空位；这一轮看整体是否顺眼，图片细节留到下一步。
请根据刚才确认的要求和我提供的参考截图制作网页。 我喜欢参考里的 [写出喜欢的地方，例如大照片、白底、简洁导航]。请借鉴排列方式、字号、间距和图片比例，文字和素材用我的内容。 先完成版块顺序、标题、正文和基本按钮。缺少的图片用有文字说明的空位，写明用途，例如“首页大图”“作品照片”“个人头像”，不要把临时图片当成最终素材。 如果已有项目，请沿用原来的技术和文件结构；如果文件夹是空的，可以用 React + Vite 做一个简单项目。需要安装依赖或环境时，先说明缺什么，再按当前权限完成。 完成后启动本地预览，告诉我打开哪个地址。我先确认整体，再继续放图片。
- 预览打不开时，把完整报错发给 Codex，让它先排查启动问题；不要反复改页面文案。
- 整体不对时，明确说“作品应该放在简介前面”或“首页只留一张大图”，比“再高级一点”好执行。
- 先检查桌面和手机上的版块顺序，确认后再替换素材，减少来回重做。
第三步：放入图片，把空位逐个换掉
把照片放进当前项目能访问的一个素材文件夹，告诉它路径。可以先写清哪张是首页图、哪几张是一组作品，不需要为了让它识别而把所有文件重命名。请它复制素材后再整理，保留原图；拿不准的照片先问你，避免随便填满空位。
页面结构已确认。图片在这个文件夹：[填写当前项目内的素材文件夹路径]。 请查看图片和文件名，按首页大图、作品、头像等用途分类。先列出你建议的对应关系；无法判断用途的图片请问我。 确认后，复制需要的图片到项目的资源目录，保留原文件不动。空项目可用 public/assets；已有项目沿用原来的资源目录。整理后的副本用容易认出的英文名称，更新页面引用。 作品尽量展示完整，头像以人物为主，首页图不要裁掉关键主体；同一组图片保持一致的显示比例。 最后检查每张图片都能加载，手机上没有拉伸或横向溢出，并列出替换了哪些图片、还缺哪些素材。
- 照片不合适，先换素材；不要靠强行拉宽或拉高去填满卡片。
- 人物被裁掉时，指明哪张图、要保留哪里，例如“头像向上裁一点，保留完整头顶”。
- 二维码、截图和带文字的图片要保证内容可读，别为了统一比例裁掉关键信息。
修改时，一次说清一个具体问题
打开预览，把不满意的位置截图圈出来，再说明想怎么改。一次先解决一个问题，改完确认，再处理下一个。要求可以细到一张图、一个标题或一个按钮；不要每次都让它重新做整页。下面是几种可以直接照着说的改法。
图片：作品区的三张照片显示高度统一，完整保留画面，说明文字放在图片下面。 手机：首屏标题在手机上太大，请调小字号和行距，别让它挤成四五行。 按钮：把“联系我”改为跳到页面底部的联系方式，点击后停在标题位置。 间距：作品区和简介之间空得太多，请缩小这两个版块之间的距离，其他位置先保持。
交给别人前，自己走一遍页面
让 Codex 做一次构建检查，再由你实际点按钮、看图片、缩小窗口。它报告“完成”，不等于页面里的每个细节都符合你的要求。本地预览地址通常只有自己的电脑能打开；要发给别人访问，还需要单独发布到网站托管服务。这篇先完成页面和本地检查，发布时再确认域名、访问权限和具体步骤。
- 桌面和手机宽度都看一遍：有没有横向滚动、文字重叠、按钮挡住内容。
- 点完每个按钮和链接：有没有跳错位置、打开空页面或留下待补内容。
- 检查图片：是否加载成功、清晰、比例正常，人物和关键文字有没有被裁掉。
- 需要交付文件时，让它打包源码、素材和启动说明，排除 node_modules、密钥和本地配置；构建产物按接收方需要保留。
复制这段，试一次
请检查当前网页，先不要发布。 运行项目已有的构建检查，修复与你刚才修改有关的错误。 检查桌面与手机显示、图片加载、按钮和链接、横向溢出、文字重叠，以及还有没有待补内容。 能实际检查的，请说明结果；当前无法检查的，请列出让我手动确认。不要把未检查写成通过。 最后告诉我怎样打开本地预览，哪些问题已修好、哪些还需要我确认。