#WorkBuddy #混元Hy3

做产品最怕两件事：想法停在 PPT 里，或者原型要等排期。最近我们用WorkBuddy把「华语之境 / ChineseVerse」——一款面向全球中文学习者的沉浸式平台——从一句话需求，快速做成了一个能直接在手机上点开的 HTML 原型。

编写大纲：

一、先把需求摊开：8 项能力一张表

需求其实很具体：多语言切换的跨平台中文学习 App，要有课程、互动练习、进度、登录、个性化路径、社区成就，而且是手机页面 + HTML 展示。

我没急着写代码，而是先让它把需求拆成清单，对齐再说：

二、定设计语言：把东方美学装进屏幕

既然叫"华语之境"，视觉不能是个冷冰冰的工具壳。我们定了三句话的基调：

• 底色：宣纸米白#F8F4EC，像翻开一卷书；

• 主色：朱砂红#C0392B，文化、克制、有记忆点；

• 字体：标题用楷体，正文用系统无衬线，温润但不拖沓。

辅以墨黑、玉色、金色的点缀，整体一眼就能认出"这是中文相关的产品"。

三、为什么是"单文件 HTML"

我们没上框架、没搭工程。原因很实际：

1. 双击就能看——发给任何人，浏览器打开即是手机界面；

1. 手机框直观——用一个 390×844 的圆角手机外壳把页面框起来，天然就是"移动端"；

1. 改起来快——文案、配色、页面都在一个文件里，对话里说一句就能改。

对"验证想法"这个阶段，单文件 HTML 是性价比最高的形态。

四、搭建过程：六个页面，一个底部导航

原型用底部 Tab 栏串起四个主屏，登录和启动页是独立流程：

• 启动页 / 语言选择：大字"华"印章 + 标语"不止学语言，更学文化"，下面一排语言胶囊（中文 / English / 日本語 / 한국어 / Español）。

• 登录页：手机号 / 邮箱登录，社交登录占位，演示模式任意输入即可进入。

• 首页：连续学习天数 + 今日目标进度环、继续学习卡、"为你推荐"横滑、互动四宫格、每日挑战。

• 课程页：HSK 分级课程卡 + 级别筛选 + 互动模块入口。

• 社区页：成就徽章条 + 用户动态流（晒书法、问"意思/意义"区别、打卡）。

• 我的页：用户卡、四项学习数据、本周柱状图、设置菜单（含语言切换）。

页面之间用纯前端路由切换，Tab 高亮跟随当前屏——点起来就是真 App 的手感。

五、多语言切换是怎么实现的

这是需求里的硬指标。做法很朴素但够用：维护一份i18n 字典，每种语言一组键值对，给所有需要翻译的文字打上data-i18n标记；切换语言时遍历这些节点一次性换文案。

五个语种的界面临时文案（课程名、模块名、社区标签等）都进了字典，点一下语言胶囊或右上角地球图标，整屏实时切换。中文本身始终是要学的内容，不会被"翻译掉"。

六、几个让它"活"起来的小交互

原型不只是静态图，加了几处真能点的细节：

• 口语跟读弹窗：点模块弹出"你好，很高兴认识你 / Nǐ hǎo, hěn gāoxìng rènshì nǐ"，点"开始跟读"给一个假评分反馈，演示 AI 发音评测的流程；

• 目标进度环：用conic-gradient画的一个环形进度，视觉上立刻有"今日完成度"的感觉；

• 语言底部弹层：从底部滑出的选择面板，和原生 App 的手势一致。

这些都不复杂，但足以让评审或用户"信以为真"，愿意给真实反馈。

七、成果与怎么复用

最终交付就是一个文件：huayu-zhijing.html。

• 想看：浏览器打开，或发到手机上点开；

• 想改文案：搜data-i18n对应的字典键；

• 想加页面：复制一个<section class="screen">接进路由；

• 想换配色：改:root里的几个 CSS 变量即可。

从一句话需求，到能在手机上把玩的原型，中间没有开过工程、没有排过期——这就是 WorkBuddy 把"想法 → 可交互原型"压缩到一杯咖啡时间的能力。

写在最后

原型的价值不在"漂亮"，而在让想法被尽早戳一戳。华语之境想做的是"不止学语言，更学文化"，而这次我们用 WorkBuddy，先把这句话变成了一个能点、能切语言、能看进度的东西。

下一步，我们会把演示数据接上真实后端，把课程和练习做成更完整的多级页面。如果你也在用 WorkBuddy 做原型，欢迎交流你们的"做出来"过程。

欢迎使用

下载地址： https://download.csdn.net/download/Joinzheng/93107251