Layout Structure AI Engine
WIX STUDIO — 2025
The 'Responsive AI' feature in the Editor was designed to translate freeform designs into structured, scalable layout systems. To push this concept forward, I explored how the same approach could be powered by an external LLM instead of an internal model- introducing broader contextual understanding and enabling the system to handle more complex, insight-driven design scenarios. I did this by building a dedicated playground, connected to a custom system prompt tailored to this use case.
Enter component positions in JSON format
Send JSON to generate layout structure
Get the layout root and structural hierarchy—displayed visually
The Playground
How It Works
The playground functions as a lightweight layout engine. The system takes a set of absolutely positioned components, renders them on a canvas, and then reorganizes them into a clear hierarchy of stacks, grids, and standalone elements. These structures are inferred according to web best practices and responsive design principles, and the appropriate layout tools are then applied to the design.
