Curated from 500+ award-winning sites
500+ award-winning references in your editor. Brainstorm visually, build with real code.
Curated from 500+ award-winning sites
Three steps from idea to implementation.
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
Real components from award-winning sites, shown visually in your browser.
Every reference comes with production HTML & CSS. Copy, adapt, ship.
<section class="hero">
<h1>Ship faster</h1>
<a class="cta">Get started</a>
</section>
Not another AI design generator.
Real components from Stripe, Linear, and 500+ award-winning sites. Not AI-generated mockups. Not stock templates. The real thing.
HTML & CSS extracted from sites that won Awwwards, CSS Design Awards, and SiteInspire.
Claude Code, Cursor, and any MCP-compatible editor. One line in your config.
See design references in your browser as you brainstorm. Click to choose, then build.
Start free. Upgrade when you need more.