# 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.

Source: https://knowledge.estage.com/capabilities/design-from-reference/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
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.

:::note[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](/capabilities/clone-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

1. **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.
2. **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.
3. **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.
4. **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](/capabilities/motion/); to fine-tune colors and spacing, use the
[visual editor](/visual-editor/).
:::