Design from a reference
Paste a reference URL and describe what you want — Genesis studies the design, asks a few smart questions, and builds an original page inspired by it.
Design-from-a-reference is design taste inside Genesis: paste a reference URL and say what you want, and Genesis studies that design — its colors, typography, and feel — then builds you a polished, original page inspired by it. It's the design-taste flow: not a copy, a re-interpretation in your direction.
Inspired, not a clone
This is for "make me something like this, but mine." If you want a faithful 1:1 copy of a page instead, use Cloning a webpage. Both exist — when you ask for a page inspired by a reference, Genesis takes the inspired-redesign path.
How to trigger it
Just describe it — no special syntax needed. Give Genesis a reference URL and a brief in plain language:
- "Build a clean fintech landing inspired by https://stripe.com, but for my yoga studio"
- "Make it like https://linear.app — minimal, dark, lots of whitespace"
- "Design a page inspired by https://example.com, but luxury, with serif headings, in Russian"
The URL is optional — you can attach a screenshot and just describe it, or describe a style with no reference at all:
- "Design a minimalist Apple-style product page" — description only
- "Make it like this but warmer and friendlier" — with a screenshot attached
- "Design a fresh landing page for me" — bare; describe it when asked
What happens
- It studies the reference. Genesis captures the page (full-length, sliced so even a long landing stays sharp for analysis) and runs a vision pass to read its palette, accent color, typography, vibe, layout, and section structure — and even its language.
- It asks a few smart questions — only if needed. When something's genuinely unclear (the scope, the accent color, the vibe, the language, which sections, whether to pull real images), you get a short design-brief form. Each question is pick a ready answer, type your own, or "Let AI decide." If the URL + brief already make everything clear, it asks nothing and just builds.
- It can borrow real assets. Optionally, Genesis pulls real images and the logo off the reference and re-hosts them, so the result feels grounded rather than generic.
- It builds. You get a new, original page that captures the reference's design language in your content and direction.
Tips for a great result
- Say what to keep and what to change — "like this, but our brand colors and friendlier copy." The reference seeds the look; your brief steers it.
- Be directional on vibe — "luxury / minimal / playful / corporate", a font feeling (serif vs geometric sans), light vs dark.
- Name the language if it's not English — Genesis matches it.
- Let it ask. The brief form is quick and makes the output far closer to what you pictured — the "Let AI decide" option is always there if you don't care about a given choice.
Use cases
- "Build me a landing like [a site I admire], but for my business and in my brand colors."
- "Recreate the feel of this product page — minimal, lots of whitespace — for my app."
- "Same vibe as this, but luxury and in Russian."
Tip
This adds a fresh page in the spirit of the reference. To then animate it, just ask Genesis to animate the page; to fine-tune colors and spacing, use the visual editor.