infourier

AI 时代，界面设计缺少什么

AI 已经可以快速生成界面。问题因此不再只是“如何画出一个页面”，还包括人在生成之前，如何准确表达页面的结构、意图和约束。

infourier 处理的正是这个问题。它是一种从信息架构开始的界面定义工具：设计师和产品经理先描述产品由什么组成，再把这份结构交给 AI 生成界面或实现代码。

这个想法来自我在毕业设计 openwear 期间接触的 PCB CAD 软件。在 PCB 工具中，工程师先定义抽象的 schema，再将其转化为具体的电路板布局。

infourier 将这种分离方式用于 GUI 设计：先定义页面包含什么，再决定这些部分如何组织。

当前原型通过 IA（Information Architecture）和 Canvas 两种模式表达这一区别。IA 模式用于定义页面结构，Canvas 模式用于呈现这份结构对应的空间关系。布局不是另一份需要单独维护的设计稿，而是同一份产品定义的另一种表达。

从信息架构开始

当 AI 可以根据一句话生成页面时，设计师和产品经理需要表达的重点，不再只是某个元素的像素位置，而是更抽象的一层：页面由哪些部分组成、这些部分承担什么职责，以及它们之间是什么关系。

infourier 要求设计师先处理这些结构问题，并通过信息架构将其显式化。页面不再只是截图或画布上的形状，而是一份可以被 AI 读取、修改和执行的产品结构。

从架构到框架

Canvas 的作用是把信息架构转换成页面骨架。它表达区域之间的层级、位置和空间关系，每个节点也可以绑定组件。因此，人在早期阶段不必同时决定颜色、字体和其他视觉细节；这些内容可以由设计系统或 DESIGN.md 另行定义。

infourier 由此划分了人与 AI 的职责：人定义产品结构与布局意图，AI 据此生成界面、补充实现，并在已有组件体系中完成视觉表现。

人定义结构，AI 执行表现

因为以 IA 为起点，infourier 可以把产品结构导出为 JSON，将页面区域、语义角色和布局关系交给 agent。对 AI 而言，这些数据比截图更直接地描述了页面的组织方式，也比缺少结构约束的自然语言更容易执行。