All work

Strivelabs · Design engineer · 2026 → now

Strive Studio

Describe a marketing report in chat and get back a live dashboard, wired to your own ad and CRM data. Think Lovable for marketing, or Claude artifacts whose numbers never go stale.

Role
Design engineer · frontend
Team
5–6 engineers · CTO - data/sandbox layer, me - product layer
Status
Live for all customers
Link
strivelabs.ai

At a glance

The problem

Our initial Insights were snapshots, and reports asked for more: big volumes of data, numbers that stay live after you share them, and a story you get in one scan. A new schema and UI tool for every layout wasn’t going to scale.

My part

  • The report skill. The design guidelines and prompts every report is written with. They went from 650 lines of CSS to a little taste plus Tailwind presets.
  • Studio, designed in code. Prototyped the way I’d learnt on Lovable, v0 and Replit: clear sync states, a canvas that paints without flicker, and a resizable panel whose controls don’t overwhelm.
  • The plumbing in between. The report SDK and the postMessage bridge to our CTO’s sandbox and data layer, plus the first few reports.
  • The naming call. Insight docs and live reports named apart, so both could live side by side.

Our CTO had the idea of letting the agent write HTML, and built the data layer and sandbox. PDF export was shared with the backend team.

Shipped

Live for all customers, and one of the most used features in Strive. It’s where we’re investing most right now, in tokens and in quality.

Chat Let's get cooking! Report Builder Overview Organic & Traffic Overview 387 4,704 8.23% 5.2

Highlights

  • Live reports Built from a chat, current on every view no snapshots, in production
  • Sandbox & bridge Hosting HTML the agent wrote, safely host-held credentials, read-only calls
  • Design context Shell, tokens and taste for the agent so reports look like they belong
  • A pattern that spread The report canvas became the template briefings, routine previews, chat artifacts

Backstory

It started with insights

  • Strive AI could already turn a chat into a shareable insight doc: blocks you pick, plus AI summaries.
  • It still lives on as /share-insights. But reports wanted more: live data, big volumes, and a story you get in one scan.
v1, still in the product: blocks from a chat, compiled into an insight doc beside the thread.

The bet

Let the model write HTML

  • Every new report layout meant another schema and another UI tool. Some reports can’t be written as JSON at all.
  • So for reports we dropped schemas, and let the agent write what it knows best.
Controlled output and agent-written UI, side by side. The registry keeps the chat consistent; the agent gets the surfaces a schema would only get in the way of.

Design call · naming

Two ways to share, one product

  • We couldn’t drop insights. Snapshots with AI summaries, on a schedule, and customers liked them.
  • So I named the two apart, and gave reports a studio and a home of their own.
Insights for a moment worth keeping; reports for numbers that keep moving.

Security

Untrusted HTML, trusted data

  • The report runs in a sandboxed iframe: no cookies, no storage, no direct line to our API.
  • It asks the host for data. The host checks every message, holds the credentials, and only runs read-only calls.
The report can ask for anything. It can’t hold anything.

Design context

From a stylesheet to a little taste

  • I first wrote 650 lines of CSS for the agent to learn. It didn’t scale, and fought the point of dropping schemas.
  • Now it’s a little taste plus Tailwind, which models already write fluently, and brand context pulled in at onboarding.
Drag to compare. Same report, first in our default orange, then in the customer’s own brand kit, pulled in at onboarding.

Scale

Live, not heavy

  • Loading every row on page load froze the tab on big accounts.
  • Now reports load what you see first, and query the rest on demand, paginated on both ends.
Live should never mean heavy.

Shipping it

Build apart, then fold in

  • v1 was its own chat, to keep report rules out of the main prompt and experiment undisturbed. The price: a separate history.
  • v2 made it a skill in the main chat, with the report in a canvas beside the thread. One chat, one history.
Build apart, then fold in. The standalone studio was a step we took on purpose, and it was always meant to become a skill.

Design call · canvas

Loud canvas, quiet controls

  • Sync you can see. Chat and sandbox stay in step, and every stage says what’s happening: written to the sandbox, rendering, or why it’s slow. The canvas paints smoothly, with no flicker on a rewrite.
  • Controls that don’t overwhelm. A resize handle with a generous hit area, and sensible default and max widths. Distinct icons for the main actions, with split buttons tucking secondary ones like export away. Lovable’s clean side panel was the bar.
Strive Studio in use: on the left, the chat narrates each step of building a branded and non-branded traffic report; on the right, the finished report sits in a resizable canvas, with code, preview, open, full-screen and panel controls in its header.
  1. Every stage, said out loud. Reading the data, validating queries, writing, then live.
  2. A handle you can’t miss. A generous hit area, a sensible default and a max width.
  3. Code or preview. One toggle, never a new screen.
  4. Distinct icons for the main moves. Open in Reports, full screen, collapse the panel.
The report gets the room. The controls stay out of its way.

Misses & lessons

What the first reports taught us

  • MissWrote 650 lines of CSS for the agent to learn.

    LessonGive it taste, not a stylesheet. Extend what models already write, like Tailwind.

  • MissLoaded every row on page load. Big accounts froze the tab.

    LessonLive should never mean heavy. Load what’s on screen, fetch the rest on demand.

  • MissEarly reports looked vibe-coded: four KPI cards in a row.

    LessonBrand context and emphasis rules make a report look like yours.

  • MissExported multi-page reports in one go.

    LessonSnapshot page by page, and put a hard cap on the size.

A dashboard shows you numbers someone else chose. This builds the report you asked for, and keeps it alive.
Deep dive · ~10 min read Building live reports inside Strive: the story of Strive Studio The backstory, the naming call, the bet on HTML, and everything that broke at scale. Read the full story

Back to all work