#WorkBuddy #混元Hy3做产品最怕两件事想法停在 PPT 里或者原型要等排期。最近我们用WorkBuddy把「华语之境 / ChineseVerse」——一款面向全球中文学习者的沉浸式平台——从一句话需求快速做成了一个能直接在手机上点开的 HTML 原型。编写大纲一、先把需求摊开8 项能力一张表需求其实很具体多语言切换的跨平台中文学习 App要有课程、互动练习、进度、登录、个性化路径、社区成就而且是手机页面 HTML 展示。我没急着写代码而是先让它把需求拆成清单对齐再说#能力在原型里的落点1分级课程体系HSK1–HSK6 课程卡 级别筛选2互动学习模块单词 / 语法 / 口语 / 听力 四宫格3学习进度追踪连续天数、目标环、本周柱状图4注册登录独立登录页演示可任意进入5个性化学习路径首页为你推荐横滑卡片6社区 成就激励社区动态流 徽章条7手机页面390×844 手机框单手操作8HTML 展示单文件、双击即开无需构建二、定设计语言把东方美学装进屏幕既然叫华语之境视觉不能是个冷冰冰的工具壳。我们定了三句话的基调底色宣纸米白#F8F4EC像翻开一卷书主色朱砂红#C0392B文化、克制、有记忆点字体标题用楷体正文用系统无衬线温润但不拖沓。辅以墨黑、玉色、金色的点缀整体一眼就能认出这是中文相关的产品。三、为什么是单文件 HTML我们没上框架、没搭工程。原因很实际双击就能看——发给任何人浏览器打开即是手机界面手机框直观——用一个 390×844 的圆角手机外壳把页面框起来天然就是移动端改起来快——文案、配色、页面都在一个文件里对话里说一句就能改。对验证想法这个阶段单文件 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 classscreen接进路由想换配色改:root里的几个 CSS 变量即可。从一句话需求到能在手机上把玩的原型中间没有开过工程、没有排过期——这就是 WorkBuddy 把想法 → 可交互原型压缩到一杯咖啡时间的能力。写在最后原型的价值不在漂亮而在让想法被尽早戳一戳。华语之境想做的是不止学语言更学文化而这次我们用 WorkBuddy先把这句话变成了一个能点、能切语言、能看进度的东西。下一步我们会把演示数据接上真实后端把课程和练习做成更完整的多级页面。如果你也在用 WorkBuddy 做原型欢迎交流你们的做出来过程。欢迎使用下载地址 https://download.csdn.net/download/Joinzheng/93107251