DEVNOTES · GROK BUILD BETA

3 Months Work in 3 Days

A redacted case study for anyone building with an agent in one repo — brand system, multi-surface deploy, decks, editorial, and video — steered by taste, not tickets.

Redacted edition · names & URLs obscured

Session at a glance

Label: Public metrics · June 2026 · Grok Composer 2.5

Working sessions: 2 linked arcs
Conversation depth: ~293 events
Agent actions: ~145 total
Your prompts: 6 steering turns
Surfaces shipped: 3 sites + 4 decks
Agency equivalent: 8–12 wks → ~3 days

How the agent worked

Activity	Count	Meaning
Reviewed files	51	Pages, CSS, skills, session history
Searched content	33	Copy, classes, config across repo
Ran builds	23	Deploy, ffmpeg, pip, preview servers
Applied edits	13	HTML, CSS, generators
Generated visuals	8	Runway keyframes + editorial frames
Created files	4	Video pipeline, PDF builders

What steering sounds like

"I don't want to answer any of that — just want the containers to not be overdone on mobile, chill out."Builder

"Generate a video — glitch models on a runway, landscape for hero, vertical for social."Builder

"image_to_video wasn't available — shipped motion video from keyframes instead."Agent

Build something similar

A repeatable pattern — not a product pitch.

One repo, one deploy. Static HTML + CSS + a few Python generators. Agent edits in place; you review live URLs.
Design system first. Tokens + components before pages. Agent reads a skill / style guide before visual work.
Subdomain routing. One Vercel project, middleware rewrites per host — hub, portfolio, recruitment, devnotes.
Codegen for repetition. Python overwrites deck HTML/PDF from one content source so copy stays aligned.
Steer by slot. "Hero / break / contact" beats regenerating whole pages. Keep prev assets.
Scoped calm-downs. One file, one breakpoint when mobile feels loud — not a 40-item audit.
Honest tool limits. Missing ffmpeg or image_to_video? Adapt — keyframes + assembly still ships.
Export the arc. Case study + redacted devnotes for the next person (this page).

Snippets

middleware · subdomain rewrite

import { rewrite } from "@vercel/functions";

const HOSTS = new Set(["devnotes.example.com"]);

export default function middleware(request) {
  const host = request.headers.get("host")?.split(":")[0];
  const { pathname } = new URL(request.url);
  if (HOSTS.has(host) && (pathname === "/" || pathname === "")) {
    return rewrite(new URL("/devnotes/grok-build-case-study", request.url));
  }
}

deploy

cd your-brand-repo && npx vercel --prod --yes .

agent skill · brand guardrail

---
name: your-brand
description: Use when editing anything in your-brand-repo.
---

Before visual or copy changes, read references/STYLE-GUIDE.md.
Logo: PNG lockups only. Deploy after HTML/CSS changes.

scoped mobile fix

@media (max-width: 899px) {
  .your-page .nx-panel {
    border-color: var(--nx-border);
    background: transparent;
  }
}

Grok learnings

Verify tools before promising a workflow — adapt when a step is missing.
Short steering beats long questionnaires.
Slot-level image corrections ship faster than page rebuilds.
Brand skills work when read first.
Scoped diffs build trust — one file, one breakpoint.
Mid-task messages are usually refinement, not cancellation.

Export

This page is the redacted source. Download the matching one-pager for email or print.

Download 1-pager PDF (redacted)

Hosted at