Connect your agent.

What is Design Corpus?

Design Corpus is a library of captured website designs that gives your AI agent a concrete visual reference. Instead of asking it to invent every layout, you give it a direction to study and adapt to your own content.

A reference can include a full-page screenshot, hero and section captures, and extracted design information such as typography, colors, spacing, and layout. Coverage varies by reference; the viewer shows the available captures.

How it works

1. Connect your tool. Use the guide for your agent or builder below. Design Corpus exposes tools through MCP over Streamable HTTP, with account authorization.
2. Choose a reference. Ask for accessible designs using list_styles, or match your brief with recommend_styles. Review the actual capture before choosing.
3. Study the details. Your agent can use get_build_guide, get_reference, get_hero, and get_section to inspect the design and work section by section.
4. Build and compare. The agent writes code in your project. You review the result against the reference and refine it. Corpus supplies context; it does not host or publish your website.

Your language. Your framework.

The corpus is language-agnostic. Its screenshots and design information are reference material, not a framework-specific component package. You can ask your agent to apply that direction in HTML/CSS, JavaScript or TypeScript, React, Vue, Svelte, or a server-rendered project using Python, Ruby, PHP, or another stack.

What your agent can build depends on that agent and your project. Tell it your stack and conventions; keep existing components and working behavior when restyling. A visual reference does not guarantee generated code will be correct in every language.

The navigation lists connection clients—Claude Code, Codex, builders, and more—not a list of supported programming languages.

Your first build

Start with an accessible reference and a small page. Specify the audience, content, framework, and whether you want a new page or a restyle of an existing project.

Read the Design Corpus build guide and list the references available to my account. Help me choose a direction for my project. Use my existing stack and preserve working features. Inspect the reference and section images before proposing changes.

After choosing a reference, build one section at a time. Check desktop and mobile, keyboard navigation, and reduced motion. Use your own brand, copy, and assets. If the agent cannot inspect returned images, use the manual pack.

Access and manual reference packs

Public previews let you browse website captures. Three free samples include full reference material; other sections and design details require active access. Signing in on the website and authorizing an agent are separate steps.

Sign in with the account that holds your active license to unlock its references. Manual packs and section details follow the same access rules.

No compatible MCP client? Open an accessible reference, download its pack, and attach the brief and screenshots in your builder. Work through the numbered section briefs and images together.

Coding agents & chat clients

CLI, editor, and chat setup—including Claude Code and Codex.

Website builders

Bring the corpus into your builder’s workflow.