Moksa runs Moksaweb, a small WordPress and WooCommerce studio in Taiwan. He gave Mosaic a site of its own so he could break it before a client could. Every element type went in one at a time and got checked against the delivered HTML, every style property against the compiled CSS. What came out the other side was a design system he could change from one place, and a structure regular enough that an AI agent could build on it.
Before Mosaic: wrapper-heavy output, no documented data model
Elementor ran most of his client sites, with Gutenberg for content. What wore on him was the output: “a page is a big JSON blob of widgets, the markup is wrapper-heavy, and animations mostly meant another plugin or hand-written CSS/JS glued on top”.
That mattered more than it would have a few years ago, because most of his building now happens alongside AI agents. He writes about n8n automation and Claude Code, and he cares about how machine-readable a page builder is, not only how it feels in the editor. Elementor gave him no clean, documented data model to point an agent at.
“When I wanted an AI agent to build or change a page, it had to reason about ~50,000 control definitions and still guess.”
One class, and a site-wide rule
Two things caught his attention before he committed to it. The front-end output, where “the delivered HTML and CSS are small and honest,” animations and interactions are native, and the design system compiles into real CSS instead of inline styles. And the structure underneath: one tree, revisions, and a REST protocol he could drive from a script.
The moment it clicked was a small one. He committed a class for Heading 2, and a site-wide rule appeared in the compiled CSS.
“That is a design system, not a page builder.”
The same structure let him build past what a client brief would allow. The homepage opens with an eight-second entrance sequence, and a ukiyo-e window sits in the bottom-right corner, looping through eleven animated layers, opening to full screen on tap or keyboard, and switching itself off under prefers-reduced-motion. No animation plugin and no custom JavaScript, all of it built from Mosaic’s own elements and interactions.
Built something with Mosaic? Add it to the showcase →
Regular enough for a machine to build on
What convinced him the system was real, was writing software against it. Mosaic-headless, his open-source skill for AI coding agents, builds and changes Mosaic sites by writing the data model directly, with no browser involved. Doing that meant learning exactly how consistent the underlying structure is.
“Mosaic’s structure is unusually regular. One tree, one style shape (states → breakpoint → property) used identically for nodes, variants and tokens, one REST protocol for every document type.”
One of the skill’s tools converts Elementor pages. It reads a page’s Elementor data, builds the Mosaic version through REST, and checks that every source string, image, link, and heading level survived the move. Across the 19 pages on his agency site, all 19 passed, at roughly 35 seconds each, against the day or two he would have budgeted for rebuilding them by hand.
The output holds up under his own measurement too. That Mosaic homepage runs to 1,286 elements and ships as roughly 235 KB of HTML including inline CSS, with no per-widget JavaScript bundle. The animations run on the document timeline, which is why, as he puts it, they “hold 60fps on a phone”. Re-verifying his entire site after a Mosaic update is an afternoon of scripts rather than a week of clicking through pages.
And the WooCommerce account page on the site, layout and login form styling included, is built entirely from Mosaic elements, whereas before it meant a theme override plus CSS plus something else for the animated parts.
“Look at the HTML and CSS it delivers before you look at the editor — that is what your visitors get. And know that everything you see in the editor is plain, documented data underneath, which means it can be built, verified and migrated by tools, not only by hand.”
Ready to start? Try Mosaic for free →
