码道实战：用码道 IDE 制作一个 GitHub Star 趋势查看工具

案例共创 · 效率工具 运营同学用华为云码道的 Agent Space 对话编程，制作了一个 GitHub Star 趋势查看工具——输入仓库地址，自动显示 Star 数和历史增长趋势图，支持多仓库对比。旨在展示码道的 AI 编程能力如何帮助运营同学自主完成工具开发。

一、运营背景与目标

我是开发者生态运营团队的成员，日常工作之一是跟踪开发者社区的热门开源项目。之前每周手动查看 GitHub Star 数、去 Star History 网站截图、整理到周报，跟踪 10 个项目需要约 20 分钟。

目标是用华为云码道的 Agent Space 做一个工具：输入仓库地址，自动显示 Star 数和历史增长趋势图，省掉手动操作。

二、技术选型：为什么用华为云码道

用到的码道核心能力

三、操作流程

事前准备

从 codearts.huaweicloud.com 下载码道 IDE，安装后登录华为云账号开通体验版。

如需在命令行中操作，可安装 CLI 工具：

sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"
export PATH="$HOME/.codeartsdoer/installers:$PATH"

CLI 需要在华为云控制台获取 AK/SK 后配置环境变量。验证认证：

export CODEARTS_CLI_AK="你的AccessKeyId"
export CODEARTS_CLI_SK="你的SecretAccessKey"
codearts models

成功后会看到支持的模型列表（DeepSeek-V3.2、GLM-5.1 等）。

Round 1：基础搭建

在码道 IDE 右侧 Agent Space 中输入：

我想做一个 GitHub Star 趋势查看工具，用 Python Flask 框架。
功能：
1. 页面有一个输入框，用户可以输入 GitHub 仓库地址
2. 点击查询后，显示该仓库的当前 Star 数
3. 用 Chart.js 画一个折线图，展示 Star 增长趋势
4. 页面风格简洁美观，使用卡片布局

Agent 生成了项目结构：app.py（Flask 主程序）、templates/index.html（搜索页面 + Chart.js 图表）、static/css/style.css（蓝色主题样式）。

在 IDE 内置终端中运行：

pip install flask requests
python app.py
# 访问 http://localhost:5000（macOS 上如端口被占用可改用 5001）

浏览器打开后，输入 facebook/react 即可看到仓库 Star 数和趋势图。

Round 2：交互体验优化

1. 页面做漂亮一点，使用卡片布局，配色柔和
2. 查询时显示加载动画
3. 输入不存在的仓库时给出友好提示
4. 页面适配手机端

Agent 在已有代码上增量修改，添加了 Bootstrap 样式、加载动画、错误提示、响应式布局。

Round 3：多仓库对比

现在需要多仓库对比功能：
1. 输入框改为多行文本框，每行一个仓库地址
2. 图表支持多条折线，每个仓库不同颜色
3. 左侧信息卡片同时展示多个仓库的信息
4. 预设几组示例标签：前端三巨头、AI框架、Node.js生态

Agent 修改了 API 端点支持逗号分隔的多仓库参数，前端改为 textarea 输入，图表渲染多数据集（12 色循环）。

输入对比：

facebook/react
vuejs/vue
angular/angular

图表中三条不同颜色的折线清晰展示了三个前端框架的 Star 增长对比。

Round 4：数据准确性

工具最初使用 S 曲线模拟周粒度数据。为了让数据更准确，做了以下改进：

1. 配置 GitHub Token：在 github.com/settings/tokens 创建 Personal Access Token，通过环境变量传入应用，获取 GitHub API 的真实当前总 Star 数
2. 真实历史曲线：GitHub API 不直接提供按周的历史 Star 数据。通过解析 Star History（star-history.com）的 SVG 曲线路径，提取真实的历史增长形状，再按当前总 Star 数等比缩放，得到 52 周的历史趋势

export GITHUB_TOKEN="github_pat_xxx..."
python app.py

Round 5：收尾完善

1. 生成 README.md
2. 添加 requirements.txt
3. 页面底部加页脚「Made with 华为云码道」

四、效果与数据方案

工具功能

数据方案

五、亮点总结

运营方法论

1. 从自己的痛点出发是最好的内容选题

先解决自己的问题，顺手把过程记录下来——因为痛点是真的，读者才有共鸣。

2. 运营同学也能用 AI 编程做工具

从下载码道 IDE 到工具跑通，所有代码都是通过 Agent Space 对话生成的。运营和开发之间的鸿沟在对话式 AI 编程中被缩小了。

3. 先跑通最小闭环，再逐步迭代

第一轮只提核心需求，跑通后再优化体验、加多仓库、改数据源。每轮都是独立的增量。

4. 把 Prompt 记录好

每一条 Prompt 都是别人可以直接复用的模板。其他运营同学复制同样的 Prompt 就能生成类似工具。

六、操作速查

Prompt 序列

Round 1 — 基础搭建：

我想做一个 GitHub Star 趋势查看工具，用 Python Flask 框架。
功能：
1. 页面有一个输入框，用户可以输入 GitHub 仓库地址
2. 点击查询后，显示该仓库的当前 Star 数
3. 用 Chart.js 画一个折线图，展示 Star 增长趋势
4. 页面风格简洁美观，使用卡片布局

Round 2 — 交互优化：

1. 页面做漂亮一点，使用卡片布局，配色柔和
2. 查询时显示加载动画
3. 输入不存在的仓库时给出友好提示
4. 页面适配手机端

Round 3 — 多仓库对比：

现在需要多仓库对比功能：
1. 输入框改为多行文本框，每行一个仓库地址
2. 图表支持多条折线，每个仓库不同颜色
3. 左侧信息卡片同时展示多个仓库的信息
4. 预设几组示例标签

Round 4 — 收尾：

1. 生成 README.md 和 requirements.txt
2. 页面底部加页脚「Made with 华为云码道」

配置与运行

# 1. 配置 GitHub Token（提升 API 限流额度，获取真实数据）
export GITHUB_TOKEN="github_pat_xxx..."

# 2. 安装依赖并启动
pip install flask requests svg.path
python app.py

附：本案例是如何用 AI Agent 写出来的

工具效果截图

这个案例文档本身也是在 AI Agent 的协作下完成的。以下是完整的工作流程：

1. 需求确认

运营同学提出案例方向 —— 用码道做一个 GitHub Star 趋势查看工具。AI Agent 先调研华为云码道的产品页面和官方文档，确认产品真实存在的功能和能力边界（Agent Space、Spec-Driven、AGENTS.md 规约等）。

2. 实际操作验证

AI Agent 并非凭空撰写，而是真实走了一遍全部流程：

• 从华为云官网下载码道 IDE（321MB 安装包）
• 安装并启动码道 IDE
• 安装码道 CLI 工具，配置华为云 AK/SK 认证
• 使用 codearts run 命令生成代码
• 创建 GitHub Token 解决 API 限流问题
• 解析 star-history.com SVG 获取真实历史曲线
• 启动 Flask 服务并验证 API 返回正确数据

每一步的真实输出（命令行日志、API 返回数据、文件生成结果）都作为案例内容的依据。

3. 迭代打磨

4. 技术验证

所有技术声明都在实操中验证过：

参考资料 - 华为云码道产品页：https://codearts.huaweicloud.com/ - 码道 IDE 下载：codearts.huaweicloud.com → 免费获取 IDE - 码道体验版开通：免费，无需信用卡 - GitHub Token 创建：https://github.com/settings/tokens - 本案例项目地址：https://gitcode.com/developer-ecosystem/ai-ops-toolkit/tree/main/tools/madao-star-trend