Skip to main content
This is the first scenario where the platform’s live browser becomes load-bearing. Most chat UIs can produce HTML and show you a code block. Computer Use can produce HTML, serve it on localhost, and show you the rendered page in the right-hand panel while you keep chatting. The user sees the design at the same time as the explanation.

​
The prompt

The Roasthaus landing prompt entered into chat.yambr.com

​
What happened

The frontend-design skill is opinionated about one thing: the result should not look like generic AI output. It nudges the model toward editorial typography, distinctive palettes, and intentional layout — instead of the bland Tailwind defaults that come out of a one-shot prompt. Concretely, on this run the model:
  1. Read the frontend-design skill’s reference materials (Explored str_replace, view).
  2. Spawned a sub-agent to build out specific sections in parallel — the green Sub-agent indicator was visible in the right-hand panel during the run.
  3. Wrote a single self-contained HTML file with embedded Tailwind.
  4. Started a local HTTP server on port 8080 inside the sandbox.
  5. Opened http://localhost:8080/roasthaus.html in the live browser tab.
  6. Took a screenshot to verify the design rendered correctly.
The reasoning was explicit:
Now I’ll create a moody, editorial landing page for Roasthaus with a dark roast aesthetic, custom typography, and distinctive design that avoids generic SaaS looks.

​
The output

Roasthaus landing page rendered live in the right-hand browser panel — Darker. Deeper. More Human. headline The page in the right-hand panel speaks for itself:
  • ROASTHAUS in monospaced serifs, navigation: OUR BEANS / VISIT / ABOUT
  • A small caption reading “SINCE 2019 — SMALL BATCH ROASTING”
  • The hero headline: “Darker. Deeper. More Human.” rendered in a display serif (Playfair Display) at editorial scale
  • Subhead: “Coffee roasted with intention for those who prefer their morning ritual with a side of shadows.”
  • A “DISCOVER OUR ROASTS” call-to-action with a thin black border instead of the usual loud filled button
The reply enumerates the design system:
  • The Mood: moody charcoal & espresso palette with crema-gold accents · grainy texture overlay for an analog coffee-shop feel · Cormorant Garamond (body) and Playfair Display (display) for literary vibes.
  • Layout: hero with dramatic, staggered typography reveals · three-card “Our Beans” grid with origin, story, and tasting notes · Visit section split between address details and a poetic invitation · decorative dividers between sections for breathing room.
  • Footer: three-column with brand story, navigation links, and social. Tagline: “Crafted with shadow and steam.”
And, crucially:
The page is live in your browser session — scroll to see the cards stagger in as you move down!
This is the demo working as intended: the user is looking at the actual product and can interact with it (scroll, click, inspect) without leaving the chat.

​
Why it works

Three platform features lock in here:
  1. The frontend-design skill provides design-system patterns (typography pairs, palette templates, layout grids) that resist regression to generic AI output.
  2. The terminal lets the model start a dev server and serve the file.
  3. The live browser loads the served URL and renders it in a panel beside the chat — so the user can see and interact with the result in real time.
The combination is what’s distinctive. A “design assistant” that just emits a code block is leaving 80% of the value on the table. The user wants to see the page, and ideally scroll it, resize it, click around. That’s only possible if the model has a sandbox with a browser inside it. Next: Hacker News AI digest →