> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Housemait — the fridge door

> Built live by an AI agent from one prompt — 9 sections in 31 minutes, filmed end to end.

Housemait is a family-organiser app: one home for the family calendar, meals, lists and chores, with an AI assistant that lives in WhatsApp.

The redesign reads the product's world literally — a **fridge door**: warm paper ground, magnet-dot accents, taped-on app screenshots, and the family's week pinned up section by section. Display face: Recoleta.

**One prompt. 9 sections. 31 minutes of agent time.** Every save in
the film hot-reloads the real WordPress page and re-runs the verification gates
at 1200, 1920, and 390 px. The AGENT TIME chip shows true elapsed time through
the timelapse.

<video controls muted playsInline className="w-full rounded-xl" src="https://mintcdn.com/wpos/SJvQl-i8LbIDDJtq/videos/ultra/examples/housemait.mp4?fit=max&auto=format&n=SJvQl-i8LbIDDJtq&q=85&s=a0bf1eb9cec8f3519aec9a29125e16a3" data-path="videos/ultra/examples/housemait.mp4" />

Watch the WhatsApp section land as one save, chat bubbles and all — and the meal-planner screenshots get taped up two saves later.

## The finished page

Both frames scroll — the full page at desktop 1440 px and mobile 390 px.

<div style={{display:'flex', gap:'16px', alignItems:'flex-start'}}>
  <div style={{flex:'1 1 0', minWidth:0, height:'620px', overflowY:'auto', borderRadius:'12px', border:'1px solid rgba(128,128,128,.3)'}}>
    <img src="https://mintcdn.com/wpos/SJvQl-i8LbIDDJtq/images/ultra/examples/housemait-desktop.jpg?fit=max&auto=format&n=SJvQl-i8LbIDDJtq&q=85&s=e36284ae7a766427508f98b95eeff19f" alt="Housemait redesign — full desktop page" noZoom style={{width:'100%', display:'block', margin:0}} width="1200" height="6964" data-path="images/ultra/examples/housemait-desktop.jpg" />
  </div>

  <div style={{flex:'0 0 240px', height:'620px', overflowY:'auto', borderRadius:'12px', border:'1px solid rgba(128,128,128,.3)'}}>
    <img src="https://mintcdn.com/wpos/SJvQl-i8LbIDDJtq/images/ultra/examples/housemait-mobile.jpg?fit=max&auto=format&n=SJvQl-i8LbIDDJtq&q=85&s=d4b63b0261d909d39ae5d309e4fede20" alt="Housemait redesign — full mobile page" noZoom style={{width:'100%', display:'block', margin:0}} width="390" height="9868" data-path="images/ultra/examples/housemait-mobile.jpg" />
  </div>
</div>

## How it was built

* The agent followed a written design brief with the section order, the design
  direction above, and the site's real copy and assets staged locally.
* [`exjsx dev --gates`](/ultra/deploy) ran the loop: save → compile → deploy →
  hot reload → [gates](/ultra/verify), a few seconds per save.
* Sections are plain [JSX components](/ultra/components); fonts ship via one
  `@font-face` carrier ([Media and fonts](/ultra/media-and-fonts)).
* The finished page is native Elementor V4 — the film ends inside the editor.

<Note>
  A design study of the real Housemait site, rebuilt with its public copy and
  assets to test the toolchain. No affiliation with or endorsement by the
  original brand; the study is not published beyond this documentation.
</Note>
