<- all tokdocs
2026.06.11@gregisenberg

The AI Stack That Builds, Designs, and A/B Tests Your Landing Page Without You

AI
Watch on TikTok

View on TikTok ->

Greg Isenberg lays out a four-tool AI workflow that takes a landing page from idea to live A/B test with minimal manual work. The pitch is direct: vibe-coded pages look like a "pile of purple mess," and this stack fixes that by giving Claude actual design taste and real performance data to act on.

Step 1: Build Context with Idea Browser and Claude MCP

The workflow starts by connecting Idea Browser to Claude through MCP (Model Context Protocol). As you build, Idea Browser saves key details about your project as a structured file that Claude can always pull from. This solves a real problem with AI-assisted building: the model forgets what you are working on between sessions. With MCP integration, Claude has persistent access to your positioning, customer profile, and product details every time you prompt it.

The video shows an example customer profile in YAML format targeting busy professionals aged 20-35 who start workout plans and struggle to stay consistent. That level of specificity is what separates useful AI output from generic slop.

Step 2: Feed Claude Real Design References

Context alone does not produce good-looking pages. The next step is to feed Claude screenshots of sites you actually admire and ask it to extract the design system. The video shows Claude (running Sonnet 4.6) pulling out colors, fonts, spacing, and layout rules from those reference screenshots into a structured design system document.

This is the key insight of the whole workflow. Instead of hoping the AI generates something tasteful from a text prompt, you give it concrete visual examples and let it reverse-engineer the patterns. The output is a reusable design system file, not a one-off page.

Step 3: Iterate Visually in Paper

The extracted design system goes into Paper, which Isenberg describes as "like Figma, but wired into your terminal." Paper lets you ideate and iterate with subtle refinements until the landing page matches what you want. Because it connects to your development environment, changes flow directly into code rather than requiring a handoff from design tool to codebase.

Step 4: Automate A/B Testing with Humble edX

Once the page is live, the final tool takes over. Humble edX is an agent that scrapes your deployed page and tracks the metrics that are hurting conversion. The video shows it surfacing a 68.4% bounce rate on the live page.

Here is where it gets practical: Claude writes a new headline based on your actual bounce rate data, a script dynamically updates the site, splits the traffic between variants, and tracks the winner. The entire optimization loop runs without manual intervention after initial setup.

Key Takeaways

  • Persistent context via MCP prevents Claude from losing track of your project between sessions, which is one of the biggest friction points in AI-assisted development today
  • Screenshot-based design extraction gives the AI concrete visual taste instead of relying on vague text descriptions of what "good" looks like
  • Paper bridges design and code by connecting a visual design tool directly to your terminal, removing the Figma-to-code handoff
  • Automated A/B testing with Humble edX closes the loop by feeding real user behavior data back into the AI for continuous improvement
  • The full stack covers the entire lifecycle: ideation, design, build, deploy, test, and optimize

Resources

Published June 11, 2026. Writeup generated from a favorited TikTok.