【华为云码道】我用华为云码道从 0 到 1 开发了「赛博养生神器」

一键开通华为云码道 CodeArts 代码智能体https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithd主题方向实战体验向开发工具华为云码道CodeArts代码智能体开源仓库https://atomgit.com/wdracky/healthcare摘要本文记录了一次「对话式开发」的完整实战作者使用华为云码道CodeArts代码智能体从一句自然语言需求出发零手写代码地开发出一款「赛博养生神器」单页 Web 应用。文章完整呈现了从需求澄清、首版生成、风格迭代、缺陷修复到功能扩展的全过程并附上关键代码、实测数据与对比表格展示了 AI 编程在真实项目中的落地价值。关键词华为云码道CodeArtsAI 编程对话式开发单页应用赛博养生目录一、概述二、背景三、实战过程3.1 在 AtomGit 创建仓库并用码道初始化项目3.2 需求下发先让码道「提问」再动手3.3 首版实现一次生成完整骨架3.4 迭代一从暗黑赛博朋克到清凉色3.5 迭代二修复 emoji 乱码3.6 迭代三一次扩展 5 个新功能四、关键代码五、成果展示5.1 功能截图5.2 实测数据5.3 功能清单六、对比表格传统开发 vs 华为云码道核心收获开源仓库一、概述作为一名长期久坐、经常忘记喝水和休息的互联网从业者我用华为云码道CodeArts代码智能体从零开发了一款「赛博养生神器」Web 应用。它以「固定单屏 Tab 页签」的形态把饮水、专注、冥想、护眼、BMI、睡眠、心情、打卡、白噪音、统计共 11 个养生功能集中在一个页面里零依赖、单文件、即开即用。整个开发过程只用自然语言下发需求由码道完成架构设计、代码编写、功能迭代与缺陷修复最终交付了一个 4222 行、约 16 万字节的完整单页应用。这个项目最打动我的地方在于它把「养生」这件本该严肃的事做成了有赛博朋克气质、有自嘲精神、又真正能落地的日常工具。从最初的一句需求到最终一个功能完备、视觉统一、数据可持久化的产品整个过程几乎不需要我写一行代码——我扮演的是「产品经理 验收官」的角色而码道则像一位随叫随到、理解力极强的全栈工程师。这种「对话即开发」的体验正是 AI 编程时代最值得记录和分享的样本。二、背景我的职业是互联网产品/运营方向日常重度依赖电脑与手机典型的「一边熬夜一边养生」人群知道该多喝水、该按时休息、该护眼但总是做不到。市面上的养生 App 要么太重要注册、要看广告要么太严肃缺乏持续使用的动力。这种「道理都懂就是做不到」的困境其实是很多互联网从业者的真实写照。我们不是不重视健康而是被快节奏的工作裹挟——一忙起来就忘了喝水一投入就忘了休息眼睛酸了才想起该看看远处。传统的养生工具往往把「自律」当作前提却忽略了人性中「需要趣味、需要即时反馈、需要成就感」的一面。于是我想做一个能自嘲、能玩、又能真正用起来的养生工具——把赛博朋克的科技感与中国传统养生智慧结合做成一个「朋克养生」概念产品。它不该是一本严肃的健康手册而是一个有态度、有性格的数字伙伴用霓虹灯效提醒你喝水用粒子动画陪你冥想用十二时辰的智慧帮你规划作息。让「养生」这件事从「被迫执行」变成「主动想打开」。技术侧的核心诉求有三点快速验证想法不想在搭建框架、写样板代码上耗费时间零门槛交付最好是一个文件、浏览器双击就能跑迭代要快风格、功能、布局随时能改。这正是华为云码道CodeArts代码智能体擅长的事——它可以基于自然语言自主完成需求分析、代码编写与调试于是我决定用它来从 0 到 1 落地这个项目。三、实战过程3.1 在 AtomGit 创建仓库并用码道初始化项目按照活动要求我先在AtomGit平台完成了仓库创建与项目初始化把项目骨架托管到 AtomGit。这一步看似简单却为后续的迭代管理打下了基础——有了版本控制每一次风格调整、功能扩展都能清晰回溯。随后在华为云码道中打开工程通过一段自然语言「任务书」启动开发而不是逐行手写代码。这种「先搭好舞台再让 AI 登场」的方式让整个开发过程既高效又有序。3.2 需求下发先让码道「提问」再动手我给出的第一句需求非常简短「帮我开发一个赛博养生神器网站。」对话过程如下现在可以领取CodingPlan让一份Plan两端共享。码道没有立刻埋头写代码而是先反问我三个关键决策点帮我理清了方向决策点候选最终选择网站定位炫酷展示页 / 功能型应用 / 互动体验页功能型 Web 应用视觉风格霓虹赛博朋克 / 国潮赛博风 / 极简未来感国潮赛博风后改为清凉色技术方案纯 HTML/CSS/JS / 现代前端框架纯 HTML/CSS/JS单文件征求意见的提问开放性需求如果直接让 AI 上手方向很容易跑偏。让码道先提问、再开发避免了「做完再推翻」的返工这一步非常关键。3.3 首版实现一次生成完整骨架确认需求后码道没有急着写代码而是先输出了一份清晰的任务分解整体架构怎么搭、样式方案怎么定、功能模块怎么划分、交互动效怎么实现。这份「施工蓝图」让我在动手前就对最终形态有了预期。随后它一次性生成完整的index.html首版就包含 6 大功能饮水提醒、番茄钟、冥想计时、护眼提醒、养生语录、作息计划并配上 Canvas 粒子背景与 Web Audio 合成音效。打开浏览器的那一刻一个会呼吸、有动效、能交互的页面就呈现在眼前——这种「一句话生成可运行产品」的体验确实颠覆了我对开发的理解。3.4 迭代一从暗黑赛博朋克到清凉色首版是暗黑赛博朋克风整体偏暗。我只反馈了一句「风格太暗黑改成清凉色的风格。」码道没有简单地把背景调亮而是系统性地重做了整套配色体系更新 CSS 变量背景、文字、强调色、替换 30 处硬编码颜色值按钮、卡片、进度条、阴影并同步调整了粒子背景与扫描线效果。全站配色一次替换、过渡自然统一。3.5 迭代二修复 emoji 乱码测试时发现部分环境下 emoji 无法渲染显示成「方框中间一个叉」的乱码。反馈后码道给出两层解决方案图标层用纯 CSS 绘制矢量图标水杯、番茄、冥想圆环、眼睛、卷轴、时钟……替代 emoji文字层把正文中的 emoji 统一替换为 ASCII 符号如[]、[o]、[*]、H2O、^_^。为了让表情符号在任何终端都不乱码最终「全面去 emoji 化」——共替换 55 处覆盖按钮、通知、作息计划等全部区域。这是用 AI 开发时容易忽略、却直接影响成品可用性的细节。3.6 迭代三一次扩展 5 个新功能在基础版本稳定后我提出功能扩展需求。这一次的改动量最大码道一次性新增了 5 个模块并配套搭建数据面板BMI 计算器输入身高体重实时输出 BMI 值与健康分类睡眠评分根据入睡/起床时间智能评估睡眠质量并给出建议心情记录五级情绪选择 最近 7 天趋势柱状图每日打卡月历网格覆盖喝水/专注/冥想/早睡四项习惯白噪音播放器基于 Web Audio API 合成雨声、海浪、森林、篝火四种环境音支持独立音量与混音。同时全部功能接入localStorage本地持久化并新增「数据统计面板」今日概览 近 7 天柱状图。四、关键代码Tab 切换是「固定屏应用」的核心逻辑由码道实现得非常轻量// Tab 切换点击页签 → 切换按钮与面板的 active 状态(functioninitTabs(){consttabBtnsdocument.querySelectorAll(.tab-btn);consttabPanelsdocument.querySelectorAll(.tab-panel);tabBtns.forEach(btn{btn.addEventListener(click,(){consttabbtn.dataset.tab;tabBtns.forEach(bb.classList.remove(active));tabPanels.forEach(pp.classList.remove(active));btn.classList.add(active);constpaneldocument.getElementById(panel-tab);if(panel)panel.classList.add(active);});});})();数据持久化与仪表盘联动同样是纯原生实现无需任何依赖// 仪表盘从 localStorage 读取今日数据并渲染概览卡functionupdateDashboard(){consttodaygetTodayStr();// 饮水进度SVG 圆环 数字constwaterDataloadData(cyber_water,{});consttodayWaterwaterData[today]||0;document.getElementById(dashWater).textContent${todayWater}/2000;constringFgdocument.getElementById(dashWaterRingFg);constpercentMath.min(100,(todayWater/2000)*100);ringFg.style.strokeDashoffset2*Math.PI*42*(1-percent/100);// 番茄数 / 冥想时长 / 心情 同理从对应 key 读取}五、成果展示5.1 功能截图实现界面如下5.2 实测数据指标数值交付文件单文件index.html代码规模4222 行/ 158,607 字符约 160 KBJavaScript 函数56 个CSS 规则314 条功能模块11 个归入 7 个 Tab本地存储键6 个饮水/番茄/冥想/心情/打卡/主题第三方依赖0零依赖、零构建加载方式浏览器双击直开无需服务器5.3 功能清单Tab功能技术亮点仪表盘今日概览 迷你打卡日历SVG 圆环进度 多源数据聚合饮水饮水提醒 每日打卡8 杯进度追踪 月历打卡专注番茄钟 护眼提醒三模式番茄 20-20-20 法则冥想冥想计时 白噪音呼吸引导动画 Web Audio 合成音健康BMI 睡眠 心情仪表盘 评分算法 趋势柱状图语录养生语录 作息24 条箴言 十二时辰计划统计数据面板今日概览 近 7 天柱状图六、对比表格传统开发 vs 华为云码道维度传统手写开发使用华为云码道需求澄清自己权衡易跑偏码道主动提问确认方向首版搭建手写 1000 行骨架一句话生成完整可运行版本风格改造逐个文件改 CSS一句话全站配色替换功能扩展分别设计、逐个实现一次对话新增 5 个模块布局重构重新组织 HTML/CSS描述目标形态自动重构为固定屏 Tab缺陷修复自行定位 改代码描述现象自动修复并说明原因核心收获对话即开发整个过程像和一位高级前端工程师结对编程——我出决策、验收码道出方案、写代码、改缺陷。「理解意图」胜过「执行指令」我说「太暗了」它重做的是整套配色体系而不是简单调一个色值。工程化沉淀从需求澄清、任务拆解到迭代与自查码道展现出的是一套研发流程而非零散补全。小项目也可以有品质虽是单文件项目粒子背景、音效、圆环进度、双主题一样不缺。开源仓库本项目代码已在AtomGit开源欢迎 Star 与交流AtomGit 仓库https://atomgit.com/wdracky/healthcare从一句「帮我开发一个赛博养生神器网站」到一个 4222 行、固定屏 Tab 式、功能完整的 Web 应用——全程由华为云码道CodeArts驱动对话式开发零手写代码。AI 编程最大的价值不是取代开发者而是让每个有想法的人都有能力把想法变成现实。总结回顾整个项目华为云码道带来的核心价值可以归纳为三点把「想法」变成「产品」的门槛被大幅拉低无需搭建工程、无需记忆框架 API一句自然语言即可启动一个可运行的项目让产品/运营等非专业开发者也能独立完成从 0 到 1 的落地。迭代成本趋近于零改风格、修缺陷、加功能全部通过对话完成。码道不是机械地执行指令而是理解意图后系统性调整——改配色就重做整套 CSS 变量去 emoji 就覆盖全部 55 处扩展功能就一次新增 5 个模块并配套数据面板。AI 是「结对工程师」不是「代码生成器」它先提问澄清需求、再输出任务分解、最后编写与自查展现的是一套完整的研发流程。开发者需要做的是做好决策与验收。当然AI 编程也有其边界开放性需求容易跑偏需先提问对齐、细节可用性如 emoji 乱码需要人工测试发现。但总体而言对话式开发正在让「人人都是开发者」从口号变成现实——这正是本次实战最想传达的体验。