码道实战用码道 IDE 制作一个 GitHub Star 趋势查看工具案例共创 · 效率工具运营同学用华为云码道的 Agent Space 对话编程制作了一个 GitHub Star 趋势查看工具——输入仓库地址自动显示 Star 数和历史增长趋势图支持多仓库对比。旨在展示码道的 AI 编程能力如何帮助运营同学自主完成工具开发。一、运营背景与目标我是开发者生态运营团队的成员日常工作之一是跟踪开发者社区的热门开源项目。之前每周手动查看 GitHub Star 数、去 Star History 网站截图、整理到周报跟踪 10 个项目需要约 20 分钟。目标是用华为云码道的 Agent Space 做一个工具输入仓库地址自动显示 Star 数和历史增长趋势图省掉手动操作。二、技术选型为什么用华为云码道对比项传统方式码道 IDE需要会什么Python 前端 GitHub API 调用打开 IDE用自然语言描述需求数据获取手写 API 调用和错误处理Agent 自动实现 GitHub API 集成前端图表找库、看文档、调样式Agent 自动使用 Chart.js迭代修改手动改代码、查 bug继续对话即可增量修改运行环境配 Python、装依赖码道 IDE 内置终端用到的码道核心能力能力作用Agent Space智能体工作空间对话式开发提需求→看结果→改进全程聊天式交互AI 原生 IDE集成文件管理器、代码编辑器、Agent Space、终端一个窗口完成所有操作CLI 工具提供codearts run命令可在终端中对话生成代码体验版¥0免费使用全部核心能力500 万 Tokens/月三、操作流程事前准备从codearts.huaweicloud.com下载码道 IDE安装后登录华为云账号开通体验版。如需在命令行中操作可安装 CLI 工具sh-c$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)exportPATH$HOME/.codeartsdoer/installers:$PATHCLI 需要在华为云控制台获取 AK/SK 后配置环境变量。验证认证exportCODEARTS_CLI_AK你的AccessKeyIdexportCODEARTS_CLI_SK你的SecretAccessKeycodearts 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.pyFlask 主程序、templates/index.html搜索页面 Chart.js 图表、static/css/style.css蓝色主题样式。在 IDE 内置终端中运行pipinstallflask requests python app.py# 访问 http://localhost:5000macOS 上如端口被占用可改用 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 曲线模拟周粒度数据。为了让数据更准确做了以下改进配置 GitHub Token在github.com/settings/tokens创建 Personal Access Token通过环境变量传入应用获取 GitHub API 的真实当前总 Star 数真实历史曲线GitHub API 不直接提供按周的历史 Star 数据。通过解析 Star Historystar-history.com的 SVG 曲线路径提取真实的历史增长形状再按当前总 Star 数等比缩放得到 52 周的历史趋势exportGITHUB_TOKENgithub_pat_xxx...python app.pyRound 5收尾完善1. 生成 README.md 2. 添加 requirements.txt 3. 页面底部加页脚「Made with 华为云码道」四、效果与数据方案工具功能功能说明单仓库查询输入facebook/react显示 246,317 Stars 历史趋势图多仓库对比textarea 多行输入不同颜色折线对比历史数据来源star-history.com 真实曲线 GitHub API 当前总数周粒度52 个数据点错误处理仓库不存在提示、API 故障兜底响应式布局手机端可用数据方案数据项来源说明当前总 Star 数GitHub REST API通过 GitHub Token 认证实时获取历史趋势曲线star-history.com SVG解析 SVG 路径提取真实增长形状曲线缩放Python 后端按真实总 Star 数等比缩放 SVG 曲线五、亮点总结运营方法论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 限流额度获取真实数据exportGITHUB_TOKENgithub_pat_xxx...# 2. 安装依赖并启动pipinstallflask requests svg.path python app.py附本案例是如何用 AI Agent 写出来的工具效果截图这个案例文档本身也是在 AI Agent 的协作下完成的。以下是完整的工作流程1. 需求确认运营同学提出案例方向 —— 用码道做一个 GitHub Star 趋势查看工具。AI Agent 先调研华为云码道的产品页面和官方文档确认产品真实存在的功能和能力边界Agent Space、Spec-Driven、AGENTS.md 规约等。2. 实际操作验证AI Agent 并非凭空撰写而是真实走了一遍全部流程从华为云官网下载码道 IDE321MB 安装包安装并启动码道 IDE安装码道 CLI 工具配置华为云 AK/SK 认证使用codearts run命令生成代码创建 GitHub Token 解决 API 限流问题解析 star-history.com SVG 获取真实历史曲线启动 Flask 服务并验证 API 返回正确数据每一步的真实输出命令行日志、API 返回数据、文件生成结果都作为案例内容的依据。3. 迭代打磨轮次内容触发1初步案例 周报工具方向运营同学提出需求2改为 GitHub Star 趋势工具方向用户选择方向二3操作路径改为码道 IDE非 VS Code 插件指出 Codebase 仅 JetBrains 支持4补充多仓库对比功能用户提出需求5周粒度 API 限流兜底用户反馈数字不变化6真实历史数据SVG 曲线解析用户要求历史真实数据7精简文档去除虚构内容和错误记录用户要求只留最佳实践4. 技术验证所有技术声明都在实操中验证过验证项方法结果码道 IDE 下载安装从官网下载并运行✅ 可用AK/SK 认证配置环境变量后调用codearts models✅ 返回模型列表对话生成代码codearts run命令 Agent Space✅ 生成完整 Flask 项目GitHub API 数据配置 Token 后 curl 测试✅ 返回真实 Star 数多仓库 API逗号分隔参数测试✅ 返回数组Star 历史曲线SVG 路径解析 缩放对齐✅ 52 周真实数据参考资料华为云码道产品页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