五个站 · 五套可运行的 demo
把它们推荐的东西
真做出来
不是评测页,也不介绍那五个站。每一页都是能点的界面:组件源码从 beUI 的 registry 取回, 构图从 recent.design 的策展里拆出来,页脚形态按 footer.design 的筛分类落地。
-
01
AI 代理工作台
25 个 beUI 组件拼成一个真能对话的界面:任务计划自己往前跑、推理流水可展开、回车后回答逐字流出、审批卡能选能提交。
beUI · agent 组件族
-
02
数值与文字动效
七件同页跑:逐位滚动的数字、进场计数、解谜式换字、逐词落句、无限横滚、带读数的趋势线、指针跟随的 3D 卡。数字是本地随机游走算的。
beUI · motion 组件族
-
03
编辑式排版
recent.design 上四种高频构图(一屏一句、极窄栏宽、数字当主体、目录式导览)拼成一个真页面,用 Fraunces 的光学尺寸轴逐档对照 9→144。
recent.design · 策展拆解
-
04
同一交互,三种栈
landdding 最有用的维度是「这站用什么建站器」——因为做不做得出来取决于栈。纯 CSS / beUI 组件 / 手写 canvas 三档现场切换对比。
landdding · 建站器维度
-
05
页脚五种
footer.design 的十一个筛不按行业分、按形态分。这里把 Typographic / Grid / Large Type / Animated / Small Type 做成可切换的原型,信息密度按真实页脚写。
footer.design · 形态分类
这五套是怎么来的
- 组件
beui.dev/r/<name>.json取回源码逐字落盘,逻辑一行没改;tools/fetch-beui.mjs按 manifest 拉,依赖自动递归。- 样式
- beUI 的组件是 shadcn registry 分发的,靠宿主给语义 token。宿主这一侧是本页自己的
src/ui.css:和色六景的纸白/炭黑双模。 - 字体
- 全部 OFL/Apache 自托管:Bebas Neue、Jost、Poppins、Questrial、Figtree、Fraunces、JetBrains Mono(latin 子集),中文按每页实际用字子集化。
- 验收
- 五页 × 明暗双模:对比度不达 4.5 的文字 0 处,横向溢出 0;390 视口横向溢出 0。探针脚本在仓里
tools/probe-*.mjs,可重跑。