【Code With SOLO】用 SOLO 从零搭建一个国潮赛博风养生 Web 应用，全程对话式开发零手写代码
一、摘要
现在打工人的健康越来越重要，平实工作强度高压力大，熬夜也多，还经常啤酒烧烤奶茶犒劳自己，这样一不小心就有心脑血管等风险。所以我决定给自己搞个养生页。面对"朋克养生"这个有意思的需求，我通过 TRAE SOLO 的对话式开发能力，从一行代码都没有开始，仅用多轮自然语言交互就完成了一个包含 6 大功能模块的「赛博养生神器」网站。整个过程中 SOLO 独立完成了架构设计、UI 开发、功能实现、风格调整和 Bug 修复，最终交付了一个可直接运行的完整单页应用。
二、背景
我是一名对养生和科技都感兴趣的互联网从业者。日常工作中长时间面对屏幕，经常忘记喝水、缺乏休息节奏，想找一个有趣的养生工具来改善状态。市面上的养生 App 要么太严肃、要么广告太多，于是我想做一个有个性、有态度的养生网站——把赛博朋克的酷和中国传统养生的智慧结合起来，做成一个「朋克养生」概念产品。
技术方面，我希望快速验证想法，不想花大量时间搭建框架和写样板代码。TRAE SOLO 的对话式开发正好满足这个需求：我说需求，它写代码，我提反馈，它迭代优化。
三、实践过程
使用SOLO可以下载安装客户端，也可以直接网页版与之对话进行开发，非常方便。如下所示：
我觉得这个界面非常清爽干净，毫不拖泥带水，能很清晰快速的上手。
第一步：需求确认——让 AI 帮我理清方向
一开始我只说了一句"帮我开发一个赛博养生神器网站"，SOLO 没有直接动手，而是先通过提问帮我明确了三个关键决策：
| 决策点 | 我的选项 | 最终选择 |
|---|---|---|
| 网站定位 | 炫酷展示页 / 功能型应用 / 互动体验页 | 功能型 Web 应用 |
| 视觉风格 | 霓虹赛博朋克 / 国潮赛博风 / 极简未来感 | 国潮赛博风 |
| 技术方案 | 纯 HTML/CSS/JS / 现代前端框架 | 纯 HTML/CSS/JS（单文件） |
踩坑经验：如果一开始需求不够具体，AI 产出的东西可能方向偏差很大。SOLO 主动提问帮我避免了返工，这个环节非常关键。
第二步：架构设计与开发——一句话出活
确认需求后，SOLO 先输出了完整的任务分解：
- 整体架构设计（页面结构、导航、功能模块划分）
- 国潮赛博风 CSS（霓虹配色、水墨纹理、故障艺术、古风装饰）
- 养生功能模块（喝水提醒、番茄钟、冥想计时、护眼提醒、养生语录、作息计划）
- 交互与动效（粒子背景、扫描线、呼吸灯、音效反馈）
然后一次性生成了完整的 index.html 文件，包含约 1200 行代码，涵盖 HTML 结构、CSS 样式和 JavaScript 逻辑。
最终实现了 6 大功能模块：
| 模块 | 功能 | 技术亮点 |
|---|---|---|
| 饮水提醒 | 每日 8 杯水追踪，可视化进度条 | 动态进度更新 + Toast 通知 |
| 赛博番茄钟 | 25/5/15 分钟三模式，4 轮自动切换 | 状态机管理 + 自动模式切换 |
| 赛博冥想 | 3-20 分钟可选，呼吸引导动画 | CSS 呼吸动画 + Web Audio 钟声 |
| 赛博护眼 | 20-20-20 法则自动提醒 | 全屏休息遮罩 + 倒计时 |
| 养生语录 | 24 条古今养生智慧，随机切换 | 淡入淡出动画 + 分类标签 |
| 赛博作息 | 养生/工作/助眠三种计划 | 当前时段自动高亮 |
第三步：风格迭代——“太暗了，换清爽的”
第一版是暗黑赛博朋克风格，整体偏暗。
这样虽然很酷，但是其实有点不太养生。
所以，我只说了一句"风格太暗黑，改成清凉色的风格"，SOLO 就系统地完成了全站配色替换：
- 更新了 12 个 CSS 变量（背景、文字、强调色等）
- 替换了 30+ 处硬编码颜色值（按钮、卡片、进度条、阴影等）
- 调整了粒子背景和扫描线效果
- 更新了 JS 中的粒子颜色参数
整个过程没有遗漏任何组件，配色过渡自然统一。
第四步：Bug 修复——“有些地方显示方框乱码”
在某些环境下，emoji 字符无法正确渲染，显示为方框+叉的乱码。我反馈后，SOLO 采用了两层解决方案：
- 工具卡片图标：用纯 CSS 绘制了 6 个矢量图标（水杯、番茄、冥想圆环、眼睛、卷轴、时钟），完全替代 emoji
- 文字内容中的 emoji：统一替换为 ASCII 文字符号（如
[+][o][*]H2O^_^等），确保任何环境都能正常显示。
然后，进行功能扩展实现，包括如下功能：
| 类别 | 新增内容 | 说明 |
|---|---|---|
| BMI 计算器 | 身高/体重输入 → BMI值 + 分类 | 渐变仪表盘，CSS秤形图标 |
| 睡眠评分 | 入睡/起床时间 → 0-100分评分 | 个性化建议，CSS月亮图标 |
| 心情记录 | 5级心情按钮 + 7天趋势图 | localStorage持久化，CSS柱状图 |
| 每日打卡 | 月历网格 + 4项打卡 | 喝水/专注/冥想/早睡，当日高亮 |
| 白噪音播放器 | 雨声/海浪/森林/篝火 | Web Audio API生成，独立音量滑块 |
| 数据统计面板 | 今日概览 + 本周柱状图 | 饮水/番茄/心情多维度数据可视化 |
| 主题切换 | 清凉模式 ↔ 暗夜模式 | 导航栏一键切换，localStorage记忆 |
| 入场动画 | IntersectionObserver | 卡片滚动到视口时淡入上移 |
| 数据持久化 | localStorage全量存储 | 刷新页面不丢失今日数据 |
在原有六大养生模块的基础上，继续扩展新增了 BMI 计算器、睡眠评分、心情记录、每日打卡、白噪音播放器五大功能模块，并配套搭建了数据统计面板。
BMI 计算器支持输入身高体重后实时输出身体质量指数及健康分类；睡眠评分根据入睡和起床时间智能评估睡眠质量并给出改善建议；心情记录提供五级情绪选择，自动生成最近七天的趋势柱状图；每日打卡以月历形式呈现，涵盖喝水达标、专注完成、冥想完成、早睡四项习惯追踪；白噪音播放器基于 Web Audio API 纯浏览器端生成雨声、海浪、森林、篝火四种环境音效，支持独立音量调节和混音播放。所有数据通过 localStorage 持久化存储，刷新页面不丢失，统计面板以今日概览和本周柱状图的形式直观展示饮水、番茄钟、冥想、心情等多维度健康数据。
此外，还完成了清凉/暗夜双主题切换（导航栏一键切换，偏好自动记忆）和卡片入场动画（基于 IntersectionObserver 的滚动淡入效果）两项视觉交互升级。整个扩展过程延续了"一句话迭代"的开发模式——我只需描述需求方向，SOLO 自行完成架构设计、代码编写和样式统一。
四、成果展示
实现效果如下：
技术成果
- 单文件交付：一个
index.html文件，无需构建工具，浏览器直接打开即可运行 - 代码规模：约 1500+ 行（HTML + CSS + JS）
- 零手写代码：全程通过自然语言对话完成开发和迭代
- 响应式设计：适配桌面和移动端
功能亮点
- 粒子连线动态背景（Canvas 绘制）
- CSS 故障艺术文字动画（Glitch Effect）
- Web Audio API 生成音效（无需外部音频文件）
- Toast 通知系统（替代原生 alert）
- 全屏护眼休息遮罩
- 十二时辰养生作息计划（含当前时段高亮）
核心技术栈
前端：HTML5 + CSS3 + Vanilla JavaScript
特效：Canvas 粒子系统、CSS 动画、Web Audio API
架构：单页应用（SPA），无依赖，零构建
五、效果与总结
提效数据
| 维度 | 传统方式 | SOLO 方式 |
|---|---|---|
| 开发时间 | 2-3 天 | 约 30 分钟（对话时间） |
| 代码编写 | 手写 1500+ 行 | 零手写，AI 生成 |
| 风格调整 | 逐个修改 CSS | 一句话全站替换 |
| Bug 修复 | 定位 + 改代码 | 描述问题，AI 自动修复 |
核心收获
- 对话即开发：整个开发过程就像和一个高级前端工程师对话，我说需求，他出方案、写代码、改 Bug，我只需要做决策和验收。
- 迭代成本极低：风格从暗黑换到清凉色，传统方式可能要改几十个文件，SOLO 一次性处理了所有关联样式。
- 需求澄清很重要：SOLO 在动手前主动提问确认方向，避免了"做完了再推翻"的浪费。
- 小项目也能有品质：虽然是单文件项目，但粒子背景、音效系统、呼吸动画等细节一个不少，AI 对"品质感"的理解超出预期。
关于 AI 编程的真实感受
说实话，一开始我对"对话式开发"是持怀疑态度的。作为一个非专业开发者，我过去也尝试过用 AI 辅助写代码，但体验往往是：它能生成片段，但拼不起来；能改样式，但改一处坏三处。但这次 SOLO 的体验完全不同——它不是在"帮我写代码"，而是在"帮我做产品"。
最大的感受是角色感的转变。以前用 AI，我觉得自己是"翻译官"，要把需求翻译成技术语言；用 SOLO，我觉得自己是"产品经理"，只需要说人话、做决策、看效果。比如我说"太暗了"，它不是简单地调亮背景色，而是重新设计了一整套清凉色配色方案，连粒子背景的颜色都同步更新了。这种"理解意图而非执行指令"的能力，是这次体验中最让我惊喜的地方。
关于"赛博养生"这个想法本身
这个项目的灵感其实来自一个很日常的瞬间：某天加班到深夜，眼睛干涩、腰酸背痛，突然想到——我们这代人，一边熬夜一边吃保健品，一边刷手机一边搜"如何养生"，这不就是最赛博的养生方式吗？于是想做一个能自嘲、能玩、又能真正帮到自己的工具。
做完之后我真的在用。每天打开网站，番茄钟帮我专注，护眼提醒让我起来走走，养生语录偶尔蹦出一句"冬吃萝卜夏吃姜"还挺治愈的。一个自己做的工具自己天天用，这种感觉很奇妙。
可复用方法
- 先让 AI 提问再动手：对于开放性需求，先通过问答明确方向，再进入开发
- 分步迭代优于一次到位：先出基础版，再逐步调整风格和修复问题，每一步都有可见成果
- 描述问题而非指定方案：比如"太暗了"比"把 #0a0a0f 改成 #f0f7ff"更高效，AI 会自己决定最优方案
用 TRAE SOLO，从一句"帮我开发一个赛博养生神器网站"到一个功能完整、视觉精致的 Web 应用，全程零手写代码。这不是未来，这就是现在。