★ FEATURED ARTICLE 一键开通华为云码道 CodeArts 代码智能体https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithd华为云码道 CodeArts 代码智能体是华为云推出的工程化 AI 编码产品把代码大模型、AI 原生 IDE 和自主开发模式结合在一起覆盖从需求拆解、代码生成到测试验证的研发全流程。核心能力项目级代码生成不只会写片段能根据需求描述产出工程级结构的代码支持探索和规范两种开发模式。Codebase 代码仓理解支持百万到千万行级代码索引和知识图谱构建能准确理解项目结构和依赖关系让 AI 生成的内容更贴合实际项目。Agent Team 多智能体协作内置 16 个专家智能体覆盖需求、架构、开发、测试、问题修复等环节可以模拟研发团队并行协同处理复杂任务。规范驱动开发把华为多年的研发经验沉淀成结构化规范生成和修改代码时自动对齐质量、安全和一致性要求。自定义智能体支持通过配置提示词、技能和工具集打造专属智能体作用范围可到项目级、个人级甚至企业级。二、实战中秋HR抽奖活动游戏系统开发中秋佳节来临不少企业HR会策划员工福利抽奖活动。传统线下抽奖、Excel随机抽签容易出现流程不透明、中奖记录难追溯、并发操作卡顿、名单重复中奖等问题。本次实战我们从零搭建一套面向HR使用的中秋抽奖游戏系统兼顾业务易用性与后台稳定性把节日活动需求落地成可交付的Web应用。2.1 业务痛点段落HR做节日抽奖核心诉求不只是随机抽人。员工端希望抽奖过程有仪式感动画交互烘托中秋氛围行政与HR侧需要支持白名单导入、中奖防重复、奖品分级配置、完整抽奖日志导出同时权限隔离普通员工不能篡改抽奖名单与结果。单纯前端随机算法不可信我们把随机逻辑放到服务端保证抽奖公平可审计。2.2 技术目标段落通过华为云码道这套中秋抽奖游戏系统兼顾节日UI体验与企业级抽奖能力。前端打造中秋主题页面包含转盘/翻牌抽奖动画后端实现人员名单导入、奖品池管理、抽奖幂等控制、中奖记录持久化同时增加后台管理面板HR可以在线配置奖品数量、设置活动启停、一键导出全部中奖明细适配企业内部局域网或内网门户部署。业务背景HR中秋抽奖活动的真实诉求需求拆解抽奖系统要解决哪些核心问题方案设计前后端架构与模块划分核心难点抽奖公平性、并发、防重复中奖交互实现中秋主题游戏页面开发如果你想我还可以写摘要、引言或者代码片段配套文字。这个内容适合做成完整技术博文工作任务模式能补齐摘要、配图描述、段落排版要不要用它继续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 编码助手与项目协作深度融合的产品特性。页面开发与测试全部完成灯谜答题、积分存储、转盘抽奖等核心交互经过Playwright端到端验证DOM重复ID这类前端bug已修复控制台无报错整套页面是零依赖单HTML文件浏览器可直接打开运行同时给出生产提示说明当前仅前端演示正式上线抽奖逻辑需要后端Redis做原子扣减与防重复中奖控制。用户询问文件下载位置后Agent返回了文件在环境内的路径/workspace/mid-autumn-festival.html当前环境无法提供外部下载链接支持在线预览可直接在预览面板体验灯谜、转盘和方案卡片需要本地保存文件时去workspace目录取出html文件即可。整个交互流程完整闭环从需求输入、代码编写、自动化测试、缺陷修复到页面交付、预览能力提供都在AtomGit平台的Agent对话内完成不需要切换外部开发工具适合快速产出HR活动类静态交互页面。但是这个工作区是没有东西的执行 Git 本地仓库初始化操作先校验 Git 版本与用户名、邮箱等用户配置确认环境就绪后在 /workspace 目录执行git init创建本地仓库基于 main 分支完成文件添加与首次 commit 提交提交信息标记为 feat 类型描述为中秋灯谜抽奖活动页面将 mid-autumn-festival.html 纳入版本管理。版本提交只在本地完成没有推送到远程仓库.codeartsdoer工具目录被排除不纳入版本控制当前仓库仅存在本地提交记录分支为 main提交哈希为 6ec4348文件共 897 行。Agent 完成本地版本托管之后主动询问是否推送至远程仓库提示可以提供 AtomGit、GitHub 这类远程仓库地址由 Agent 代为执行推送完成代码从本地到远端仓库的同步。当前正在AtomGit平台执行创建远程仓库流程系统先校验了ag auth status确认账号gcw_QH3W0VDS已正常登录接下来进入仓库参数确认环节第一步是选定仓库名称。提供了3个预设仓库名称选项mid-autumn-festival为推荐项和html文件名保持一致mid-autumn-lottery突出抽奖核心hr-mid-autumn-activity贴合HR员工活动业务背景也支持自定义名称。这是创建仓库的第1步选定名称后后续还会确认仓库可见性私有/公开完成仓库创建再把本地Git提交的中秋活动页面代码推送到AtomGit远程仓库。当前是AtomGit新建仓库的第二步确认仓库可见性。已完成仓库名称选择现在要选定仓库访问权限。提供两个核心选项公开为推荐选项仓库所有人可查看适合对外分享这个中秋活动页面私有仅账号本人可见适合内部HR活动不对外暴露代码。选定可见性并提交后平台就会创建远程仓库下一步会把本地Git里的中秋HTML页面代码推送到这个AtomGit远程仓库。仓库创建与代码推送全部完成仓库名称为mid-autumn-lottery仓库属性设为公开远程仓库地址已生成页面代码成功推送至main分支提交记录保留本次中秋灯谜抽奖页面。版本校验环节执行git remote -v与git log命令验证远程关联与最新提交记录Git Hooks校验也顺利通过本地代码和远程仓库保持同步。后续迭代路径已经明确若要新增页面功能、修改页面样式直接修改html源码再执行git commit git push就能更新远程仓库仓库链接可以直接分享给同事查看项目。远程仓库已成功创建并完成代码推送这是AtomGit平台上mid-autumn-lottery仓库的代码主页仓库归属账号gcw_QH3W0VDS当前处于main分支仅包含1次提交提交哈希为6ec43486提交信息标注为feat: 中秋灯谜抽奖活动页面整个仓库仅包含mid-autumn-festival.html这一个核心文件是8分钟前刚完成的首次提交。仓库功能架构完整顶部导航栏集成了代码、Issues、Pull Requests、项目讨论、Wiki、项目成员、分析、项目设置等标准代码托管平台能力右上角提供Watch、Star、Fork社交互动按钮支持Clone克隆仓库、下载ZIP压缩包、搜索文件等常规操作右侧项目介绍栏标注了项目定位为HR员工关怀·中秋灯谜抽奖活动页面纯前端零依赖并附带HTML技术标签与提交数统计。整个项目从需求输入、AI编码开发、自动化测试、bug修复、本地Git初始化到远程仓库托管的全流程已经全部闭环这个公开仓库链接可以直接分享给同事访问查看后续如果需要调整页面内容只需要修改HTML源码后重新提交推送就能同步更新远程仓库的版本。三、页面体验四、总结本文以企业HR中秋员工关怀抽奖场景为实战案例完整演示了华为云码道CodeArts代码智能体AtomGit的AI工程化开发全链路。从HR真实业务痛点出发拆解灯谜答题、积分、转盘抽奖的业务需求完成系统方案设计由多智能体自主生成中秋主题单文件HTML页面AI自动完成JS语法校验、转盘抽奖算法模拟、Playwright浏览器端到端自动化测试自动定位并修复DOM重复ID等前端隐性Bug。页面内置灯谜答题、积分存储、权重转盘抽奖、本地中奖记录持久化能力拥有中秋氛围感动画开箱即用。开发完成后在平台内完成Git本地初始化、提交一键创建AtomGit公开远程仓库并推送代码实现需求输入、编码、自测、缺陷修复、版本托管一站式闭环。同时区分了前端演示页面与生产级抽奖系统差异指出正式上线需后端支撑实现抽奖幂等、防重复中奖、中奖日志可审计为企业内部节日活动页面快速交付提供可复用的AI工程实践方案。
阅读完成 · 觉得有帮助？
