WanlyFrontend 中文声明式前端语言完全指南：让 0.6B 模型写出漂亮网页

如果你关注 AI 生成网页，一定见过这样的场景：让大模型直接输出 HTML，结果小模型生成的页面要么标签嵌套错乱，要么配色一言难尽。小思框架（Xiaothink）发布的前端生成模型 Xiaothink-T17-RWKV5-MLA-Frontend （0.6B）给出了一个新解法：让模型输出一种中文声明式前端语言 WanlyFrontend（WF），再用开源编译器把 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-8B（35.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 交给编译器，剩下的想象空间留给你。