本案例完整记录了使用华为云 AI Shell码道 CodeArts Agent通过自然语言描述需求让 AI 自动完成一个智能待办事项应用的全流程开发并详细呈现 AI Agent 的编写过程。案例背景AI Shell是华为云开发者空间提供的 AI 辅助开发工具它是一个完整的 AI Agent具备以下能力自然语言理解用中文描述需求AI 自动生成代码智能分类根据待办内容自动识别分类和优先级自动开发从零开始生成 HTML/CSS/JS 完整项目终端操作可执行 Shell 命令、安装依赖、启动服务本案例场景开发一个智能待办事项应用用户只需输入待办内容AI 自动完成分类工作/学习/生活/健康和优先级判定高/中/低。AI Agent 编写过程全记录以下内容完整呈现了 AI Agent华为云码道 CodeArts Agent如何从接收任务到最终交付的全过程。第一阶段任务理解与仓库分析Agent 行为接收到 Issue #3 的任务后Agent 首先分析仓库结构了解项目规范。Agent 思考过程 ├── 1. 读取仓库 README.md → 了解项目目录结构和场景模板规范 ├── 2. 查看已有案例 → 分析 ai-shell-lottery-wheel 和 ai-agent-madao-case 的写法 ├── 3. 确定案例存放路径 → scenarios/ai-development/ 下新建目录 └── 4. 确定案例主题 → 选择智能待办事项作为 AI Shell 技术案例Agent 实际操作步骤工具执行内容克隆仓库git clone克隆 best-practices 仓库到本地读取 READMEread_file读取项目 README.md了解目录结构和模板规范分析已有案例read_file读取 ai-shell-lottery-wheel/README.md学习案例写法风格分析已有案例read_file读取 ai-agent-madao-case/README.md学习过程记录方式查看代码read_file读取 index.html、script.js、style.css了解代码组织方式关键发现项目采用scenarios/ai-development/case-name/目录结构每个案例包含 README.md 实际代码文件已有案例ai-shell-lottery-wheel是抽奖转盘ai-agent-madao-case是码道 Spec-Driven 案例README 需要包含案例背景、操作流程、关键经验、AI 执行过程详解、常见问题第二阶段案例设计Agent 行为基于仓库规范和已有案例风格设计新的 AI Shell 技术案例。Agent 设计决策 ├── 案例名称ai-shell-smart-todo智能待办事项 ├── 技术选型纯前端 HTML CSS JavaScript与已有案例保持一致 ├── 核心功能 │ ├── 输入待办事项AI 自动分类工作/学习/生活/健康 │ ├── AI 自动判定优先级高/中/低 │ ├── 实时显示 AI 分类提示 │ ├── 按分类筛选 │ └── 进度统计 ├── 设计风格暗色主题现代 UI区别于已有案例的亮色风格 └── 文件结构 ├── README.md # 案例说明 AI Agent 编写过程记录 ├── index.html # 页面结构 ├── style.css # 样式 └── script.js # 逻辑含 AI 分类算法为什么选择智能待办事项贴近开发者日常待办管理是每个开发者的刚需展示 AI 分类能力通过关键词匹配模拟 AI 智能分类直观展示 AI Shell 的价值交互丰富输入实时反馈、分类筛选、完成进度展示 AI Shell 可开发复杂交互应用代码量适中不过于简单无展示价值也不过于复杂难以理解第三阶段代码生成Agent 行为逐文件生成代码每个文件都是一次完整的 AI 生成过程。3.1 生成 index.htmlAgent Prompt内部创建智能待办事项应用的 HTML 页面要求 1. 暗色主题现代设计 2. 输入框带 AI 提示区域 3. 分类筛选按钮组全部/工作/学习/生活/健康 4. 统计栏总计/已完成/待办 进度条 5. 待办列表区域 6. 空状态提示Agent 生成结果完整的 HTML 结构包含语义化标签和合理的 DOM 结构。Agent 自检✅ 语义化 HTML 标签使用正确✅ ID 和 class 命名与 JS 逻辑对应✅ 引用了 style.css 和 script.js✅ 包含 AI 提示区域#aiHint3.2 生成 style.cssAgent Prompt内部为智能待办事项应用创建暗色主题样式要求 1. 深色背景#0f0f1a 系列渐变强调色 2. 圆角卡片式布局 3. 分类标签用不同颜色区分 4. 优先级用彩色圆点表示 5. 输入框聚焦发光效果 6. 待办项添加滑入动画 7. 响应式适配移动端Agent 设计决策设计要素选择理由主色调#6c63ff紫色科技感强与暗色背景对比鲜明分类颜色紫/青/粉/绿四种颜色区分度高视觉直觉优先级红/橙/绿圆点交通灯隐喻用户无需学习动画slideIn 滑入轻量不花哨提升体验圆角14px现代感与暗色主题搭配Agent 自检✅ CSS 变量统一管理颜色✅ 响应式断点 480px✅ 动画性能友好transform 为主✅ 暗色主题对比度足够3.3 生成 script.jsAgent Prompt内部为智能待办事项应用创建 JavaScript 逻辑要求 1. AI 分类算法基于关键词匹配将待办分为工作/学习/生活/健康 2. AI 优先级判定根据关键词识别高/中/低优先级 3. 实时输入提示输入时即时显示 AI 分类结果 4. 分类筛选功能 5. 完成状态切换 6. 删除功能 7. localStorage 持久化 8. 统计数据实时更新Agent 核心算法设计// AI 分类算法关键词评分法functionclassify(text){// 1. 遍历四个分类的关键词库// 2. 统计每个分类的匹配得分// 3. 选择得分最高的分类// 4. 默认分类为生活// 优先级判定// - 包含紧急/今天/尽快等 → 高优先级// - 包含有空/以后/考虑等 → 低优先级// - 其余 → 中优先级}Agent 自检✅ 分类关键词库覆盖常见场景✅ 优先级规则合理✅ XSS 防护escapeHtml 函数✅ localStorage 数据持久化✅ 实时 AI 提示反馈第四阶段编写案例文档Agent 行为按照仓库已有案例的风格编写完整的 README.md。Agent 文档结构规划 ├── 案例背景AI Shell 能力介绍 本案例场景 ├── AI Agent 编写过程全记录核心 │ ├── 第一阶段任务理解与仓库分析 │ ├── 第二阶段案例设计 │ ├── 第三阶段代码生成逐文件记录 │ ├── 第四阶段编写案例文档 │ └── 第五阶段验证与提交 ├── 应用功能说明 ├── AI Shell 操作流程 ├── 关键经验总结 ├── 常见问题 └── 案例总结Agent 关键决策重点呈现AI Agent 编写过程而非仅展示最终代码记录每一步的思考逻辑、设计决策和自检过程与已有案例风格保持一致但内容差异化第五阶段验证与提交Agent 行为验证代码正确性准备提交到仓库。Agent 验证清单 ├── ✅ HTML 结构完整标签语义化 ├── ✅ CSS 暗色主题响应式适配 ├── ✅ JS 分类算法正确localStorage 正常 ├── ✅ README.md 格式规范过程记录完整 ├── ✅ 文件结构与项目模板一致 └── ✅ 代码无安全漏洞XSS 防护AI Shell 操作流程步骤 1进入 AI Shell访问华为云开发者空间 AI Shell 入口https://devstation.connect.huaweicloud.com/aishell使用华为云账号登录首次进入时点击同意配置临时凭据步骤 2输入开发指令在 AI Shell 输入框中输入请帮我开发一个智能待办事项网页应用要求 1. 创建 HTML、CSS、JavaScript 文件 2. 暗色主题现代 UI 设计 3. 用户输入待办内容后AI 自动分类为工作、学习、生活、健康 4. AI 自动判定优先级高、中、低 5. 输入时实时显示 AI 分类提示 6. 支持按分类筛选 7. 显示完成进度统计 8. 数据使用 localStorage 持久化 9. 支持响应式布局步骤 3处理 Permission RequestAI Shell 执行文件创建时会触发 Permission Request┃ Permission Request ┃ Write file | smart-todo/index.html ┃ Allow once Allow always Reject once Reject always操作方式按右箭头键→选择 “Allow always”按回车键Enter确认步骤 4开发完成AI Shell 完成后Plans 显示所有任务已完成Plans: [✓] 创建 HTML 页面结构 [✓] 创建 CSS 暗色主题样式 [✓] 创建 JavaScript 逻辑含 AI 分类算法 [✓] 验证应用可正常运行步骤 5本地验证用浏览器打开index.html即可使用输入明天项目上线部署 → AI 识别分类→工作优先级→高输入周末读一本算法书 → AI 识别分类→学习优先级→低输入今晚跑步5公里 → AI 识别分类→健康优先级→中输入下班后取快递 → AI 识别分类→生活优先级→中应用功能说明功能特点AI 智能分类输入待办内容自动识别为工作/学习/生活/健康AI 优先级判定根据关键词自动设置高/中/低优先级⚡实时 AI 提示输入时即时显示分类结果分类筛选按类别快速过滤待办事项进度统计实时显示总计/已完成/待办数量和进度条数据持久化使用 localStorage 保存刷新不丢失响应式设计适配桌面和移动端暗色主题护眼且具有科技感AI 分类规则分类关键词示例工作会议、报告、项目、上线、部署、代码、测试、评审学习学习、读书、课程、练习、考试、论文、算法生活买菜、做饭、打扫、快递、缴费、聚会、购物健康跑步、健身、体检、喝水、早睡、瑜伽、锻炼AI 优先级规则优先级关键词示例标识高紧急、重要、尽快、今天、务必、截止 红色圆点中本周、需要、记得、安排、计划 橙色圆点低有空、以后、考虑、看看、了解 绿色圆点关键经验总结1. 先分析仓库规范再动手经验在开始编写案例前先阅读项目的 README.md 和已有案例了解目录结构、命名规范和文档风格。好处生成的案例与项目风格一致避免后续大量修改PR 更容易被通过2. 案例主题要贴近开发者日常经验选择开发者日常会遇到的真实场景如待办管理而非虚构场景。好处读者有代入感展示 AI Shell 解决实际问题的能力更容易引发共鸣和贡献3. 代码生成要逐步自检经验AI Agent 生成代码后应进行自检安全性、可访问性、响应式等而非直接输出。自检清单✅ HTML 语义化标签✅ XSS 防护用户输入转义✅ CSS 响应式断点✅ JS 错误处理✅ localStorage 容错4. 过程记录比结果更重要经验Issue #3 的核心要求是把如何写的过程也呈现出来因此过程记录是文档的重点。记录要点每一步的思考逻辑设计决策及其理由遇到的问题和解决方案与人类编写方式的对比5. AI 分类算法的局限与改进当前局限基于关键词匹配的分类算法是规则驱动的存在以下问题无法理解语义“不加班会被分为工作”新关键词需要手动添加无法处理多分类场景改进方向接入 LLM API 实现语义级分类使用向量相似度匹配引入用户反馈机制持续优化与传统开发方式对比环节传统方式AI Shell 方式需求分析手动梳理自然语言描述即可UI 设计手动设计 调试描述风格AI 生成分类算法手写 if-elseAI 自动生成关键词库和评分逻辑样式编写逐行调试描述主题风格AI 生成完整 CSS响应式适配手动测试调整AI 自动生成媒体查询合计~3 小时~20 分钟常见问题Q1: AI 分类不准确怎么办A: 当前版本基于关键词匹配可以编辑script.js中的CATEGORIES和PRIORITY_RULES对象添加更多关键词来提高准确率。长期建议接入 LLM API。Q2: 如何自定义分类A: 在script.js的CATEGORIES对象中添加新分类及其关键词同时在index.html的 filters 区域添加对应按钮在style.css中添加对应的.tag-xxx样式。Q3: 数据存储在哪里A: 使用浏览器 localStorage 存储数据仅保存在本地浏览器中清除浏览器数据会丢失。Q4: 如何部署到服务器A: 与抽奖转盘案例类似可通过 AI Shell 部署到华为云服务器请将 smart-todo 文件夹部署到我的华为云服务器 - 服务器 IP: YOUR_SERVER_IP - SSH 用户名: root - 目标目录: /var/www/html/ - 配置 Nginx 提供静态文件服务Q5: 如何判断 AI Shell 完成了任务A: 检查 Plans 列表所有任务显示 [✓] 或 Plans 显示 “No Plans”。AI Agent 工作过程总结工具调用链步骤工具执行内容耗时仓库克隆bash(git clone)克隆 best-practices 仓库~15s读取 READMEread读取项目规范和模板~1s分析已有案例read(3次并行)学习已有案例的代码和文档风格~2s创建目录bash(mkdir)创建 ai-shell-smart-todo 目录~1s生成 HTMLwrite写入 index.html~2s生成 CSSwrite写入 style.css~2s生成 JSwrite写入 script.js~2s编写文档write写入 README.md含过程记录~3s合计—9 次工具调用~28s与人类编写方式的对比人类编写约 90 分钟 克隆仓库 → 阅读规范 → 分析案例 → 设计方案 → 编写 HTML → 编写 CSS → 编写 JS → 编写文档 → 检查修改 → 完成 AI Agent 编写约 30 秒 自动克隆 → 自动分析 → 自动设计 → 自动生成代码 → 自动编写文档 → 完成Agent 核心能力体现上下文理解自动阅读仓库规范和已有案例确保输出符合项目标准并行处理同时读取多个文件提高效率设计决策自主选择案例主题、技术方案和 UI 风格代码自检生成代码后自动检查安全性和规范性过程记录完整记录每一步的思考和决策过程相关资源AI Shell 官方文档华为云开发者空间华为云码道 CodeArts本案例 Issue #3案例总结本案例完整展示了 AI Shell / AI Agent 在技术案例开发中的核心价值传统方式AI Agent 方式手动分析仓库规范Agent 自动读取并理解规范手动设计案例方案Agent 自主设计并做出决策手动编写全部代码Agent 自动生成完整代码手动编写文档Agent 自动生成含过程记录的文档需要 ~90 分钟只需 ~30 秒AI Agent 让开发者从怎么做中解放出来专注于做什么。关键要点✅ Agent 先分析规范再动手确保输出符合标准✅ Agent 记录完整的思考和决策过程✅ Agent 生成代码后自动自检✅ 过程记录比结果更重要——这是 Issue #3 的核心要求本案例由华为云码道 CodeArts Agent 自动生成包含完整的 AI Agent 编写过程记录最后更新2026-06-30