从零到一：用华为云码道 CodeArts 智能体一小时搭建开发者成长看板 GrowBoard

本文记录一次真实的 AI 结对开发实践：从需求一句话，到上线华为云沙箱、发布作品展览馆的全过程。零依赖、单文件、纯前端，适合任何想体验 AI 辅助开发的开发者参考。

一、为什么做 GrowBoard

参加华为云开发者成长中心的活动时，我发现一个痛点：任务分散在十几个子站（签到在成长中心、Issue 在 GitCode、作品在展览馆、文章在社区……），想回答"本周还差哪几个任务没做"需要开一堆标签页逐个确认。

于是给码道 CodeArts 智能体提了一句需求：

"做一个开发者成长积分看板，能打卡、记积分、看趋势，单文件零依赖。"

一小时的迭代后，GrowBoard 诞生了——现在它也在开发者作品展览馆安了家。

二、功能设计

围绕"打开即用、数据在手"两个原则，最终落地六个核心功能：

1. **任务清单**：内置成长中心高频任务模板（每日签到、提 Issue、Star 代码仓、发布文章……），支持自定义增删
2. **积分累计**：勾选完成自动累加任务积分，支持手动调分
3. **连续打卡**：记录签到日期与连续天数，断签一目了然
4. **可视化**：近 7 日积分趋势折线图 + 任务完成率环形图，Canvas 手绘实现
5. **本地存储**：数据存 localStorage，一键 JSON 导出/导入，不锁死在任何平台
6. **双主题**：浅色/深色切换，跟随系统设置

三、技术选型：为什么是"零依赖单文件"

和智能体协作时我明确要求：不用任何构建工具、不引任何第三方库、一个 index.html 走天下。

理由有三：

• **可迁移性**：静态文件扔到任何 HTTP 服务器就能跑——本地 `python3 -m http.server`、OBS 静态网站托管、云沙箱 Nginx，全都不挑食

• **可审计性**：单文件意味着任何人 Ctrl+U 就能读完全部源码，对个人数据工具来说，"看得见"比"功能多"更重要

• **维护成本**：没有 package.json，就没有依赖升级、安全漏洞、构建配置这三座大山

图表用原生 Canvas 手绘：折线图计算坐标 + lineTo 连线，环形图用 arc 按完成比例画弧。加起来不到 200 行，比引入 ECharts 轻了两个数量级。

主题系统用 CSS 变量实现：--bg、--card、--accent 等十余个语义化变量集中在 :root 与 [data-theme="dark"] 两处定义，切换主题只需改一个 data-theme 属性。

四、与 CodeArts 智能体协作的实战感受

这次开发让我对"AI 结对"有了具体认知：

• **描述约束比描述功能更重要**。"零依赖、单文件"这两个约束说清楚后，智能体给出的方案没有一次跑偏

• **迭代节奏以"可运行版本"为单位**。第一轮先要 MVP（任务+积分），跑通后追打卡和图表，最后才做主题美化——每轮结束都有一个能双击打开的 HTML

• **部署也交给它**。从本地文件到云沙箱运行、再到作品展览馆发布（封面图、详情包、提交流程），全程由智能体操作完成，我只提供授权

五、部署与复现

git clone https://gitcode.com/2201_75390367/grow-board.git
cd grow-board
python3 -m http.server 8080

打开 http://localhost:8080 即可使用。数据在浏览器本地，换设备时用导出的 JSON 迁移。

六、写在最后

GrowBoard 本身很小，但它验证了一个工作流：一句话需求 → AI 生成 → 沙箱验证 → 作品发布，全程一小时。对想快速把想法变成可用工具的开发者，这套流程值得试试。

项目已开源在 GitCode（2201_75390367/grow-board），欢迎 Star 和 Issue 交流。