01 ⁄ Agent
Researcher
Reads your brief, mines design conventions of your domain.
Tone, archetype, references — distilled into a brief the studio can build to.
SketchXFlow is an AI website builder for non-coders who care about brand consistency. Describe a site in one prompt and SketchXFlow generates a brand-coherent, multi-page site — palette, typography, spacing, and components locked into a real design system. Every subsequent edit respects that system, so the brand never drifts across iterations the way it does with other AI builders. Audit any existing site by URL, rebuild it fixed in one click, share read-only previews with clients, and export clean HTML or a Next.js codebase — or push straight to git. Free to start, no card required.
NewDesign from your AI agent — Claude Code, Codex, CursorMCPOne prompt.
Studio · 0.9⁄ AI-native design tooling
One prompt.
A whole brand.
Generate a brand-coherent multi-page site from a single prompt — and keep editing it without it ever drifting off-brand. Same palette, same typography, same components, edit after edit.
- Brand stays locked across every edit
- Multi-page sites with shared nav & footer
- Export to Next.js, or push to git
WebMobileCode exportGit pushPDFYour tokens & fonts
⁄ Continue below↓ 02 — How it works
02.How it works
Five agents, one studio.
Behind the prompt is a small studio of agents — researcher, planner, compositor, critic, image curator. Each step is observable. The output is a real, editable multi-page site — every word, section, and image is yours to change.
02 ⁄ Agent
Planner
Maps the screens you'll need and how they connect.
IA, page count, primary flows — outlined before a pixel is drawn.
03 ⁄ Agent
Compositor
Writes the page — layout, type, color, and components as real code.
Production HTML with proper structure, not a flat screenshot.
04 ⁄ Agent
Critic
Audits hierarchy, contrast, rhythm — flags what's off.
Reports drift, fixes structure, then steps back.
05 ⁄ Agent
Curator
Generates the imagery the page needs — made to fit, not stock filler.
On-brand visuals composed for each section. Yours to regenerate or swap.
03.The moat
Your brand. Edit after edit.
Most AI website builders nail edit #1. By edit #10, the palette has drifted, the font has been swapped for Inter, and the page no longer looks like your brand. Our design-system lock holds the line — every edit is constrained to the tokens we extracted from your page.
SketchXFlowLocked
Edit #1
Atlas, your field notebook.
Begin
On brand
Edit #5
Atlas, your field notebook.
Begin
On brand
Edit #10
Atlas, your field notebook.
Begin
On brand
Same palette, same typography, same components from edit #1 through edit #10. The brand stays whole.
Generic AI builderDrifting
Edit #1
Atlas, your field notebook.
Begin
On brand
Edit #5
Atlas, your field notebook.
Begin
Edit #5: drifted blue
Edit #10
Atlas, your field notebook.
Begin
Edit #10: lost identity
The model "improves" things you didn't ask it to. By edit #5 it reached for default Tailwind blue. By edit #10 the brand is gone.
Token lock
Every utility class on your page is bounded.
The editor extracts your palette, fonts, radii, and shadows from the rendered page before every edit, then refuses to introduce anything outside that set.
Closest-existing fallback
Asks for a color we don't have? We pick the nearest one.
If your edit would require a new token, we approximate with the closest existing one — adding new tokens is your job in the Palette tab, not the AI's.
Linked design system
Team systems override page-level drift.
When a project is linked to a team Design System, edits align with that canonical token set even when the page's own values have drifted across iterations.
04.Refine
Edit by sentence.
No canvas to learn, no panels to hunt through. Describe the change in plain language and the studio rewrites the page — keeping your brand intact. When you want options, ask for them.
Natural language
Say what you want changed.
“Make the hero darker,” “tighten the pricing section,” “warmer headline.” The studio applies exactly that edit and leaves the rest of the page untouched.
Three directions
Not sure? See options first.
Ask for alternatives and the design picker returns distinct takes on the same page — different mood, layout, or emphasis — so you choose instead of guess.
@mentions
Point at a reference.
Drop @yoursite.com or @abrand into the prompt. The studio reads that page for real voice, palette, and structure, then designs in that direction.
Brand-locked
Edits never break the look.
Every change is constrained to the palette, type, and tokens already on your page. Edit #10 still looks like edit #1 — the moat from the previous section, applied to every edit.
Section by section
Regenerate just one part.
Like the page but not the hero? Regenerate a single section without disturbing the others. Imagery the same way — keep the layout, swap the picture.
Hand off
Export or publish.
Take the result as clean code or a PDF, or publish the page on a SketchXFlow link. No lock-in, no flatten-on-export surprises.
05.Archetypes
The site commits to a layout.
Every page picks one layout archetype and pushes it with conviction — editorial, brutalist, swiss, bento, and more — chosen to fit your brand instead of defaulting to the same hero-and-three-cards template. Motion choreography comes built in; immersive 3D is one toggle away.
Archetype · 01
Editorial.
Magazine-grade layout
Column grids, considered type, generous whitespace. For brands that want to read like a publication — calm hierarchy, confident restraint.
Editorial-magazine · Swiss-modernist · Corporate-confident
Archetype · 02
Brutalist.
Loud and structural
Heavy type, hard rules, ghost numerals, raw grids. When the type and structure are the visual system and decoration would only dilute it.
Brutalist · Developer-tools · Type-led
Archetype · 03
Bento.
Modular and warm
Tiled bento grids, playful illustration, expressive color. For consumer products and tools that want atmosphere without losing clarity.
Bento-grid · Playful-illustrative · Y2K
Archetype · 04
3D.
Immersive — opt-in
Flip on the 3D toggle and the hero becomes a real Three.js scene — model viewer, particle field, scroll-driven camera. Mobile gets a lazy poster fallback so LCP stays fast.
R3F hero · Scroll camera · Particle field
06.Identity Studio
From brief to brand book.
Type the brand. Add a website if you have one (we'll crawl it for real voice + positioning). The studio crafts the symbol, the lockup, the wordmark, an editable palette, a 12-page brand book PDF, and ready-to-ship export packs — usually in under 90 seconds.
Deliverable · 01
Symbol
A custom mark from a focused brief — concept, rationale, construction notes. PNG up to 2048 px + native SVG for vector workflows.
Deliverable · 02
Lockup + Wordmark
Horizontal and stacked lockups composed in SVG, the wordmark set in a curated Google Font tuned to the brand voice.
Deliverable · 03
Editable palette
Pick the colors. Hit Apply — every asset recolors in 5 seconds. Two-version history with one-click revert. Brand book follows the active version.
Deliverable · 04
12-page brand book PDF
Concept, voice, construction, type hierarchy, palette, color usage, do & don't, clear space. The whole identity in one shareable file.
Deliverable · 05
Export packs
Mobile (iOS + Android launcher sets), Website (favicons + social shares + PWA manifest), Brand assets, Print (4096 px) — every standard size, one click each.
Deliverable · 06
Custom resizer
Any size from 16 px to 4096 px, any background — transparent, brand light, brand dark, custom hex. Preview before download.
07.Editions
Web. Mobile.
Each edition is built from scratch — not scaled. The mobile is mobile. The desktop is desktop. Pick one, ship that one — built specifically for the surface it ships on.
Edition · 01
Web.
1440 × 900
Generous, cinematic, structured for the desktop reader.
Edition · 02
Mobile.
390 × 844
Thumb-first, compact. Built for tap, swipe, short attention.
08.Process
From sentence to design.
Four moves. None of them templates.
- 01
Begin
A sentence is enough — or plan it out in a chat with the studio first.
- 02
Compose
The studio drafts a complete, editable multi-page site.
- 03
Refine
Edit by sentence. Ask for options, swap sections, lock the brand.
- 04
Hand off
Export to code or PDF — or publish the page.
09.Developers · MCP
Design from your coding agent.
Connect SketchxFlow to Claude Code, Codex, Cursor, or any MCP client. Your agent designs new screens, edits existing ones, and hands you the code to drop into your stack — without leaving the chat you're already in.
$ npx @sketchxflow/mcp installOne command. It detects your installed agents, lets you pick which to set up, and wires them all with your API key — no per-app config to hand-edit.
Read the install guide →Works in
Claude CodeCodexCursorClaude DesktopWindsurfVS Code
⁄ The loop, in your agent
01 ⁄ Step
It asks
sketchxflow_clarify
Your agent interviews you — one sharp question at a time — until the brief is solid.
02 ⁄ Step
It designs
sketchxflow_design_page
Generates a polished screen: a brand-new project, or another page in an existing one.
03 ⁄ Step
You implement
sketchxflow_get_code
Pull the page's HTML + Tailwind and adapt it straight into your own codebase.
04 ⁄ Step
It refines
sketchxflow_edit
Change any section by sentence — brand-locked, so the rest of the screen never drifts.
What your agent can do
- Create new screens. Spin up a landing page, dashboard, or app screen from a sentence — one page per call, your agent orchestrates the rest.
- Edit existing screens. Change one section of a live design by instruction — “make the hero darker”, “tighten pricing” — brand-locked, nothing else moves.
- Implement in your stack. Get the generated HTML + Tailwind and re-implement it as React, Vue, or plain markup — the design becomes real code.
your agent
you ▸ Add a pricing page to my marketing site and wire it into the app.
agent ▸ Calling sketchxflow_design_page → page built. Pulling the code with get_code and adding /pricing to your router…
[07] · Begin
Open the studio.
The studio is open. The first draft is on us. Bring a sentence; leave with a design.