Lovable for Marketers: Agent Mode, Chat Mode, Visual Edits and How to Publish Your First Site

Lovable will build a working website, with a database and a login system behind it, from one paragraph of plain English. The reason marketers still get stuck has little to do with the tool: they do not know what a back end is, which of the three modes to use for which job, or where their form submissions went. This guide fixes those three things, then gets your first site live.

Key takeaways

• Vibe coding means describing what you want in plain language and letting AI write the code. You steer with prompts, review and refine.
• Lovable builds the front end and the back end together. Lovable Cloud, built on Supabase, gives you a database, logins and storage from the first prompt.
• Plan in Chat Mode, build in Agent Mode, polish in Visual Edits. Visual Edits costs no credits.
• Publishing is one click, on a free Lovable domain or a custom domain bought inside Lovable.

What vibe coding is, and why it is the third era of building

Vibe coding is building software by describing what you want in plain language and letting AI write the code. You bring the idea and the words, and you steer with prompts, review the result and refine it. No syntax, no programming background. It is the fastest path from an idea to a working website or app that exists today, and we teach it as the third era of building:

1. Era one, full code: developers hand-wrote everything, front end and back end. Slow and expensive.
2. Era two, no-code and low-code: platforms such as Squarespace, Shopify and Wix let you drag and drop. Faster, but limited to what the platform allows.
3. Era three, vibe coding: tools such as Lovable, Replit and Claude Code let you build custom software by prompting. The speed of no-code with the freedom of real code.

For marketers this removes the wall between what you can imagine and what you can build. For the wider picture of the three routes to a landing page, see our vibe coding guide.

Website or app: start with the website

Most people need a website first. A website presents information and captures leads: your brand, your services, a contact form. An app or tool does something: a calculator, a booking system, a dashboard, a login area. Once you can build a website in Lovable, an app is the same skill with more moving parts.

The pieces of any website, and which ones Lovable handles

Lovable handles the back end, the database, the hosting and the domain for you, which leaves you with prompting and reviewing. Here is what a website is made of:

Piece	What it is
Front end	Everything the visitor sees: design, text, images, buttons
Back end	The engine behind the scenes: logic and data handling
Hosting	The server where your site lives
Domain	Your address on the web
Database	Where your data is stored: submissions, users, orders
Email	The service that sends and receives, such as contact form messages

Here is who handles what on each of the three tools we teach:

Tool	What is handled for you	What you do
Squarespace	Hosting, domain, database, back end	Design within the platform
Lovable	App and back end, through Lovable Cloud	Prompt, review, refine
Claude Code	Nothing by default	Build the code and connect Supabase, Vercel and Resend yourself

The rule: the more control you want, the more pieces you manage.

Every Lovable project runs on Lovable Cloud, which is built on Supabase under the hood. The database, logins and storage exist from the first prompt, and you do not create a separate Supabase account. Your data lives in the Cloud tab of the project menu: database, users, storage and emails. When a visitor fills in your contact form or signs up, the submission appears in that database, inside Lovable.

The three modes: Agent, Chat and Visual Edits

The sequence we teach is plan in Chat, build in Agent, polish in Visual Edits.

Mode	What it does	Use it for
Agent Mode	The autonomous default: plans, builds, tests and fixes across multiple steps	Building pages and features
Chat Mode	Plans, answers questions and debugs without changing any code	Structure, and asking why something broke
Visual Edits	Click an element and change text, colour and size. No prompt, no credits	Small tweaks once the build is right

Once a site is built, edit it by prompting again for big changes, selecting an element and instructing it, or using Visual Edits for small tweaks. Treat the AI like a designer on your team: "make the hero headline larger" works far better than "make it better".

Write the copy before you prompt

The biggest beginner mistake is opening the builder with nothing to say. A website is message first, not design first, and if the words do not sell, no design will save them. Before your first prompt, write the homepage using AIDA: a benefit-driven headline under ten words, a subheadline that names the problem, three to five benefits written as outcomes, social proof, one clear call to action repeated top and bottom, and an FAQ that answers objections.

Your prompt then becomes a brief: the purpose of the site, the audience, the pages, the actions you want visitors to take, your colours, fonts and tone, and the copy itself. Build the structure first, then refine section by section.

Publishing your first site

Going live is one click on Publish. The site goes up on a free Lovable domain, or on a custom domain you can buy inside Lovable, with no exporting and no server setup, so a beginner can go from prompt to live website in a single session. The free plan is enough to experiment and build a small project; paid plans unlock private projects, custom domains and more building credits.

Squarespace, Lovable or Claude Code: when to use which

Use Squarespace for a standard business website, Lovable for anything a template cannot do, and Claude Code for full control over complex builds.

Situation	Use
Standard business website, low effort, all-in-one	Squarespace
Custom tool, app, calculator, booking flow, campaign microsite	Lovable
Full control and complex builds once you have outgrown the others	Claude Code

Most people live in Squarespace and Lovable and grow into Claude Code, running the main site on Squarespace and using Lovable for campaign pages and custom tools.

The honest learning curve

Websites take a couple of weeks of practice to reach client-ready quality; apps and tools take a couple of months. The curve is short, but it is real, and it rewards practice. The payoff is a skill that covers its own cost quickly: your own brand site with no agency fees, websites for clients as an income stream, and custom tools you can package to win and keep those clients. Start with one website this week.

Where this is taught

Lovable, alongside Squarespace with code blocks and Claude Code, is week 5 of the AI Marketing Professional Certificate. The Website Copywriting skill included in the programme runs the AIDA intake and writes the homepage before you open the builder.

Frequently asked questions

Do I need a Supabase account to use Lovable? No. Lovable Cloud is built on Supabase and runs inside your project. The database, users, storage and emails are in the Cloud tab, and you never set up Supabase separately.

Which mode should I start in? Chat Mode. Ask Lovable to plan the site without touching code. When the plan reads right, switch to Agent Mode to build, and finish small text and colour changes in Visual Edits, which uses no credits.

Can Lovable replace my Squarespace site? It can, but that is rarely the right move. Squarespace is the low-effort choice for a standard business site. Lovable earns its place when you need something custom, such as a quiz funnel, a calculator or a booking tool.