构建内容优先的 Web 运行时（UI 作为透镜，而非模板）

Source: Dev.to

大多数现代网页应用遵循相同的模式：

• 设计页面
• 编写组件
• 添加路由
• 永无止境地重复布局逻辑
• 为每个新页面发送 CSS

即使使用了现代框架，我们仍然一次又一次地重建同样的页面概念。

于是我开始探索一种不同的方法：

如果页面不是以 UI 的形式编写，而是以结构化内容 + 意图的形式呢？
这正是我正在构建的：一种内容优先的运行时，界面不是固定的，页面以 JSON 节点的形式声明。

思路

而不是像下面这样构建 UI：

// traditional component tree

我会这样声明它们：

{
  "type": "Layout",
  "props": {
    "leftSidebarConfig": {
      "initialView": "rail",
      "elements": [
        { "type": "link", "props": { "label": "Home", "icon": "home", "href": "/" } },
        { "type": "link", "props": { "label": "Catalog", "icon": "palette", "href": "/catalog" } }
      ]
    }
  },
  "children": [
    {
      "type": "Page",
      "props": { "title": "Runtime demo" },
      "children": [
        { "type": "Button", "props": { "variant": "contained" }, "children": ["Click me"] }
      ]
    }
  ]
}

然后运行时挂载它：

GUI.mount(spec, "#root");

为什么这与众不同

• ✅ UI 只是一个渲染器
• ✅ 布局可以在所有地方复用
• ✅ 导航变成了数据
• ✅ 页面成为聚焦空间
• ✅ 内容成为主要产出

作为链接列表的导航

不再硬编码侧边栏，导航变成一组链接节点：

{
  "type": "link",
  "props": {
    "label": "Storybook",
    "icon": "auto_stories",
    "href": "https://example.com"
  }
}

现在每个界面都可以共享相同的导航规则、主题绑定和布局逻辑——再也不需要重新构建“侧边栏”。

这开始像是一个浏览器

有一次我意识到： 我正在为结构化内容构建一个浏览器。运行时变成了：

• 布局引擎
• 主题引擎
• 节点渲染器
• 交互路由器

其他一切都只是内容。页面不再是模板，而是内容所在的空间。

为什么 AI 与之天然契合

这种模型非常适合 AI。AI 不需要生成完整的 React 项目，只需生成小的规范：

{
  "type": "Page",
  "props": { "title": "Themes" },
  "children": [
    { "type": "ThemesCatalog", "props": { "minimal": true } }
  ]
}

没有 CSS，没有路由胶水，没有组件绑定——只有运行时可以渲染的结构化意义。

我正在努力的方向

下一步是把它形式化为“站点规范”：

{
  "site": "this.GUI",
  "nav": [ /* … */ ],
  "pages": {
    "/": { /* spec */ },
    "/catalog": { /* spec */ }
  }
}

于是运行时就成了真正的内容浏览器：

• 加载路由
• 挂载规范
• 重用布局
• 动态生成聚焦

核心原则

不要构建界面。构建解释意义的运行时。

当你这么做时…… UI 成为一种透镜，而不是模板。

如果你也有同样的痛点，或许会喜欢这个方向。我正把它作为 neurons.me 的一部分公开构建。