Design with what
already works

500+ award-winning references in your editor. Brainstorm visually, build with real code.

"mcpServers": {
  "artefact": {
    "url": "https://mcp.artefact.ink/mcp"
  }
}

Curated from 500+ award-winning sites

Resend Railway Supabase Vercel Darknode Micro Design by Dylan Arc Resend Railway Supabase Vercel Darknode Micro Design by Dylan Arc
Mammoth Murals Arqui9 ICG Galleries GKC Architecture Portfolio 25 Resend Railway Supabase Mammoth Murals Arqui9 ICG Galleries GKC Architecture Portfolio 25 Resend Railway Supabase

How it works

Three steps from idea to implementation.

Describe your vision

Tell your AI editor what you need. Artefact listens through MCP and finds the best references.

> I need a dark hero section with a gradient CTA
  for a developer tools SaaS

See real references

Real components from award-winning sites, shown visually in your browser.

Resend Railway Supabase Vercel

Build with real code

Every reference comes with production HTML & CSS. Copy, adapt, ship.

<section class="hero">
  <h1>Ship faster</h1>
  <a class="cta">Get started</a>
</section>

Why Artefact

Not another AI design generator.

Curated, not generated

Real components from Stripe, Linear, and 500+ award-winning sites. Not AI-generated mockups. Not stock templates. The real thing.

500+ sites · 1,800+ components · 12 categories

Real production code

HTML & CSS extracted from sites that won Awwwards, CSS Design Awards, and SiteInspire.

Works in your editor

Claude Code, Cursor, and any MCP-compatible editor. One line in your config.

Visual brainstorming

See design references in your browser as you brainstorm. Click to choose, then build.

Simple pricing

Start free. Upgrade when you need more.

Free

$0/mo
  • 30 queries per month
  • Design copilot
  • 1 API key
  • — Priority support
  • — Early access
Get started

Pro

$49/mo
  • Unlimited queries
  • Design copilot
  • Unlimited API keys
  • Priority support
  • Early access
Get started