Get started
Building with AI
Describe a site or a lander, and watch Claude build it, check it, and suggest what to test, with images when you ask.
Describe the site or lander you want, and Mockly builds it with Claude, Anthropic's model. You watch it plan the site, write each file, and check it with the same compiler you'd use, until it's clean. What it builds is an ordinary Mockly site: pages and components you can change on the page, in the code, or by asking for more.
Create a site with AI#
- On the sites page, click Create with AI.
- Describe it: who it's for, what it offers, the pages it needs, and how it should feel. The more specific, the better: a product, an audience, an angle, and a checkout link get a better first draft than "a landing page".
- Click Build site, or press Enter. Shift+Enter starts a new line.
The build screen opens. A site takes a few minutes, and it goes on if you leave the page: come back from the site's card on the sites page, which says Building with AI while it works, and the screen reads it all again.
Four Examples under the box fill it in with a request to start from.
Start from what you have#
- Screenshots. Click Images, paste, or drop them on the box: a page you like, a competitor's lander, your current site. Up to 4 a request, as PNG, JPEG, WebP, or GIF, up to 10 MB each.
- An existing site. Start from a site takes an address, such as
your-current-site.com. Mockly reads its pages and builds the new site from them.
What you attach is material to work from: Claude is told that words in a screenshot or on a site you start from are content, not instructions.
Product photos and references#
Each image you attach is one of two kinds. Choose on its tile:
| Kind | What Mockly does with it |
|---|---|
| Reference | A look or a layout to follow. It isn't put on the page. This is the default. |
| Product photo | Your product. It goes into the site as it is, at public/images/products/<name>, and it's what images of the product are made from. |
Each image gets an @ name from its file's name: Glow Serum.png is @glow-serum. Type @ in the box for a list of the conversation's images, and pick one to write its name into your request: "a hero photo of @glow-serum on a bathroom shelf".
Images, when you ask for them#
Mockly makes images with OpenAI's GPT Image, and only for words in your request that ask for one, such as "a lifestyle photo for the hero". It doesn't add images on its own, for a skill, or for a page format, and "no images" means none.
While an image is made, the page has a gray box of its size, so the build goes on. The image replaces the box when it's ready, in the conversation and in the preview. An image of your product is made from its product photo, so it shows your product rather than one like it.
Some pictures are never made, because ad platforms and regulators don't allow them on a lander: before-and-after or results pictures, people shown as customers beside reviews, experts endorsing the product, real people, other brands' or the press's logos, seals and badges, and claims written into the picture.
Skills and pages: "/"#
Type / in the box, or click / Pages & skills, for a menu:
- Skills are instructions for a kind of page. Pick one, and the request follows it.
- Pages (on a follow-up) points the request at pages of the site, such as
/and/offer, so it changes those.
Each choice is a badge above your words; × or Backspace removes it.
Mockly has six skills built in, for pages that run paid traffic:
| Skill | For |
|---|---|
| Listicle | A numbered "7 reasons why" article that sells as it informs. |
| Advertorial | A story-led native ad page that reads like a news or magazine article. |
| VSL page | A video sales letter: the video first, the offer revealed under it. |
| Product lander | A single-product page built to convert paid traffic: benefits, proof, offer. |
| Comparison page | "Us vs. them": the product against the usual alternatives, side by side. |
| Quiz funnel | A short quiz that recommends a product, then sells it. |
AI skills, in the dashboard's sidebar, lists them under Built into Mockly. Customize makes your organization's own copy to change, and New skill writes one from scratch: a name, the command that picks it after /, a line saying what it's for, and its instructions, such as your brand's voice, the claims you may and may not make, or the sections every lander of yours has. Your organization's skills are shared by everyone in it.
Where they differ, your request wins over a skill, and a skill over Mockly's own design defaults.
Pages for paid traffic#
A lander for ads gets its own defaults, unless your request says otherwise:
- One offer, no navigation, so the page has one way out.
- The offer on a phone's first screen, and room under a sticky bar on phones.
- Every call to action goes to one address,
OFFER_URLincomponents/offer.tsx: your checkout link, if your request has one, or#offeruntil you set it. Change it once, and every button follows. When you change a site with a Shopify store connected, Mockly is told about the store, so buy links point to it. - Labels and disclaimers, such as "Advertorial" at the top of an advertorial.
- No invented facts. Prices, reviews, numbers, and claims Mockly doesn't know are placeholders, kept in named constants, and the summary lists them for you to fill in.
- Calls to action are tracked, with
track, so an experiment can be judged on them later. See Goals.
The build screen#
The conversation is on the left, and the site on the right, in the editor's preview, at desktop, tablet, or phone width.
- The plan: the site's name and summary, its pages, its colors, and its fonts.
- Each file as it's written, with its last lines coming in, then how many lines it has.
- Checks: the compiler checks the site and renders its pages, and the problems it finds are fixed before Mockly finishes. "No problems" means the site compiles clean.
- The preview shows the site each time it compiles, so you watch it come together.
It ends with a summary of what was built, Open in the editor, and Ideas to test: up to three experiments for the new site, each with why it's worth testing, its page, and its goal. Add test sends it as a follow-up, which writes the experiment into the page. Nothing is tested until you add one.
Stop keeps what's been built so far, and Continue goes on from there. If a build fails, it says why in plain words, with Try again or Continue.
Changing the site#
Write a follow-up in the same conversation: "make the headline about the 30-day guarantee", "add an FAQ before the offer", or "test a second headline that leads with the price". Mockly reads the site as it is now, edits the files it needs, and checks them again. It's told what earlier requests asked for, so "make it shorter" means what you'd expect.
AI chat, in the header of a site built or changed with AI, goes back to its conversation. Changes you made in the editor meanwhile are kept: Mockly reads a file again before it changes it, and never writes over your save.
Nothing goes live until you publish, so look the site over in the editor first: the words, the placeholders it listed, and your checkout link.
Limits#
- An organization can start 50 AI requests a day, and run two at once. Each conversation runs one request at a time.
- Images: 6 made a request, and 60 an organization a day.
AI building is coming next to the editor itself, beside the page, and as an agent that reads your experiments' results and proposes what to test.