AI 写代码总跑偏？用这份需求模板做出第一个网页

“帮我做个好看的网页。”

如果只给 AI 这一句话，它需要自己猜：网页做什么、有哪些按钮、用什么技术、怎样才算完成。想减少返工，先把需求说具体。

GitHub 的提示词指南也建议：先说明目标，再列出具体要求和预期结果。参考：GitHub 官方文档。

这一课，我们做一个“个人效率工具箱”首页。后面的课程会逐步加入番茄钟、待办清单和便签。

一、先学会写需求

可以按这四项来描述：

目标：要做什么？
功能：页面上有什么，点击后发生什么？
限制：用什么技术，是否允许安装工具？
验收：怎么判断它做好了？

把它们组合起来，就是一份 AI 更容易执行的任务说明。

下面这段可以直接发给你使用的 AI 编程工具：

请帮我制作一个“个人效率工具箱”网页首页。
只使用 HTML、CSS、JavaScript，所有代码放在一个index.html文件里，不使用外部库和图片。
页面要有标题和三张功能卡片：番茄钟、待办清单、便签。
每张卡片有一个按钮。点击按钮后，在页面上显示对应功能的提示文字，暂时不跳转。
页面在电脑和手机浏览器中都能正常显示，手机上不要出现横向滚动条。
输出完整代码，并告诉我如何保存、打开，以及应该检查哪三处功能。

这份需求说明了范围，也给了明确的完成标准。以后做其他小工具，替换“目标”和“功能”两项就能继续使用。

二、做出第一个网页

下面是一份符合上述需求的参考代码。新建文本文件，粘贴代码，保存为index.html，然后双击打开：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人效率工具箱</title> <style> * { box-sizing: border-box; } body { margin: 0; color: #1f2937; background: #f5f7fb; font-family: "Microsoft YaHei", Arial, sans-serif; } header, main, #message { max-width: 960px; margin-left: auto; margin-right: auto; } header { padding: 48px 20px 24px; } header h1 { margin: 0 0 12px; font-size: 32px; } header p { margin: 0; color: #6b7280; } main { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 0 20px; } .card { padding: 24px; background: white; border-radius: 16px; box-shadow: 0 8px 24px #1f293712; } .card h2 { margin: 0 0 12px; font-size: 21px; } .card p { min-height: 48px; color: #6b7280; line-height: 1.6; } button { padding: 10px 18px; border: 0; border-radius: 8px; color: white; background: #4f46e5; cursor: pointer; } button:hover { background: #4338ca; } #message { margin-top: 20px; padding: 16px 20px; color: #3730a3; } </style> </head> <body> <header> <h1>我的效率工具箱</h1> <p>把常用的小工具放在同一个地方。</p> </header> <main> <article class="card"> <h2>🍅 番茄钟</h2> <p>给一项任务设置专注时间。</p> <button type="button" data-module="番茄钟">查看功能</button> </article> <article class="card"> <h2>✅ 待办清单</h2> <p>记录今天要完成的事情。</p> <button type="button" data-module="待办清单">查看功能</button> </article> <article class="card"> <h2>📝 便签</h2> <p>随手记下想法和提醒。</p> <button type="button" data-module="便签">查看功能</button> </article> </main> <p id="message" role="status">点击一张卡片，看看后续要做什么。</p> <script> const message = document.querySelector("#message"); document.querySelectorAll("[data-module]").forEach((button) => { button.addEventListener("click", () => { const moduleName = button.dataset.module; message.textContent = `${moduleName}将在后续课程逐步完成。`; }); }); </script> </body> </html>

如果用 Windows 记事本保存，文件名填写index.html，保存类型选择“所有文件”，避免生成index.html.txt。