Framer AI agent builds and publishes a brand site from a wireframe
Designer Tran Mau Tri Tam documented a workflow using Framer's AI design agent to build and publish a brand site. The process starts with a wireframe and prepared content file, then uses the agent to handle responsive breakpoints.

TL;DR
- A full Halora brand-site workflow moved from an empty canvas to a published demo, as tranmautritam's opening post documents.
- The opening request specified a landing-page wireframe, brand premise, and editorial botanical tone, according to tranmautritam's first step.
- A prepared file supplied the copy and information architecture: tranmautritam's content handoff directs the agent to use its attachment for all structure and content.
- Tablet and mobile breakpoints arrived as a final agent pass before testing and publishing, per tranmautritam's responsive prompt.
Framer's build-from-scratch guide says agent-created canvas work remains editable, and its responsive prompt catalog includes an almost identical full-site breakpoint pass. The compelling detail here is the ordering: the agent gets constrained layout and source material before it receives decorative direction.
Wireframe and section map
For Halora, a [living-moss concept site](Halora's live concept site), Tran Mau Tri Tam started by asking only for a simple full-page wireframe. The initial canvas mapped ten sections:
- Navigation
- Hero
- Impact Stats
- The System
- Why Moss
- The Data
- Backed By
- FAQ
- Closing CTA
- Footer
Content file
The next prompt turns the skeleton into a page using an attached source file for every content and structural decision. That constraint separates the agent's layout work from inventing the brand's copy, claims, and page order.
Framer's AI canvas overview says the agent can create editable pages, sections, copy, and visuals in the project, then hand control back to the canvas.
Type, partner strip, footer
Once the page existed, Tam issued three narrow changes instead of another full-page brief:
- Set Sentient for headlines and titles, Inter for body copy, and exclude DT Nightingale.
- Add a partner section below the hero with a support statement and animated logo carousel.
- Redesign the footer to match the rest of the site.
The last 30%
Tam put the agent's first pass at roughly 70% of the result. The remaining work was custom illustration, video, spacing, and small visual details, all applied manually on the editable Framer canvas.
Responsive pass and publication
The final prompt asks for tablet and mobile breakpoints and device-wide layout testing. The response shown in the agent panel says it added and optimized those breakpoints, while tranmautritam's launch post links to the finished site.
Hero shader and analytics
The finished hero's hover effect uses a native Framer shader, Tam said in tranmautritam's shader note. For post-publication measurement, he named Framer Analytics and Google Analytics in tranmautritam's analytics reply.