本案例完整记录了使用华为云 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 实际操作：

关键发现：

1. 项目采用scenarios/ai-development/<case-name>/目录结构
2. 每个案例包含 README.md + 实际代码文件
3. 已有案例ai-shell-lottery-wheel是抽奖转盘，ai-agent-madao-case是码道 Spec-Driven 案例
4. 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 分类算法）

为什么选择"智能待办事项"：

1. 贴近开发者日常：待办管理是每个开发者的刚需
2. 展示 AI 分类能力：通过关键词匹配模拟 AI 智能分类，直观展示 AI Shell 的价值
3. 交互丰富：输入实时反馈、分类筛选、完成进度，展示 AI Shell 可开发复杂交互应用
4. 代码量适中：不过于简单（无展示价值），也不过于复杂（难以理解）

第三阶段：代码生成

Agent 行为：逐文件生成代码，每个文件都是一次完整的 AI 生成过程。

3.1 生成 index.html

Agent Prompt（内部）：

创建智能待办事项应用的 HTML 页面，要求： 1. 暗色主题，现代设计 2. 输入框带 AI 提示区域 3. 分类筛选按钮组（全部/工作/学习/生活/健康） 4. 统计栏（总计/已完成/待办 + 进度条） 5. 待办列表区域 6. 空状态提示

Agent 生成结果：完整的 HTML 结构，包含语义化标签和合理的 DOM 结构。

Agent 自检：

• ✅ 语义化 HTML 标签使用正确
• ✅ ID 和 class 命名与 JS 逻辑对应
• ✅ 引用了 style.css 和 script.js
• ✅ 包含 AI 提示区域#aiHint

3.2 生成 style.css

Agent Prompt（内部）：

为智能待办事项应用创建暗色主题样式，要求： 1. 深色背景（#0f0f1a 系列），渐变强调色 2. 圆角卡片式布局 3. 分类标签用不同颜色区分 4. 优先级用彩色圆点表示 5. 输入框聚焦发光效果 6. 待办项添加滑入动画 7. 响应式适配移动端

Agent 设计决策：

Agent 自检：

• ✅ CSS 变量统一管理颜色
• ✅ 响应式断点 480px
• ✅ 动画性能友好（transform 为主）
• ✅ 暗色主题对比度足够

3.3 生成 script.js

Agent 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

1. 访问华为云开发者空间 AI Shell 入口：

   https://devstation.connect.huaweicloud.com/aishell

2. 使用华为云账号登录
3. 首次进入时点击"同意"配置临时凭据

步骤 2：输入开发指令

在 AI Shell 输入框中输入：

请帮我开发一个智能待办事项网页应用，要求： 1. 创建 HTML、CSS、JavaScript 文件 2. 暗色主题，现代 UI 设计 3. 用户输入待办内容后，AI 自动分类为：工作、学习、生活、健康 4. AI 自动判定优先级：高、中、低 5. 输入时实时显示 AI 分类提示 6. 支持按分类筛选 7. 显示完成进度统计 8. 数据使用 localStorage 持久化 9. 支持响应式布局

步骤 3：处理 Permission Request

AI Shell 执行文件创建时会触发 Permission Request：

┃ Permission Request ┃ Write file | smart-todo/index.html ┃ Allow once Allow always Reject once Reject always

操作方式：

1. 按右箭头键（→）选择 “Allow always”
2. 按回车键（Enter）确认

步骤 4：开发完成

AI Shell 完成后，Plans 显示所有任务已完成：

Plans: [✓] 创建 HTML 页面结构 [✓] 创建 CSS 暗色主题样式 [✓] 创建 JavaScript 逻辑（含 AI 分类算法） [✓] 验证应用可正常运行

步骤 5：本地验证

用浏览器打开index.html即可使用：

1. 输入"明天项目上线部署" → AI 识别：分类→工作，优先级→高
2. 输入"周末读一本算法书" → AI 识别：分类→学习，优先级→低
3. 输入"今晚跑步5公里" → AI 识别：分类→健康，优先级→中
4. 输入"下班后取快递" → 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 实现语义级分类
• 使用向量相似度匹配
• 引入用户反馈机制持续优化

与传统开发方式对比

常见问题

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 工作过程总结

工具调用链

与人类编写方式的对比

人类编写（约 90 分钟）： 克隆仓库 → 阅读规范 → 分析案例 → 设计方案 → 编写 HTML → 编写 CSS → 编写 JS → 编写文档 → 检查修改 → 完成 AI Agent 编写（约 30 秒）： 自动克隆 → 自动分析 → 自动设计 → 自动生成代码 → 自动编写文档 → 完成

Agent 核心能力体现

1. 上下文理解：自动阅读仓库规范和已有案例，确保输出符合项目标准
2. 并行处理：同时读取多个文件，提高效率
3. 设计决策：自主选择案例主题、技术方案和 UI 风格
4. 代码自检：生成代码后自动检查安全性和规范性
5. 过程记录：完整记录每一步的思考和决策过程

相关资源

• AI Shell 官方文档
• 华为云开发者空间
• 华为云码道 CodeArts
• 本案例 Issue #3

案例总结

本案例完整展示了 AI Shell / AI Agent 在技术案例开发中的核心价值：

AI Agent 让开发者从"怎么做"中解放出来，专注于"做什么"。

关键要点：

• ✅ Agent 先分析规范再动手，确保输出符合标准
• ✅ Agent 记录完整的思考和决策过程
• ✅ Agent 生成代码后自动自检
• ✅ 过程记录比结果更重要——这是 Issue #3 的核心要求

本案例由华为云码道 CodeArts Agent 自动生成，包含完整的 AI Agent 编写过程记录
最后更新：2026-06-30