RingFit Dashboard

健身数据追踪面板

以个人健康数据驱动的交互式仪表盘。Claude Code 全流程 Vibe Coding——从自然语言需求描述到线上部署。

Vibe CodingReact数据可视化SVG暗色主题GitHub Actions

项目概述

这是我探索 AI 驱动全栈开发 的一次实验。整个项目从需求对话到可访问的线上产品，全程使用 Claude Code 协作完成——我负责产品定义、视觉方向和质量把控，AI 负责代码生成、调试和优化。

SVG 半圆仪表，颜色分区（偏瘦/正常/超重/肥胖），实时数值显示

12 周减重趋势线，基于当前体重和目标体重的线性预测模型

健身环动作卡路里消耗排名，可视化对比各动作效率

每周训练安排可视化，完成/未完成状态一目了然

BMI / BMR / TDEE 自动公式计算，输入身高体重即时更新

GitHub Actions 自动构建部署至 Vercel，推送即上线

Vite + React · 纯 CSS 暗色主题 · SVG 图形库 · GitHub Actions · Vercel 部署 · Claude Code 协作

这个项目验证了设计师独立完成全栈产品的可能性：

整个过程从想法到上线约 2 天，传统开发流程至少需要 1-2 周。这不是取代开发者，而是让设计师能够独立验证产品想法。

12 周

趋势预测模型

6 屏

仪表盘面板

100%

AI 协作编码

~1K

行代码

线上可访问，响应式适配桌面/平板/手机。验证了 "设计师 + AI = 独立开发者" 这一新型工作模式。

💡 SVG 数据可视化应先画草图确定布局再写代码，直接 oral-to-code 导致多次调整位置和比例。Vibe Coding 的最高效模式是"先做低保真原型确认方向，再用 AI 精细化实现"。