Published: 2026-04-13

Claude Code Workflow: Build Landing Pages with IdeaBrowser MCP and Paper UI

Chapters / key moments (click to jump — plays here on the page)

Greg Isenberg and a guest demonstrate how to build and refine AI-generated landing pages using Claude Code with IdeaBrowser MCP for persistent project context, Paper for design iteration between mockup and production code, and Humbolytics for conversion tracking and A/B testing. The workflow covers moving from a raw idea to a polished, animated landing page using component libraries like Tail Arc as design references.

Source video

"My Claude Code workflow no one knows about" by Greg Isenberg — Watch on YouTube →

Key Takeaways

Connect IdeaBrowser MCP to Claude Code to persist business context, ICP positioning, and growth strategy across sessions — so Claude always has the right background before building anything.
Use Paper as an intermediate design layer: Paper connects to Claude Code bidirectionally, letting you iterate on visual components without leaving the code environment, similar to how Figma connects to Cursor.
Reference existing component libraries (Tail Arc, or screenshots of sites you like) by dropping images into Claude — this gives it a concrete design system to work from rather than improvising.
Use the word "subtle" deliberately in prompts for animations and design refinements; vague words like "improve" produce inconsistent results, while "subtle, cohesive" produces polished outputs.
More agents than humans will soon visit websites — building agent-friendly architecture (markdown pages, MCP-accessible endpoints) is a real competitive moat, not a future concern.

Try this workflow

If you want to replicate this: open Claude Code → connect the IdeaBrowser MCP (search "IdeaBrowser MCP" in your MCP config) → create an idea file with your target customer, offer, and positioning → use that as context every time you build. Paper sits on top of Claude Code as a design layer — install it separately and connect it to the same project. Even without those tools, the core prompt discipline carries: drop a screenshot of a design you like into Claude, say "match this style" and "keep it subtle", and you'll skip 90% of iteration cycles.

Tools and Platforms Mentioned

Claude Code / Claude Cowork — the primary coding agent used throughout; handles everything from writing components to connecting MCPs
IdeaBrowser — MCP-connected business context manager that stores your ICP, offer definition, and growth strategy; connects directly to Claude Code. Search "IdeaBrowser" to find their site.
Paper — bidirectional design tool that sits between sketch and production code; connects to Claude Code to iterate visually without leaving the code environment. Search "usepaper" or "paper design tool AI".
Humbolytics — analytics and A/B testing platform for AI-built landing pages; the guest uses it to track conversion data and refine messaging. Search "Humbolytics".
Tail Arc — a Tailwind UI component library with polished blocks and illustrations; the workflow uses it as a reference by dropping component screenshots directly into Claude. Search "Tail Arc UI".

The Broader Point: Build for Agents, Not Just Humans

A key aside in the episode: the guest argues that more AI agents will visit websites than humans within a few years. His team rebuilt their site in custom code specifically to make it agent-friendly — so Claude Code can directly update their CMS, run tests, and ship changes autonomously. Webflow and framework-based sites constrain what agents can do. This is a real architectural decision that affects your content delivery now, not a future consideration.

OpenClawDatabase is built on the same premise — every page includes machine-readable JSON-LD structured data so agents can extract and use our content directly. If you're building a site and you want it to be accessible to both humans and agents, start with plain HTML and structured data before adding any framework.

Related on OpenClawDatabase

Claude Cowork Setup Guide — get Claude Code running with your first project
Claude Cowork System Prompts — persistent context that's the Cowork equivalent of CLAUDE.md
OpenClaw Skills Explained — the same progressive disclosure and context principles applied to OpenClaw, from another episode in this series

What you can actually set up from this

Extracted from the video's own transcript — the specifics the original summary left out.

Reproducible steps

Connect the idea tool as an MCP server and pull project context first
The opening move is a single prompt: connect to the MCP server, look at the named project, and pull the right context. What comes back is a persisted file — target customer, transformation, offer, value, competitive positioning — rather than context re-derived each session. The stated gap this closes is tracking how a business evolves over time with documents you can come back and reference.
Invoke a named skill rather than describing the task
Two named skills are used in sequence: a lead-magnet skill to produce the offer asset, then a landing-page architect skill to build the page. Each writes its output as a file into the project so the next step has it as context.
Build a design system from reference screenshots before generating anything
<strong>This is the most reusable technique in the video.</strong> Collect screenshots of existing sites whose design you like, drop them into Claude, and prompt: extrapolate the key design elements from these pages and help me create a design system. Save the result as a style guide file. Then, for every new section or component, prompt "reference the design style guide as the basis" — which is what produces consistency across sessions rather than a new look each time.
Use a design surface between the prompt and the code
The workflow puts a bidirectional design tool between Claude Code and the repository, so iterations happen in a design surface and land in code, instead of iterating directly in code and losing track of what changed. Figma shipped a bidirectional MCP that does the same thing; the choice here is preference, not capability.
Feed component libraries as references, not as dependencies
For polish, the approach is to install or screenshot blocks and illustrations from an existing component library and hand them to Claude as reference material to build on — rather than accepting the model's default first pass.

Gotchas

The presenter has a commercial relationship with the idea tool being demonstrated and says so on camera. The design-system technique and the reference-screenshot method are tool-independent; the specific product choices are not.
The claim being tested here is that "vibe-coded design is bad" is a workflow problem rather than a model limitation — the argument being that reference images plus a saved style guide plus a design surface is what separates polished output from the purple-gradient default. Presented as demonstrated, not measured.
Voice dictation is used for the long context-setting prompts and typing for short ones. A small point, but it is the actual reason the up-front context is thorough enough to be worth persisting.

← Back to News digest · See also: Claude Cowork guide · Cowork setup