Layoutline Layouts for agents

Free MCP server · 39 layouts

Landing layouts your coding agent can actually pick from

Structures observed on real pages. Your agent picks one, composes it around your copy and brand, then checks what it built — instead of shipping the hero–features–pricing page everyone has seen.

Connect your agent

Free · no card · one line to add

See the calls
agent → compose_pagereal output
compose_page({
  layoutId: "SparkGrid-05",
  tokens: { typography, colorRoles, surface }
})
← plan · 5 slots · every lock source "tokens"
  1. herocode_right · h1
  2. feature gridh2
  3. code sampleh2
  4. docs ctah2
  5. footer

Connects toClaude Desktopclaude.aiClaude Codeany MCP client

What your agent gets

A catalogue, a plan it can build against, and a check on what came out — each one a single free call.

  • 39 real structures

    Each one observed on live product pages, with the sites it came from — not another variation of one template.

  • Three reasoned picks

    Describe the product, the audience and the one thing a visitor must understand; get three layouts and why each fits.

  • A plan in your brand

    Ordered slots with copy limits and type levels, carrying your own fonts, colours and surfaces — each marked with where it came from.

  • A review that names drift

    Describe the built page; findings name the missing or misplaced section, or a hero shaped wrong for the layout — not just “looks generic”. Guidance, not a guarantee.

  • Remembered per project

    The chosen layout and locks land in your repo, so the next session reuses them instead of deciding again.

  • Where your agent already works

    Add it beside the tools you use today. No new editor, no new account to juggle per project.

The three calls

Pick with a brief, compose with your tokens, review with a description of what was built. Same shapes your agent receives.

// 1 · pick
pick_layout({ productDescription, audienceDescription, keyUnderstanding })
← 3 layouts, each with reasons and a section skeleton

// 2 · compose
compose_page({ layoutId, copyBriefJson, tokens })
← ordered slots · copy limits · type levels · lock

// 3 · review
review_page({ composePlanId, screenshotRef: "Hero with a terminal right; …" })
← missingSections · outOfOrderSections · extraSections · heroMismatch

Add the server in one line

Claude Desktop and claude.ai connect from the URL alone. Everywhere else, issue a key on the dashboard and paste the line it shows you.

claude mcp add --scope user --transport http layoutline \
  https://app.layoutline.dev/api/mcp \
  --header "Authorization: Bearer <your key>"
Connect your agent Read llms.txt

Free to start · no card needed