一键开通华为云码道 CodeArts 代码智能体：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwatomgit1&sourcead=dmzntgwatomgithd

华为云码道 CodeArts 代码智能体是华为云推出的‌工程化 AI 编码产品‌，把代码大模型、AI 原生 IDE 和自主开发模式结合在一起，覆盖从需求拆解、代码生成到测试验证的研发全流程。‌‌

核心能力：

• 项目级代码生成‌：不只会写片段，能根据需求描述产出工程级结构的代码，支持探索和规范两种开发模式。
• Codebase 代码仓理解‌：支持百万到千万行级代码索引和知识图谱构建，能准确理解项目结构和依赖关系，让 AI 生成的内容更贴合实际项目。
• Agent Team 多智能体协作‌：内置 16 个专家智能体，覆盖需求、架构、开发、测试、问题修复等环节，可以模拟研发团队并行协同处理复杂任务。
• 规范驱动开发‌：把华为多年的研发经验沉淀成结构化规范，生成和修改代码时自动对齐质量、安全和一致性要求。
• 自定义智能体‌：支持通过配置提示词、技能和工具集打造专属智能体，作用范围可到项目级、个人级甚至企业级。‌‌

二、实战中秋HR抽奖活动游戏系统开发：

中秋佳节来临，不少企业HR会策划员工福利抽奖活动。传统线下抽奖、Excel随机抽签，容易出现流程不透明、中奖记录难追溯、并发操作卡顿、名单重复中奖等问题。本次实战，我们从零搭建一套面向HR使用的中秋抽奖游戏系统，兼顾业务易用性与后台稳定性，把节日活动需求落地成可交付的Web应用。

2.1 业务痛点段落

HR做节日抽奖，核心诉求不只是随机抽人。员工端希望抽奖过程有仪式感，动画交互烘托中秋氛围；行政与HR侧，需要支持白名单导入、中奖防重复、奖品分级配置、完整抽奖日志导出，同时权限隔离，普通员工不能篡改抽奖名单与结果。单纯前端随机算法不可信，我们把随机逻辑放到服务端，保证抽奖公平可审计。

2.2 技术目标段落

通过"华为云码道"这套中秋抽奖游戏系统，兼顾节日UI体验与企业级抽奖能力。前端打造中秋主题页面，包含转盘/翻牌抽奖动画；后端实现人员名单导入、奖品池管理、抽奖幂等控制、中奖记录持久化；同时增加后台管理面板，HR可以在线配置奖品数量、设置活动启停、一键导出全部中奖明细，适配企业内部局域网或内网门户部署。

1. 业务背景：HR中秋抽奖活动的真实诉求
2. 需求拆解：抽奖系统要解决哪些核心问题
3. 方案设计：前后端架构与模块划分
4. 核心难点：抽奖公平性、并发、防重复中奖
5. 交互实现：中秋主题游戏页面开发

如果你想，我还可以写摘要、引言或者代码片段配套文字。
这个内容适合做成完整技术博文，工作任务模式能补齐摘要、配图描述、段落排版，要不要用它继续？

---

2.3 先给出提示词

这是 AtomGit 平台的界面，左侧展示个人工作台、项目列表与各类协作入口，中间区域为 Agent 对话管理面板，右侧对话窗口内输入了一段需求，希望借助华为云码道生成中秋活动 HTML 页面，围绕 HR 中秋抽奖活动的真实诉求，梳理需求拆解、前后端架构与模块划分，同时解决抽奖公平性、并发、防重复中奖等难点，完成中秋主题游戏页面的交互开发。

帮我生成一个中秋节活动的html页面，比如谜题，1. 业务背景：HR中秋抽奖活动的真实诉求
2. 需求拆解：抽奖系统要解决哪些核心问题
3. 方案设计：前后端架构与模块划分
4. 核心难点：抽奖公平性、并发、防重复中奖
5. 交互实现：中秋主题游戏页面开发

这张截图展示的是 AtomGit 平台的工作界面，左侧区域承载着个人工作台相关内容，能看到当前登录用户信息、AtomCode 入口、项目列表以及 Issue、Pull Requests、讨论等各类协作功能菜单，中间面板是 Agent 对话管理模块，这里记录了当前账号下已发起的对话会话，右侧主窗口就是华为云码道 Agent 的对话交互页面，上半部分可以看到刚刚提交的需求指令，系统已经标记为执行中状态，下方展开了 AI 的深度思考内容，AI 正在对用户提出的需求做完整的理解与方案推演，识别出用户想要开发适配 HR 中秋抽奖活动的 HTML 页面，包含灯谜谜题类互动玩法。

同时梳理业务背景、系统核心问题、前后端架构方案、抽奖公平并发等技术难点以及页面交互开发工作，AI 还在持续判断需求边界，区分纯前端页面演示和完整业务抽奖系统的差异，规划页面里中秋主题视觉、猜谜游戏、抽奖转盘等内容，同时校验可用的技能工具，评估是否可以直接完成网页代码的开发，整个过程直观呈现了在 AtomGit 平台内调用华为云码道 Agent，接收开发需求并自动进行需求拆解、方案构思的完整工作流程，能够把业务诉求转化为可落地的网页开发思路，将 AI 能力融入代码仓库与项目协作的场景之中。

华为云码道 Agent 正持续处理中秋抽奖 HTML 页面的开发任务，并且已经进入代码校验与算法验证阶段，系统自动拆解出多项子任务，任务面板清晰展示出任务的完成与进行状态。红框内可以看到 Agent 调用 Bash 命令，使用 Node 环境提取页面内的 JS 代码并完成语法校验，语法校验通过之后，继续针对抽奖转盘的落点算法开展纯数学层面的验证，通过编写测试脚本模拟转盘抽奖逻辑，反复校验角度计算、扇形区间判定、权重分配等核心逻辑，排查边界场景下的计算错误，确保转盘抽奖结果准确可靠，规避并发、随机权重带来的逻辑漏洞，整个过程把前端页面开发拆分为代码语法检查、业务算法验证等多个可执行子任务，依托平台内置的执行环境自动运行测试脚本，在正式生成完整页面代码前提前验证核心抽奖逻辑，把 AI 开发能力和代码仓库、任务管理深度结合起来，让网页交互功能的开发过程更加严谨可控。

右侧主对话窗口则完整呈现了中秋抽奖 HTML 页面开发任务的调试迭代过程，红框标注的区域尤为关键，这里可以看到 Agent 正在解决 Playwright 浏览器自动化测试的环境兼容问题 —— 系统先是运行端到端验证脚本，随后通过 Bash 命令查看 playwright 的缓存目录结构，经过深度思考后发现完整 chromium 浏览器已经缓存但 headless shell 版本缺失，于是果断调整测试脚本的启动方式，直接将 executablePath 指向已有的 chromium 可执行文件，修改完成后再次重新运行端到端验证，确认浏览器环境适配成功，红框下方还能看到后续灯谜功能的调试细节，Agent 正在排查页面 reload 后元素等待超时的问题，通过调整等待策略和选择器定位方式来确保灯谜按钮能被正确识别，整个界面把 AI 开发助手自动定位环境问题、修改代码、重新验证的完整闭环过程直观地呈现出来，充分体现了 AtomGit 平台将 AI 编码能力与项目协作、任务管理深度融合的产品特性，让业务需求到可运行网页的落地过程变得透明且可控。

AI 在自动化端到端测试的过程中捕获页面渲染异常，顺着日志逐层定位到 DOM 结构层面的根源问题，页面里外层 section 标签和内部嵌套 div 标签使用了完全相同的 wheel 标识 ID，而浏览器的 getElementById 查询规则只会返回匹配到的第一个元素，也就是外层的 section，后续执行 innerHTML 赋值操作时，就会直接覆盖掉内部存放奖品数据的 prizeList，造成奖品信息丢失，打断页面后续渲染流程，plans 模块也存在一模一样的重复 ID 缺陷，AI 在定位故障之后，同步梳理出完整的修复思路，准备修改冲突元素的 ID 名称，同步更新页面导航锚点链接，同时全面巡检页面其余元素，排查是否存在其他 ID 冲突隐患，在修改完成后重新执行完整的自动化测试，验证修复效果，整个过程直观展现出 AI 辅助前端开发的能力，能够自动执行页面测试，深入底层 DOM 结构排查这类容易被人工忽略的前端基础 bug，并且同步输出对应的修复方案，把编码、自测、排错的流程整合在 AtomGit 项目协作平台内部，不用切换外部工具就可以持续迭代网页项目。

右侧对话窗口里已经完成了整套 HTML 页面的生成与全量验证，红框内汇总了页面包含的四大功能板块，内置八道中秋灯谜，答题后会即时反馈对错、展示答案解析并累计积分，还有带有权重随机落点的幸运转盘抽奖模块，抽奖消耗积分并弹出中奖提示，利用本地存储持久化保存用户积分与中奖记录，页面内还设计了可展开的方案全景卡片，完整收纳业务背景、需求拆解、架构设计等前期规划内容，视觉层面搭配星空动画、圆月、飘动云层等中秋主题效果，页面支持全响应式适配。

下方还展示了基于 Playwright 开展的真实浏览器端到端测试结果，答题积分、抽奖逻辑、转盘算法都经过大量模拟验证，之前排查出的 DOM 重复 ID 问题也已经修复完成，页面为零依赖纯前端文件，可直接在浏览器打开运行，同时标注了前端仅作交互演示，真实线上抽奖需要后端配合完成幂等控制与防重复中奖的能力。

AtomGit 平台中华为云码道 Agent 完成中秋抽奖 HTML 页面开发后的最终交付界面，左侧依旧保留着熟悉的个人工作台侧边栏，排布着当前登录用户的信息、AtomCode 入口、参与项目列表以及 Issue、Pull Requests、讨论、看板等各类协作功能入口，中间面板清晰展示着本次创建的两场 Agent 对话会话，右侧主对话窗口完整呈现了整个项目收尾与交付的全过程，AI 首先完成了程序化验证，确认转盘扇区颜色严格按金红交替排列、标签顺序完全正确，纠正了之前视觉工具对相近色系的误判，随后执行 Bash 命令清理掉所有临时验证文件并更新待办任务，最终正式交付名为 mid-autumn-festival.html 的零依赖纯前端页面文件，用户直接用浏览器打开即可运行。

这个页面一共整合了四大核心功能板块，内置八道中秋猜灯谜题目，选中选项后即时判定对错并高亮显示答案解析，每答对一道题就能获得十分积分，幸运转盘模块设置了六个奖品扇区，按照权重随机决定落点，每次抽奖消耗二十分积分，抽奖后会弹出中奖弹窗并完整记录中奖历史，用户的积分和中奖记录都会通过 localStorage 持久化保存在本地，方案全览模块把之前梳理的业务背景、需求拆解、方案设计、核心难点、交互实现这五项内容做成了可展开的卡片形式，点开就能查看完整的方案说明，视觉层面也做了完整的中秋主题设计，搭配星空眨眼动画、发光圆月、飘动云层和灯笼暖金配色，整页支持全响应式适配。

下方还详细列出了基于 Playwright 真实浏览器执行的端到端测试验证结果，答题加分、下一题切换、刷新后状态持久化、抽奖扣分、弹窗与 “谢谢参与” 提示以及中奖记录保存功能全部测试通过，转盘落点算法也经过五千次模拟全部命中正确的目标扇区，之前发现的 section 与 div 重复 ID 导致渲染崩溃的 bug 也已经修复完成，控制台零报错，红箭头指向的底部任务面板显示三项核心任务全部顺利完成，分别是创建中秋活动 HTML 页面、校验 HTML 内嵌 JS 语法正确性以及本地预览验证页面效果，整个界面完整呈现了 AI 从需求理解、代码开发、自动化测试、bug 修复到最终交付的全流程闭环，充分体现了 AtomGit 平台将 AI 编码助手与项目协作深度融合的产品特性。

• 1. 页面开发与测试全部完成，灯谜答题、积分存储、转盘抽奖等核心交互经过Playwright端到端验证，DOM重复ID这类前端bug已修复，控制台无报错，整套页面是零依赖单HTML文件，浏览器可直接打开运行，同时给出生产提示，说明当前仅前端演示，正式上线抽奖逻辑需要后端Redis做原子扣减与防重复中奖控制。
• 2. 用户询问文件下载位置后，Agent返回了文件在环境内的路径/workspace/mid-autumn-festival.html，当前环境无法提供外部下载链接，支持在线预览，可直接在预览面板体验灯谜、转盘和方案卡片，需要本地保存文件时，去workspace目录取出html文件即可。
• 3. 整个交互流程完整闭环，从需求输入、代码编写、自动化测试、缺陷修复，到页面交付、预览能力提供，都在AtomGit平台的Agent对话内完成，不需要切换外部开发工具，适合快速产出HR活动类静态交互页面。

但是这个工作区是没有东西的？？

• 1. 执行 Git 本地仓库初始化操作，先校验 Git 版本与用户名、邮箱等用户配置，确认环境就绪后，在 /workspace 目录执行git init创建本地仓库，基于 main 分支完成文件添加与首次 commit 提交，提交信息标记为 feat 类型，描述为中秋灯谜抽奖活动页面，将 mid-autumn-festival.html 纳入版本管理。
• 2. 版本提交只在本地完成，没有推送到远程仓库，.codeartsdoer工具目录被排除，不纳入版本控制，当前仓库仅存在本地提交记录，分支为 main，提交哈希为 6ec4348，文件共 897 行。
• 3. Agent 完成本地版本托管之后，主动询问是否推送至远程仓库，提示可以提供 AtomGit、GitHub 这类远程仓库地址，由 Agent 代为执行推送，完成代码从本地到远端仓库的同步。

• 1. 当前正在AtomGit平台执行创建远程仓库流程，系统先校验了ag auth status，确认账号gcw_QH3W0VDS已正常登录，接下来进入仓库参数确认环节，第一步是选定仓库名称。
• 2. 提供了3个预设仓库名称选项，mid-autumn-festival为推荐项，和html文件名保持一致；mid-autumn-lottery突出抽奖核心；hr-mid-autumn-activity贴合HR员工活动业务背景，也支持自定义名称。
• 3. 这是创建仓库的第1步，选定名称后，后续还会确认仓库可见性（私有/公开），完成仓库创建，再把本地Git提交的中秋活动页面代码推送到AtomGit远程仓库。

• 1. 当前是AtomGit新建仓库的第二步，确认仓库可见性。已完成仓库名称选择，现在要选定仓库访问权限。
• 2. 提供两个核心选项：公开为推荐选项，仓库所有人可查看，适合对外分享这个中秋活动页面；私有仅账号本人可见，适合内部HR活动，不对外暴露代码。
• 3. 选定可见性并提交后，平台就会创建远程仓库，下一步会把本地Git里的中秋HTML页面代码推送到这个AtomGit远程仓库。

• 1. 仓库创建与代码推送全部完成，仓库名称为mid-autumn-lottery，仓库属性设为公开，远程仓库地址已生成，页面代码成功推送至main分支，提交记录保留本次中秋灯谜抽奖页面。
• 2. 版本校验环节执行git remote -v与git log命令，验证远程关联与最新提交记录，Git Hooks校验也顺利通过，本地代码和远程仓库保持同步。
• 3. 后续迭代路径已经明确，若要新增页面功能、修改页面样式，直接修改html源码，再执行git commit && git push就能更新远程仓库，仓库链接可以直接分享给同事查看项目。

• 1. 远程仓库已成功创建并完成代码推送，这是AtomGit平台上mid-autumn-lottery仓库的代码主页，仓库归属账号gcw_QH3W0VDS，当前处于main分支，仅包含1次提交，提交哈希为6ec43486，提交信息标注为"feat: 中秋灯谜抽奖活动页面"，整个仓库仅包含mid-autumn-festival.html这一个核心文件，是8分钟前刚完成的首次提交。
• 2. 仓库功能架构完整，顶部导航栏集成了代码、Issues、Pull Requests、项目讨论、Wiki、项目成员、分析、项目设置等标准代码托管平台能力，右上角提供Watch、Star、Fork社交互动按钮，支持Clone克隆仓库、下载ZIP压缩包、搜索文件等常规操作，右侧项目介绍栏标注了项目定位为"HR员工关怀·中秋灯谜抽奖活动页面（纯前端零依赖）"，并附带HTML技术标签与提交数统计。
• 3. 整个项目从需求输入、AI编码开发、自动化测试、bug修复、本地Git初始化到远程仓库托管的全流程已经全部闭环，这个公开仓库链接可以直接分享给同事访问查看，后续如果需要调整页面内容，只需要修改HTML源码后重新提交推送，就能同步更新远程仓库的版本。

---

三、页面体验：

四、总结：

本文以企业HR中秋员工关怀抽奖场景为实战案例，完整演示了华为云码道CodeArts代码智能体+AtomGit的AI工程化开发全链路。从HR真实业务痛点出发，拆解灯谜答题、积分、转盘抽奖的业务需求，完成系统方案设计，由多智能体自主生成中秋主题单文件HTML页面；AI自动完成JS语法校验、转盘抽奖算法模拟、Playwright浏览器端到端自动化测试，自动定位并修复DOM重复ID等前端隐性Bug。页面内置灯谜答题、积分存储、权重转盘抽奖、本地中奖记录持久化能力，拥有中秋氛围感动画，开箱即用。

开发完成后，在平台内完成Git本地初始化、提交，一键创建AtomGit公开远程仓库并推送代码，实现需求输入、编码、自测、缺陷修复、版本托管一站式闭环。同时区分了前端演示页面与生产级抽奖系统差异，指出正式上线需后端支撑，实现抽奖幂等、防重复中奖、中奖日志可审计，为企业内部节日活动页面快速交付提供可复用的AI工程实践方案。