AI 编程和建站入门：不会代码也能做出第一个网页

一、为什么要学这一课

AI 编程不是让完全不懂的人直接变成工程师，但它能让你更快做出原型。新手最适合从静态网页、小计算器、表单页面、导航页开始，而不是一上来做复杂 App。

你需要学会描述需求、拆分页面、检查效果、反馈问题。AI 可以写代码，但你要告诉它页面有哪些区域、每个按钮做什么、适配手机还是电脑、数据从哪里来。

二、你需要掌握的核心概念

• 先做静态页面，再做交互，再考虑数据库和登录。
• 需求描述越具体，AI 生成的页面越接近可用。
• 每次只改一个问题，避免一次改太多导致更乱。
• 运行、截图、报错信息要反馈给 AI，它才能继续修。

三、推荐工具和使用场景

四、照着做：标准练习流程

1. 写需求：我要做什么页面，给谁用，包含哪些模块。
2. 让 AI 先画结构，不急着写代码。
3. 生成第一版 HTML/CSS/JS 或 React 页面。
4. 打开页面检查：文字是否溢出、按钮是否可点、手机是否适配。
5. 把截图和问题反馈给 AI，一次只修一个问题。
6. 最后让 AI 检查性能、SEO 标题、移动端和无障碍。

五、常见错误和避坑

• 需求只写“做个网站”，没有页面结构。
• 不会运行代码，也不把报错复制给 AI。
• 一次要求改 20 个地方，结果越改越乱。
• 复制网上代码但不知道放在哪里。
• 过早做登录、支付、数据库，超出新手阶段。

六、进阶做法

• 学习最基础的 HTML 标签、CSS 盒模型和 JavaScript 事件。
• 让 AI 每次修改都说明改了哪些文件和原因。
• 把常用页面做成模板：落地页、工具页、课程页、表单页。

七、本课实战任务

做一个“AI 学习任务清单”网页。

1. 页面包含标题、今日任务、工具推荐、完成按钮、复盘输入框。
2. 让 AI 先输出页面结构和样式方案。
3. 生成代码后本地打开测试。
4. 记录 3 个问题并让 AI 修复。

考试与自检标准

• 能写出清晰网页需求。
• 能区分静态页面和动态功能。
• 能根据报错向 AI 提问。
• 能检查移动端布局。
• 能完成一个可打开的小网页。

学习建议

不要把 AI 学习理解成背工具名称。真正有价值的是形成“问题拆解、资料判断、提示词表达、结果验收、持续迭代”的工作习惯。每学完一课，都要留下一个可展示的作品：一份文档、一张表格、一页 PPT、一张图、一段脚本、一个自动化流程，或者一个小网页。

完整案例：把知识变成一次真实交付

只看概念很容易产生“我好像懂了”的错觉，所以这一课必须用一个真实场景来练。案例是：让不会代码的新手做出一个“AI 学习任务清单”网页。你要把它当成一次真正要交给老板、客户、老师或自己项目使用的任务，而不是随手生成一段文字。

开始之前先写清楚三件事：第一，谁会使用这个结果；第二，结果解决什么问题；第三，什么样的结果才算合格。很多 AI 输出之所以空，是因为用户没有定义“合格”。比如一份教程不是字数越多越好，而是读者照着做以后能不能完成任务；一份方案不是标题越漂亮越好，而是能不能指导执行。

本案例建议使用的工具组合是：Codex / Cursor / Claude Code。工具不是越多越好，新手最好固定一个主模型、一个资料工具、一个文档工具，再根据任务补充图片、视频、编程或自动化工具。固定工具组合的好处是你能熟悉它们的输出脾气，慢慢形成自己的工作流。

最终交付物是：页面需求、HTML 原型、修改记录、上线检查。交付时不要只保存最终结果，还要保存原始需求、提示词、AI 第一版、人工修改版和复盘。这样下一次做同类任务时，你不是从零开始，而是在自己的模板基础上升级。

可复制提示词模板

下面这段提示词可以直接复制使用。使用时把方括号里的内容换成你的真实业务，不要保留空泛词。越具体，AI 给你的结果越能落地。

你是一名 AI 实战教练。请围绕【AI 编程建站】帮我完成一个真实任务。
我的场景是：让不会代码的新手做出一个“AI 学习任务清单”网页。
请先不要直接给最终答案，先按以下步骤工作：
1. 复述我的目标，并指出任务里还缺哪些关键信息。
2. 把任务拆成 5-7 个可执行步骤。
3. 给出每一步需要的输入材料、推荐工具和输出格式。
4. 生成第一版结果，并标注哪些地方需要人工确认。
5. 最后输出验收清单，判断是否达到交付标准：页面需求、HTML 原型、修改记录、上线检查。

如果第一版结果不够好，不要急着换工具。先追问三次：第一次让 AI 补充遗漏信息，第二次让 AI 按你的真实场景改写，第三次让 AI 按评分表自检。很多新手只问一轮就放弃，实际上 AI 的价值往往出现在第二轮和第三轮。

一份合格作业应该长什么样

• 目标明确：开头能看出这份作业解决什么问题，而不是只有泛泛的 AI 概念。
• 步骤完整：读者照着步骤能复现，不需要自己猜下一步怎么做。
• 材料清楚：说明输入了哪些资料、用了哪些工具、哪些内容是 AI 生成、哪些是人工判断。
• 结果可编辑：不要只给截图，要保留文档、表格、提示词、源文件或链接。
• 风险已检查：事实、数据、版权、隐私、平台规则都做过基本检查。
• 有复盘：写清楚哪里做得好、哪里需要改、下次如何更快。

评分表：按 100 分检查自己是否过关

7 天训练安排

1. 第 1 天：只做需求拆解。把一个大需求拆成 5 个小任务，并让 AI 检查是否遗漏条件。
2. 第 2 天：只练提示词。为同一任务写 3 个版本：简短版、标准版、专家版。
3. 第 3 天：只做资料补充。找到至少 3 个来源，把资料整理成摘要和引用清单。
4. 第 4 天：生成第一版作品。不要追求完美，重点是完成闭环。
5. 第 5 天：人工修改。加入自己的判断、案例、数据或业务限制。
6. 第 6 天：让 AI 扮演考官，按评分表指出问题，并给出修改建议。
7. 第 7 天：整理模板。把本周最好用的提示词、检查表和作品保存到自己的资料库。

错误示范：为什么很多人学了还是不会用

错误做法是：打开工具，输入一句“帮我做AI 编程建站”，看到一段通顺文字就觉得完成了。这样的结果通常没有场景、没有边界、没有案例，也没有办法直接交付。正确做法是先让 AI 问你问题，补齐背景，再分步骤生成，并且每一步都要求它说明依据和不确定性。

另一个常见错误是把 AI 当成答案机器，而不是协作对象。答案机器只负责输出，协作对象需要你提供反馈。你可以告诉它“这个版本太像广告”“这里缺少数据”“这个标题不适合小红书”“这段话老板看不懂”。反馈越具体，下一版越接近真实可用。

给老师、家长和企业培训者的使用建议

如果你要把这套内容用于教学，不建议只让学员听课。每节课都应该设置任务、提交作业和评分。AI 教育最怕变成工具展示会：老师讲了很多工具，学生收藏了很多链接，但没有一个可以证明能力的作品。

更好的方式是把学员分成小组，每组完成同一个任务，但允许使用不同工具。最后比较结果：哪一组提示词更清楚，哪一组资料更可靠，哪一组作品更适合真实使用。这样学员学到的不只是工具按钮，而是判断标准。

本课复盘问题

• 我今天完成的作品能不能给别人看？如果不能，差在哪一步？
• 我有没有保存提示词和修改过程？下次能不能复用？
• AI 第一版和最终版有什么差别？这些差别是我判断出来的，还是 AI 自动变好的？
• 如果换一个行业或场景，我能不能用同样流程再做一遍？
• 这节课暴露了我的哪个短板：表达不清、资料不足、工具不会、审美不够，还是缺少验收标准？

请帮我设计一个单页网页，主题是[主题]，用户是[用户]，目标是[目标]。请输出页面结构、文案、样式建议和需要测试的交互清单。