Claude Codeでアイデアをランディングページに変換

The Startup Ideas Podcast (SIP) @startupideaspod The Agentic Marketing Stack with Claude Code 4 26 251 17K The 5-tool workflow that takes a raw idea to a live conversion experiment in one session. No designer. No developer. Just a terminal and the right connections. Everyone can build a landing page now. Cursor, Replit, Claude Code: pick your tool, get a page in minutes. That was never the hard part. The hard part is knowing if the idea is worth building, making the design look professional (not vibe-coded purple chaos), and running real experiments to see if anyone actually converts. Amir came back on the pod and walked through a stack that handles all of it: Idea Browser for context and validation, Paper for design iteration, Claude Code as the build layer, and Humblytics for analytics and A/B testing. This guide breaks down each step so you can run the same workflow yourself. Step 01: Start With Context, Not Code Idea Browser now connects directly to Claude Code as an MCP. That means your AI agent can pull project context (ICP, positioning, competitive landscape, growth strategy) without you pasting walls of text into a terminal Amir started with a project he and Jordan had already scoped: an AI sparring partner for B2B sales teams, niched into freight software. The tool already had an offer definition file covering target customer, transformation, value, and competitive positioning. Why this matters Most people start by prompting "build me a landing page for X." They get a generic page because the AI has zero context about the business. Idea Browser stores that context as files you can reference across sessions. When you connect it as an MCP, Claude Code reads the full project history before writing a single line. The biggest problem right now: everyone can build landing pages and everyone has ideas. The gap is knowing where to get customers and having confidence the idea is worth pursuing. Context-first planning closes that gap. Step 02: Use Skills to Build the Right Asset Idea Browser includes "skills," which are specialized prompt templates for specific business tasks. Amir used two: Lead Magnet Legend (to create a lead capture offer) and Landing Page Architect (to structure the page). The Lead Magnet Legend skill analyzed the freight software niche and produced a specific lead magnet concept: "5 Objections That Kill Freight Software Deals." It saved the concept as a file inside the project, so every future prompt has that context baked in. Prompt: Connect to Idea Browser MCP. Look at my AI B2B sparring partner project. Pull the right context. Then use the Lead Magnet Legend skill to create a lead magnet landing page. One prompt. The agent reads the project, selects the skill, generates the asset, and stores the output for the next step. Step 03: Design in Paper (Not in Code) Here is where most vibe-coded projects fall apart. You iterate directly in code, lose track of versions, and end up with a page that looks like a developer built it at 2 a.m. Paper changes that. It connects to Claude Code and gives you an actual design interface where you create visual iterations before writing production code. Think of it as Figma, but your AI agent can read the design and build from it directly. The workflow Open Paper. Create a component (hero section, testimonial block, pricing card). Iterate on the visual direction. When you like a version, Claude Code reads the design and builds the real page from it. Amir refined hero sections, swapped layouts, and tested different visual hierarchies before a single line of production code was written. The result: a landing page that looks designed, not coded. Professional typography, intentional spacing, real visual hierarchy. Step 04: Track Everything With Humblytics Once the page is live, Humblytics handles the analytics layer. Standard traffic data, channel attribution, heatmaps for scroll depth and click tracking, and full funnel visualization. If you run paid campaigns (Meta, Google), Humblytics connects directly and gives you revenue attribution per channel. You see exactly what ad spend is making money. What you get out of the box Traffic sources and visitor data. Scroll depth heatmaps showing where people drop off. Click maps showing what elements get attention. Funnel tracking (page visit to guide download, for example). Full ad campaign attribution. Step 05: Run A/B Experiments From the Terminal This is where the stack gets wild. Amir used Claude Code to hit the Humblytics API and create an A/B experiment directly from the terminal. No code deploy. The Humblytics script dynamically updates the page content, so the variant shows up live without pushing changes through a developer. Prompt: Using the Humblytics API, create an A/B experiment (no-code type) for the headline on this landing page. Within seconds, the experiment was live. The control headline stayed in place. The variant rotated in automatically for a split of the traffic. Humblytics tracked conversions, clicks, and engagement for both versions in real time. The variant it generated: "Every lost deal started with an objection your rep wasn't ready for." Amir's reaction: "Honestly, not bad. Pretty fire." Humblytics also has a recommendations endpoint. You point your agent at it, and it scrapes your site, pulls traffic insights, reads your existing analytics data, and returns a detailed report on what to test and where to focus. The experiments write themselves. Step 06: Compound Context Over Time The final layer: feed your results back into Idea Browser. After each experiment, you add the performance data (what headline won, what converted, where traffic came from) into the project context. The next time you prompt for a landing page, a growth strategy, or a new lead magnet, your agent has historical performance data baked in. Amir's team does this with a master performance log. Every A/B test result, every revenue figure, every optimization gets stored. When they spin up the next c