如果你关注 AI 生成网页一定见过这样的场景让大模型直接输出 HTML结果小模型生成的页面要么标签嵌套错乱要么配色一言难尽。小思框架Xiaothink发布的前端生成模型Xiaothink-T17-RWKV5-MLA-Frontend0.6B给出了一个新解法让模型输出一种中文声明式前端语言 WanlyFrontendWF再用开源编译器把 WF 编译成完整 HTML/CSS/JS 页面。模型与工具地址 - Frontend 模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend - WF 编译器开源仓库https://github.com/Ericsjq/Open-WanlyFrontend - Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro## 一、为什么是语言 编译器先对比两种路线。路线 A模型直接输出 HTML模型需要同时学会标签配对div/span/p、CSS 选择器与属性、JS 事件绑定、语义化结构。这些语法细节占用了大量 token 预算小模型往往顾此失彼——结构对了配色乱配色好了标签闭合又出错。路线 B模型输出 WF 语言编译器生成页面模型只负责写语言一条语句描述一个组件属性用中文键值对表达。编译器负责把 WF 翻译成 HTML/CSS/JS语法正确性由编译器保证。0.6B 模型的全部容量都用在了理解需求、组织结构、设计配色上。实测结果这条路线让 0.6B 模型在 DeepSeek-V4-Flash 裁判盲测中拿到52.6 分反超 llama-3-8B35.4简单页面任务达 63.0 分。## 二、WF 语言核心语法WF 是中文为主的极简声明式语言一条语句即一个组件组件路径.组件名属性值属性值示例一个带标题和按钮的卡片__页面__页面填充#f5f5f5弹性纵向排列居中内边距40px页面.卡片背景色#ffffff圆角16px阴影0 4px 12px rgba(0,0,0,0.1)内边距24px宽度360px页面.卡片.标题文本欢迎使用 WF字号20px字重700文字色#1a1a2e页面.卡片.按钮文本点击我背景色#38bdf8文字色#ffffff圆角8px内边距10px 20px支持的属性类别-样式背景色/填充/文字色、字号/字重、圆角、阴影、宽度/高度、内外边距、弹性布局、网格布局-事件被点击时、被悬停时、输入改变时-逻辑如果/否则、循环遍历、变量绑定-动画过渡、关键帧三、WF 实战从一句话到完整页面光看语法还不够我们走一遍完整流程一句话需求 → WF 源码 → 编译 → 可交互页面。以世界时钟为例需求生成一个展示北京、伦敦、纽约三个城市时间的暗色时钟页面。模型输出的 WF 源码页面页面最小高度100vh填充#0f172a弹性纵向排列居中内边距20px页面.标题文本“ 世界时钟”字号28px字重700文字色#f8fafc下边距30px页面.时钟列表弹性横向排列间距20px包裹页面.时钟列表.北京背景色#1e293b圆角16px内边距24px宽度220px居中页面.时钟列表.北京.城市文本“北京”字号16px文字色#94a3b8页面.时钟列表.北京.时间文本“14:30”字号36px字重700文字色#38bdf8页面.时钟列表.伦敦背景色#1e293b圆角16px内边距24px宽度220px居中页面.时钟列表.伦敦.城市文本“伦敦”字号16px文字色#94a3b8页面.时钟列表.伦敦.时间文本“07:30”字号36px字重700文字色#a78bfa页面.时钟列表.纽约背景色#1e293b圆角16px内边距24px宽度220px居中页面.时钟列表.纽约.城市文本“纽约”字号16px文字色#94a3b8页面.时钟列表.纽约.时间文本“02:30”字号36px字重700文字色#34d399编译把上面的 WF 源码粘贴到开源编译器https://github.com/Ericsjq/Open-WanlyFrontend一键输出完整 HTML 文档浏览器直接打开即可看到深蓝渐变背景、三张圆角卡片、城市与时间层次分明的暗色仪表盘。全程无需手写一行 HTML/CSS。 小技巧WF 支持逻辑与事件。给卡片加上 被点击时 切换城市、用 循环遍历 渲染列表页面就具备了交互能力——这些同样由编译器转换为原生 JS。## 四、0.6B 凭什么能写长页面小模型写前端最怕两件事上下文一长就忘、结构一复杂就崩。Frontend 模型用自研的 RWKV-v5 MLA 纯历史检索架构专门解决这两点1.当前信息由 RWKV 负责RWKV-v5 的 TokenShift WKV 线性注意力负责处理正在生成的这一句2.长程历史由 MLA 检索生成过程中每 16 步保存一次 KV 快照需要用前面的组件结构时通过标准 softmax 注意力只检索 top-k 个关键历史位置而不是对全部历史重新计算3.门控融合可学习的标量门控自动权衡当前信息与历史信息的比重4.NoPE 无位置编码 QK-Norm稳定点积尺度长序列训练更稳。配合51200 的训练序列长度模型能稳定承接完整 XX 页面这类多区块、长结构的任务——这正是 WF 语言 长程检索双管齐下的结果语言降低生成难度检索保证结构连贯。五、快速开始模型 编译器两步跑通第一步安装 xiaothink 库≥ 1.4.8并调用模型pythonfrom xiaothink import XTModelmodel XTModel.from_pretrained(ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend)wf_code model.chat(生成一个奶茶店菜单页面深色系突出新品)print(wf_code) # 输出 WF 语言源码第二步编译 WF 为 HTML把上一步输出的 WF 源码交给开源编译器github.com/Ericsjq/Open-WanlyFrontend得到完整 HTML 文件后浏览器打开即可。消费级显卡即可运行支持 BF16 推理本地部署无门槛。 ⚠️ 注意模型的输出是 WF 语言代码不是可直接预览的 HTML务必先经过编译器转换。权重格式为自研架构请使用 xiaothink ≥ 1.4.8 库调用详见 xiaothink.top 官方文档。## 六、总结WanlyFrontend 语言 编译器的组合把前端生成从背 HTML 语法变成写中文描述让 0.6B 模型也能稳定产出设计感强的完整页面。RWKV-v5 MLA 纯历史检索架构则为长页面生成提供了结构连贯性保障。如果你对小模型做前端这条路感兴趣欢迎体验-Frontend 前端生成模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend-WF 编译器开源https://github.com/Ericsjq/Open-WanlyFrontend-Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro模型不大但路可以很长。把前端生成交给 0.6B 模型把 HTML 交给编译器剩下的想象空间留给你。