infourier

Try infourier in your browser.

What interface design is missing in the AI era

AI can already generate interfaces quickly. So the question is no longer just "how to draw a page," but also how people accurately express a page's structure, intent, and constraints before generation happens.

That is the problem infourier addresses. It is an interface definition tool that starts from information architecture: designers and product managers first describe what a product is made of, then hand that structure to AI to generate the interface or implementation code.

The idea came from the PCB CAD software I encountered while working on my graduation project, openwear. In PCB tools, engineers first define an abstract schema, then turn it into a concrete circuit board layout.

Image 1 of 2

infourier applies this separation to GUI design: first define what a page contains, then decide how those parts are organized.

The current prototype expresses this distinction through two modes: IA (Information Architecture) and Canvas. IA mode is for defining page structure; Canvas mode renders the spatial relationships implied by that structure. The layout is not a separate design file that must be maintained on its own — it is another expression of the same product definition.

Starting from information architecture

When AI can generate a page from a single sentence, what designers and product managers need to articulate is no longer just the pixel position of each element, but a more abstract layer: what parts the page consists of, what responsibility each part carries, and how they relate to one another.

infourier asks designers to address these structural questions first, and makes them explicit through information architecture. A page is no longer just a screenshot or shapes on a canvas, but a product structure that AI can read, modify, and execute.

From architecture to wireframe

Canvas turns the information architecture into a page skeleton. It expresses the hierarchy, position, and spatial relationships between regions, and each node can also be bound to a component. This way, people don't have to decide colors, typography, and other visual details at the early stage; those can be defined separately by a design system or DESIGN.md.

infourier thus divides responsibilities between humans and AI: people define the product structure and layout intent, and AI generates the interface accordingly, fills in the implementation, and delivers the visual outcome within the existing component system.

People define structure, AI executes the visuals

Because it starts from IA, infourier can export the product structure as JSON, handing page regions, semantic roles, and layout relationships to an agent. For AI, this data describes how a page is organized more directly than a screenshot, and is easier to execute than natural language without structural constraints.