迭代修改约 20 分钟更新于 2026-07-31

第三步：预览网页并做小步修改

建立“备份—修改一处—刷新—检查”的节奏，避免一句提示词破坏整个页面。

30 秒直接答案

每次修改前复制一份可运行版本，只让 AI 改一个具体目标，并要求返回修改位置或完整文件。保存后刷新浏览器，分别检查桌面和手机宽度、链接、键盘操作与文字是否正确。

学完你能做到

先建立可回退版本

使用 index-v1.html、index-v2.html 或版本控制保存可运行状态。

与其说“变高级”，不如说明元素、属性、目标值和不应改变的部分。

缩小窗口并测试链接、按钮、长文字和键盘焦点。

可复制提示词

请只修改下面网页的【具体目标】。保持文案、其他颜色、版块顺序和功能不变。先列出计划修改的位置，再输出完整 index.html。验收标准：【可观察结果】。
当前代码：
"""
[完整代码]
"""

代码示例

/* 修改前 */
.hero { padding: 40px 20px; }
/* 修改后：只增加宽屏留白 */
@media (min-width: 800px) {
  .hero { padding: 88px 40px; }
}

动手练习 · 约 20 分钟

排错清单

FAQ

怎样描述“更好看”？

指出具体问题，例如间距过小、对比不足或手机字体太大，并写出希望观察到的结果。

为什么 AI 会改掉无关内容？

上下文不足或修改范围不清时更容易发生；提供完整文件并明确不变量。

刷新后仍是旧页面怎么办？

先确认文件已保存并打开的是正确路径，再强制刷新或关闭后重新打开。

浏览器、托管服务和产品界面可能变化，请以当前官方文档为准。