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

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.

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