ofa.js v5 · AI-first 前端框架 · zero build
语义组件，
任意材质。
20 个模块、29 个标签，全部可交互。属性只表达语义，颜色只走 M3，材质交给皮肤。 下面每一张卡片都是真实组件，不是截图。
20组件模块
29自定义标签
3内置材质
0构建步骤
颜色仍来自 M3 · 材质由 data-skin 与皮肤 CSS 决定
CATALOG / 25 CARDS
所有组件
卡片里的组件可以直接点、输入、开合；每张卡片右下角
右键：contextMenu
收件箱12 封未读
已发送
高度过渡由 ResizeObserver 跟随内容，展开/收起不丢状态。
点我试试
SYSTEM UI
三种系统 UI，同页对比
针对 Android / Apple / Windows 三个主流平台做好系统 UI 适配：同一批组件，各自锁定平台默认配色与材质，不跟随当前站点主题色。全站换肤用 setSkin()，或在 <html> 上设置 data-skin；也可以前往 皮肤页切换。
Android · Material 3
m3Android 系统 UI：全圆角、state layer、波纹，Material Design 3 的默认触感。
Apple · 毛玻璃
appleiOS / macOS 系统 UI：半透明表面 + backdrop blur、更小圆角、外侧柔光焦点环，无波纹。
Microsoft · Windows 11
windowsWindows 11 / Fluent 系统 UI：4px 控件圆角、8px 表面、Segoe UI、Mica 表面与 Acrylic 浮层，焦点矩形替代外发光。
皮肤契约：只声明 [data-skin="名称"] 作用域下的 --st-* token， 不写宿主选择器。完整 token 表见 packages/skin/README.md。
QUICK START
三行引入，直接写页面。
不需要 Node、打包器或配置文件。ofa.js v5 + 一个 l-m 标签，组件在浏览器里完成注册。
颜色由组件自动引入的 st-color-init.js 注入，深浅色跟随系统。 皮肤可选：加 data-skin 与一行 CSS，或调用 setSkin()。 完整属性表与验收页：打开组件文档。
index.html
{{copied ? "已复制" : "复制"}}
{{installCode}}