尧图网站建设 
一键开通华为云码道 CodeArts 代码智能体 https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithdcampus-event - AtomGit摘要以前使用 AI 编程工具时通常需要先创建项目、编写代码再让 AI 帮助修改其中的一部分内容。那么如果反过来呢这次我尝试了一种更加简单的使用方式不给 AI 提前准备代码也不手动创建 HTML、CSS 和 JavaScript 文件只提出一个完整的网页需求让 AtomCode 智能体自己完成整个过程。本次实践以“校园活动报名网页”为例从一个空项目开始让 AtomCode 自主创建项目文件、编写网页代码、检查页面效果并进行修改最终得到一个可以直接在浏览器中打开的简单网页。通过这次实践可以更加直观地了解 AI Coding Agent 与传统代码补全工具之间的区别。关键词AtomCodeAI Coding AgentAI 编程网页开发HTML校园活动一、这次我想尝试什么平时使用 AI 写代码时我们经常会采用这样的方式自己创建项目 ↓ 自己创建文件 ↓ 自己写一部分代码 ↓ 让 AI 修改代码 ↓ 自己运行 ↓ 继续告诉 AI 哪里需要修改虽然这样也能够提高开发效率但我一直想尝试另外一种方式如果我什么代码都不写只告诉 AI 我想要什么让它自己完成呢因此这次我特意把任务简化。不使用复杂的后端也不连接数据库更不提前准备代码。只准备一个空项目然后给 AtomCode 一个完整需求帮我制作一个校园活动报名网页。后面的工作尽量全部交给 AtomCode 完成。二、为什么选择“校园活动报名网页”这次选择的案例非常简单。假设学校准备举办一次校园迎新音乐节活动需要制作一个简单的报名页面。页面主要包含活动名称活动时间活动地点活动介绍活动亮点学生姓名学号联系方式报名按钮。这个案例有几个优点。首先它比较符合大学生的实际使用场景。其次不需要服务器和数据库只使用 HTML、CSS 和 JavaScript 就可以完成。最重要的是整个项目可以从零开始让 AtomCode 自己创建。三、准备一个空项目首先创建一个空文件夹。例如campus-event注意这个文件夹里面什么代码都不用提前写。甚至不需要提前创建index.html style.css script.js这些文件全部交给 AtomCode。四、让 AtomCode 接管整个任务进入这个空项目目录然后启动 AtomCode。Windows 用户可以在 PowerShell 中进入项目目录cd 你的项目路径\campus-event然后运行atomcode进入之后这次我没有一步一步告诉它创建 HTML。也没有告诉它创建 CSS。而是直接给它一个完整的目标。我使用的提示词如下请帮我从零创建一个校园活动报名网页。 具体要求 1. 这是一个大学校园活动报名页面 2. 页面包含活动名称、活动时间、活动地点、活动介绍和活动亮点 3. 页面下方提供报名表单包括姓名、学号和联系方式 4. 提供“立即报名”按钮 5. 使用 HTML、CSS 和 JavaScript 实现 6. 页面整体简洁、美观符合大学生校园活动的风格 7. 使用响应式布局电脑和手机打开都能够正常显示 8. 请你自己创建所有需要的文件 9. 请你自己完成 HTML、CSS 和 JavaScript 10. 完成后自己检查代码是否存在问题 11. 如果发现问题请你自行修改 12. 最后告诉我项目生成了哪些文件以及如何运行。 尽量不要让我参与中间过程请你自主完成整个任务。这里最关键的一句话是“尽量不要让我参与中间过程请你自主完成整个任务。”五、接下来基本就交给 AtomCode 了输入需求之后我没有继续手动创建文件。而是观察 AtomCode 如何处理这个任务。正常情况下它首先需要理解需求然后开始创建项目文件。例如最终可能形成campus-event/ ├── index.html ├── style.css └── script.js其中index.html负责页面结构。style.css负责页面样式。script.js负责报名按钮以及表单交互。六、看看 AtomCode 到底写了什么等 AtomCode 完成代码后可以打开项目文件查看。首先是index.html里面应该能够看到活动页面的基本结构。活动时间、地点、活动介绍和报名表单等内容。然后是style.css负责控制网页的布局、字体、间距、按钮等视觉效果。最后是script.js负责处理报名按钮。例如当用户填写完姓名、学号和联系方式之后点击“立即报名”页面可以给出提示。这里我们不需要自己修改代码。这次实践的重点就是尽可能让 AtomCode 自己完成。七、让 AtomCode 自己检查项目代码生成完成之后我继续告诉它请你现在自己检查刚刚创建的整个项目。 重点检查 1. HTML 结构是否正确 2. CSS 是否存在明显的布局问题 3. JavaScript 是否能够正常运行 4. 报名按钮是否能够正常响应 5. 页面在不同屏幕尺寸下是否存在明显问题。 如果发现任何问题请你直接修改不需要等待我的确认。 修改完成后再次检查。这里仍然没有告诉它具体哪一行代码有问题。而是把发现问题 → 修改问题这两个步骤都交给 AtomCode。八、打开网页看看最终效果完成之后打开项目中的index.html可以直接使用浏览器查看页面。如果 AtomCode 已经正确完成任务应该能够看到一个完整的校园活动报名页面。九、再让 AtomCode 自己进行一次优化第一版页面完成之后我没有自己修改 CSS。而是继续让 AtomCode 自己优化。输入现在请你重新检查刚才生成的网页。 从普通大学生用户的角度体验这个页面。 如果页面存在以下问题请你直接修改 - 页面信息层次不够清晰 - 文字和背景对比不明显 - 表单不够美观 - 按钮不够突出 - 页面在手机上显示不够合理。 请你自主判断需要修改的地方并完成优化。 不要只告诉我修改建议直接修改项目文件。这一次可以观察 AtomCode 是否会主动修改style.css或者script.js甚至根据需要调整index.html十、再次查看最终效果重新打开网页。优化之后页面的信息层级应该更加清楚。十一、测试报名功能页面看起来完成之后还需要测试一下交互功能。我直接在网页中填写姓名张三 学号20260001 联系方式13800000000然后点击立即报名如果 JavaScript 编写正确可以弹出报名成功提示。例如报名成功 感谢参加本次校园活动。这一部分也不需要我们自己编写 JavaScript。整个交互逻辑也是 AtomCode 根据最开始的需求完成的。十二、这次我几乎没有写代码完成整个项目之后再回头看整个过程会发现我们真正手动做的事情其实非常少。整个过程基本可以概括成创建空文件夹 ↓ 启动 AtomCode ↓ 提出完整需求 ↓ AtomCode 自己创建文件 ↓ AtomCode 自己写代码 ↓ AtomCode 自己检查 ↓ AtomCode 自己修改 ↓ 浏览器查看最终结果而不是传统的自己写 HTML ↓ 自己写 CSS ↓ 自己写 JavaScript ↓ 自己调样式 ↓ 自己找 Bug这也是这次实践和普通 AI 对话式编程比较明显的区别。十三、如果只让 AI 写代码会是什么样如果只是普通地问 AI“帮我写一个校园活动报名网页。”AI 很可能直接返回一大段 HTML、CSS 和 JavaScript。然后我们还需要复制代码创建文件粘贴代码保存打开网页发现问题再把代码复制给 AI让 AI 修改再复制回来。整个过程实际上仍然需要大量人工操作。而这次使用 AtomCode 的方式更加直接。我们把目标告诉它之后让智能体自己在项目中完成操作。因此这次体验让我感受到AI Coding Agent 和普通 AI 代码生成之间最大的区别之一并不是“谁写代码更快”而是谁能够真正参与到项目操作过程中。十四、这个案例还能怎么继续扩展完成基础版本之后其实还可以继续给 AtomCode 提需求。例如添加活动倒计时请给这个活动页面增加一个距离活动开始时间的倒计时。 请你自己完成代码修改和测试。增加报名人数请在报名区域增加当前报名人数显示。 点击报名后让人数自动增加。 请你自己完成修改。增加深色模式请给网页增加深色模式切换功能。 请你自己完成 HTML、CSS 和 JavaScript 的修改。增加手机端适配请重点检查这个网页在手机屏幕上的显示效果。 如果存在布局问题请你自己修改 CSS。这些需求仍然可以直接交给 AtomCode。也就是说第一版网页完成之后我们仍然可以通过自然语言继续让智能体完善项目。十五、这次实践最大的收获这次实践使用的项目非常简单。但它让我对 AI Coding Agent 有了一个比较直观的认识。以前我理解的 AI 编程工具更多是我写代码AI 帮我补代码。而这次体验更接近我提出目标AI 自己完成任务。虽然最终我们仍然需要检查 AI 的工作结果但很多具体的操作已经不需要自己一步一步完成。对于大学生来说这种方式尤其适合一些简单的课程实践、网页原型和个人项目。例如课程作业网页社团活动页面校园活动报名页面个人介绍页面个人简历网页简单的数据展示页面。这些项目本身并不复杂非常适合作为 AI Coding Agent 的入门实践。十六、总结这次实践从一个空文件夹开始没有提前编写任何代码。我只向 AtomCode 提出了一个完整的网页需求之后让它自主完成创建文件 → 编写代码 → 检查项目 → 修改问题 → 优化页面 → 完成最终网页。整个案例虽然简单但比较适合用来理解 AI Coding Agent 的基本工作方式。对于初学者而言不一定需要从复杂的软件项目开始。一个简单的校园活动网页就足以让我们看到从“让 AI 帮我写代码”到“让 AI 自己完成一个开发任务”其实是两种不同的使用方式。而这也是我这次使用 AtomCode 后最大的感受。如果以后面对更加复杂的项目只需要把需求进一步拆清楚再把具体的开发目标交给智能体就可以让 AI 在项目中承担更多实际工作。结语这次没有复杂的代码也没有复杂的环境配置。从一个空文件夹开始只给 AtomCode 一句话“帮我做一个校园活动报名网页后面的事情你自己完成。”最终就能够得到一个完整的网页项目。对于第一次接触 AI Coding Agent 的同学来说这可能是一个比较容易上手的实践案例。与其让 AI 只帮我们写一段代码不如试着直接给它一个目标看它能不能自己把整个任务完成。 一句话让 AtomCode 自动做一个校园活动报名网页：AI 智能体实战体验
一键开通华为云码道 CodeArts 代码智能体 https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithdcampus-event - AtomGit摘要以前使用 AI 编程工具时通常需要先创建项目、编写代码再让 AI 帮助修改其中的一部分内容。那么如果反过来呢这次我尝试了一种更加简单的使用方式不给 AI 提前准备代码也不手动创建 HTML、CSS 和 JavaScript 文件只提出一个完整的网页需求让 AtomCode 智能体自己完成整个过程。本次实践以“校园活动报名网页”为例从一个空项目开始让 AtomCode 自主创建项目文件、编写网页代码、检查页面效果并进行修改最终得到一个可以直接在浏览器中打开的简单网页。通过这次实践可以更加直观地了解 AI Coding Agent 与传统代码补全工具之间的区别。关键词AtomCodeAI Coding AgentAI 编程网页开发HTML校园活动一、这次我想尝试什么平时使用 AI 写代码时我们经常会采用这样的方式自己创建项目 ↓ 自己创建文件 ↓ 自己写一部分代码 ↓ 让 AI 修改代码 ↓ 自己运行 ↓ 继续告诉 AI 哪里需要修改虽然这样也能够提高开发效率但我一直想尝试另外一种方式如果我什么代码都不写只告诉 AI 我想要什么让它自己完成呢因此这次我特意把任务简化。不使用复杂的后端也不连接数据库更不提前准备代码。只准备一个空项目然后给 AtomCode 一个完整需求帮我制作一个校园活动报名网页。后面的工作尽量全部交给 AtomCode 完成。二、为什么选择“校园活动报名网页”这次选择的案例非常简单。假设学校准备举办一次校园迎新音乐节活动需要制作一个简单的报名页面。页面主要包含活动名称活动时间活动地点活动介绍活动亮点学生姓名学号联系方式报名按钮。这个案例有几个优点。首先它比较符合大学生的实际使用场景。其次不需要服务器和数据库只使用 HTML、CSS 和 JavaScript 就可以完成。最重要的是整个项目可以从零开始让 AtomCode 自己创建。三、准备一个空项目首先创建一个空文件夹。例如campus-event注意这个文件夹里面什么代码都不用提前写。甚至不需要提前创建index.html style.css script.js这些文件全部交给 AtomCode。四、让 AtomCode 接管整个任务进入这个空项目目录然后启动 AtomCode。Windows 用户可以在 PowerShell 中进入项目目录cd 你的项目路径\campus-event然后运行atomcode进入之后这次我没有一步一步告诉它创建 HTML。也没有告诉它创建 CSS。而是直接给它一个完整的目标。我使用的提示词如下请帮我从零创建一个校园活动报名网页。 具体要求 1. 这是一个大学校园活动报名页面 2. 页面包含活动名称、活动时间、活动地点、活动介绍和活动亮点 3. 页面下方提供报名表单包括姓名、学号和联系方式 4. 提供“立即报名”按钮 5. 使用 HTML、CSS 和 JavaScript 实现 6. 页面整体简洁、美观符合大学生校园活动的风格 7. 使用响应式布局电脑和手机打开都能够正常显示 8. 请你自己创建所有需要的文件 9. 请你自己完成 HTML、CSS 和 JavaScript 10. 完成后自己检查代码是否存在问题 11. 如果发现问题请你自行修改 12. 最后告诉我项目生成了哪些文件以及如何运行。 尽量不要让我参与中间过程请你自主完成整个任务。这里最关键的一句话是“尽量不要让我参与中间过程请你自主完成整个任务。”五、接下来基本就交给 AtomCode 了输入需求之后我没有继续手动创建文件。而是观察 AtomCode 如何处理这个任务。正常情况下它首先需要理解需求然后开始创建项目文件。例如最终可能形成campus-event/ ├── index.html ├── style.css └── script.js其中index.html负责页面结构。style.css负责页面样式。script.js负责报名按钮以及表单交互。六、看看 AtomCode 到底写了什么等 AtomCode 完成代码后可以打开项目文件查看。首先是index.html里面应该能够看到活动页面的基本结构。活动时间、地点、活动介绍和报名表单等内容。然后是style.css负责控制网页的布局、字体、间距、按钮等视觉效果。最后是script.js负责处理报名按钮。例如当用户填写完姓名、学号和联系方式之后点击“立即报名”页面可以给出提示。这里我们不需要自己修改代码。这次实践的重点就是尽可能让 AtomCode 自己完成。七、让 AtomCode 自己检查项目代码生成完成之后我继续告诉它请你现在自己检查刚刚创建的整个项目。 重点检查 1. HTML 结构是否正确 2. CSS 是否存在明显的布局问题 3. JavaScript 是否能够正常运行 4. 报名按钮是否能够正常响应 5. 页面在不同屏幕尺寸下是否存在明显问题。 如果发现任何问题请你直接修改不需要等待我的确认。 修改完成后再次检查。这里仍然没有告诉它具体哪一行代码有问题。而是把发现问题 → 修改问题这两个步骤都交给 AtomCode。八、打开网页看看最终效果完成之后打开项目中的index.html可以直接使用浏览器查看页面。如果 AtomCode 已经正确完成任务应该能够看到一个完整的校园活动报名页面。九、再让 AtomCode 自己进行一次优化第一版页面完成之后我没有自己修改 CSS。而是继续让 AtomCode 自己优化。输入现在请你重新检查刚才生成的网页。 从普通大学生用户的角度体验这个页面。 如果页面存在以下问题请你直接修改 - 页面信息层次不够清晰 - 文字和背景对比不明显 - 表单不够美观 - 按钮不够突出 - 页面在手机上显示不够合理。 请你自主判断需要修改的地方并完成优化。 不要只告诉我修改建议直接修改项目文件。这一次可以观察 AtomCode 是否会主动修改style.css或者script.js甚至根据需要调整index.html十、再次查看最终效果重新打开网页。优化之后页面的信息层级应该更加清楚。十一、测试报名功能页面看起来完成之后还需要测试一下交互功能。我直接在网页中填写姓名张三 学号20260001 联系方式13800000000然后点击立即报名如果 JavaScript 编写正确可以弹出报名成功提示。例如报名成功 感谢参加本次校园活动。这一部分也不需要我们自己编写 JavaScript。整个交互逻辑也是 AtomCode 根据最开始的需求完成的。十二、这次我几乎没有写代码完成整个项目之后再回头看整个过程会发现我们真正手动做的事情其实非常少。整个过程基本可以概括成创建空文件夹 ↓ 启动 AtomCode ↓ 提出完整需求 ↓ AtomCode 自己创建文件 ↓ AtomCode 自己写代码 ↓ AtomCode 自己检查 ↓ AtomCode 自己修改 ↓ 浏览器查看最终结果而不是传统的自己写 HTML ↓ 自己写 CSS ↓ 自己写 JavaScript ↓ 自己调样式 ↓ 自己找 Bug这也是这次实践和普通 AI 对话式编程比较明显的区别。十三、如果只让 AI 写代码会是什么样如果只是普通地问 AI“帮我写一个校园活动报名网页。”AI 很可能直接返回一大段 HTML、CSS 和 JavaScript。然后我们还需要复制代码创建文件粘贴代码保存打开网页发现问题再把代码复制给 AI让 AI 修改再复制回来。整个过程实际上仍然需要大量人工操作。而这次使用 AtomCode 的方式更加直接。我们把目标告诉它之后让智能体自己在项目中完成操作。因此这次体验让我感受到AI Coding Agent 和普通 AI 代码生成之间最大的区别之一并不是“谁写代码更快”而是谁能够真正参与到项目操作过程中。十四、这个案例还能怎么继续扩展完成基础版本之后其实还可以继续给 AtomCode 提需求。例如添加活动倒计时请给这个活动页面增加一个距离活动开始时间的倒计时。 请你自己完成代码修改和测试。增加报名人数请在报名区域增加当前报名人数显示。 点击报名后让人数自动增加。 请你自己完成修改。增加深色模式请给网页增加深色模式切换功能。 请你自己完成 HTML、CSS 和 JavaScript 的修改。增加手机端适配请重点检查这个网页在手机屏幕上的显示效果。 如果存在布局问题请你自己修改 CSS。这些需求仍然可以直接交给 AtomCode。也就是说第一版网页完成之后我们仍然可以通过自然语言继续让智能体完善项目。十五、这次实践最大的收获这次实践使用的项目非常简单。但它让我对 AI Coding Agent 有了一个比较直观的认识。以前我理解的 AI 编程工具更多是我写代码AI 帮我补代码。而这次体验更接近我提出目标AI 自己完成任务。虽然最终我们仍然需要检查 AI 的工作结果但很多具体的操作已经不需要自己一步一步完成。对于大学生来说这种方式尤其适合一些简单的课程实践、网页原型和个人项目。例如课程作业网页社团活动页面校园活动报名页面个人介绍页面个人简历网页简单的数据展示页面。这些项目本身并不复杂非常适合作为 AI Coding Agent 的入门实践。十六、总结这次实践从一个空文件夹开始没有提前编写任何代码。我只向 AtomCode 提出了一个完整的网页需求之后让它自主完成创建文件 → 编写代码 → 检查项目 → 修改问题 → 优化页面 → 完成最终网页。整个案例虽然简单但比较适合用来理解 AI Coding Agent 的基本工作方式。对于初学者而言不一定需要从复杂的软件项目开始。一个简单的校园活动网页就足以让我们看到从“让 AI 帮我写代码”到“让 AI 自己完成一个开发任务”其实是两种不同的使用方式。而这也是我这次使用 AtomCode 后最大的感受。如果以后面对更加复杂的项目只需要把需求进一步拆清楚再把具体的开发目标交给智能体就可以让 AI 在项目中承担更多实际工作。结语这次没有复杂的代码也没有复杂的环境配置。从一个空文件夹开始只给 AtomCode 一句话“帮我做一个校园活动报名网页后面的事情你自己完成。”最终就能够得到一个完整的网页项目。对于第一次接触 AI Coding Agent 的同学来说这可能是一个比较容易上手的实践案例。与其让 AI 只帮我们写一段代码不如试着直接给它一个目标看它能不能自己把整个任务完成。