Design your site by describing it.
Tell Scraphe what you want and get a premium, on-brand site — built on proven, award-level design taste and delivered as real code in your own project.
- Free to browse
- 10 credits per build
- Never trained on your code
62 designs. Hand-reviewed. Zero AI slop.
Every build stands on a hand-crafted, human-reviewed library — free to browse, yours to start from.
The designs shown on this page — and any imagery in them — are AI-generated.
- 62
- Hand-reviewed designs
- 55
- Distinct design categories
- 5
- AI engines · 1x–8x credits
- 360px
- Verified responsive on 36 of 62 designs
We never train on your code.
From a sentence to a site you own.
No blank page and no copy-paste cleanup — describe it, then let it adapt to your stack as real, shippable code.
Start from your words, not a blank page.
A blank canvas is paralysing — and generic AI output screams “made by a robot” the moment you look at it.
Describe what you want and Scraphe designs it, grounded in a hand-crafted library of proven premium work — so the result looks designed, never generic.
- Add a pricing table
- Add social proof
- Make the hero bolder
It speaks your project’s language.
Dropping a design into your codebase means hours of hand-matching colours, fonts and components — work that usually gets left half-done.
Scraphe reads your project and rebuilds the design in your stack — your components, your brand — as real, shippable code, not copy-paste you have to repair.
- React
- Tailwind
- Your tokens
- Your <Button>
My plan — free, no credit yet
- Map your brand colour to the primary button
- Reuse your own Button component
- Keep the proven hero layout
Verified quality, not vibes.
Open any design in the viewer and see it up close — hand-reviewed, Scraphe Verified, and exactly what it’s delivered as.
Everything else, built in.
The unglamorous parts that make it real — the install, the safety net, and the receipts.
Connect to your agent
@scraphe/mcp-server hasn't been published, so there's no command to run today. It will connect straight into your agent once it ships.
Plan & preview, free
See the full plan and a live preview before a single credit is spent. A failed run costs nothing.
Pick the engine, see the cost
- Scraphe V1Grok 4.51x
- V1 ProGemini 3.6 Flash2x
- V2GPT-5.6 Terra3x
- V2 UltraGemini 3 Pro5x
- V2 MaxGPT-5.6 Sol8x
Review the diff, undo anytime
Every build is checked
- responsive-checkautomatic
- a11y-checkautomatic
Real code, in your repo
- your-app
- src
- components
- Hero.tsxnew
The finished component lands straight in your own project — plain React and Tailwind, styled to match your app. Host it anywhere, cancel any time, and everything you shipped still runs.
Browse free. Pay only when you build.
Browse and preview the whole library forever, no account needed. You only spend a credit when Scraphe actually builds a design into your code.
Browse, preview and copy everything, forever — no login. A small daily allowance to build with.
Start freeFor makers building a design into their own projects now and then.
Choose StarterFor designers and developers shipping premium sites regularly.
Choose ProFor teams and studios shipping client work at a steady pace.
Choose BusinessWhat costs a credit
Browse and preview all you like before you spend a thing.
- Browse & search the whole library
- Free
- Preview and plan an adaptation
- Free
- Adapt a design into your code
- 10 credits
- A failed run
- Free
You’re never charged for a miss — a failed run costs nothing, and browsing stays free forever.
Questions, answered plainly.
Do I actually own the code?
Yes. Scraphe puts real, ready-to-use code right in your own project. It's yours to edit, host, and keep — there's no platform to stay logged into and nothing to pay per use.
What does it cost to build a design?
10 credits each time your AI builds a design into your code. Browsing, previewing and planning are always free — and if a run fails, it costs you nothing.
Do you train on my code?
Never. When Scraphe adapts a design, it looks at your project only to match your style — and nothing from your code is kept or used for training. We never train on your code.
Which agents and editors work with it?
Any AI coding agent that connects to Scraphe — Claude Code, Cursor, VS Code, Windsurf, and Cline. If your tool can edit your project, it can build a Scraphe design into it.
Can I host it anywhere?
Yes. What you get is plain code in your repo, so you deploy it wherever you already ship — Vercel, Netlify, your own servers. Nothing ties it to Scraphe.
Describe it. Own it.
Start with a sentence. Browse the library free, forever — and pay only when you build a design into your own code.