Skip to main content

Create Landing Pages with AI and HTML Code

With the help of AI, you can create your own landing pages and email layouts without having to write the HTML code yourself.

AI can handle a large part of the design process and then generate the appropriate HTML code for you.

HTML stands for “HyperText Markup Language.” It is a markup language used to structure content on websites and in emails. Simply put, HTML describes what should appear where—for example, a headline, an image, a button, or a form.

You do not need to write or understand HTML yourself to follow this guide. The important thing is knowing where to paste the finished code and what information you need to provide to the AI.

The process is usually the same:

  1. Describe to the AI what you want to create.
  2. Have it create a visual mockup first.
  3. Refine the design together with the AI.
  4. Once you are happy with the result, have the AI generate the corresponding HTML code.
  5. Then paste the code into Quentn.

You can jump directly to the following sections:

1. Describe Your Desired Design to the AI

The more precisely you describe what you want, the better the result will be.

An instruction like this for an AI is often called a prompt. A prompt is simply the instruction or description you type into the AI’s input field.

Be as specific as possible and explain:

  • What do you want to create—a landing page or an email?
  • Which target audience do you want to address?
  • What tone should be used?
  • Which colors should be used?
  • What overall style are you looking for?
  • Which elements should the page or email include?
  • Do you already have copy, headlines, or calls to action?
  • Are there any images you want to use?

You do not need to know every detail yet. A general idea is enough for the first draft.

Example Prompt

Create a mockup for a modern landing page.

The target audience is entrepreneurs and self-employed professionals. The design should feel modern, premium, and clean. Use mainly dark blue, white, and subtle accent colors.

The landing page should include a hero section with a headline, subheadline, and call to action, followed by a benefits section with three benefits and a final call to action.

The tone should be direct, professional, and still personal.

The more information you give the AI, the fewer changes you will need to make later.

 

2. Have the AI Create a Mockup First

Before asking the AI to write HTML code, you should first have it create a mockup.

A mockup is a visual preview.

It shows you approximately what the finished landing page or email could look like before the actual technical code is created.

You can think of a mockup as a design draft.

For example, it allows you to see:

  • Where is the headline placed?
  • Where will the image appear?
  • What do the buttons look like?
  • Which colors are being used?
  • How much spacing is there between the individual sections?
  • Does the overall style fit your offer?

The big advantage is that changes are especially easy at this stage.

If you do not like something, simply tell the AI what you want it to change.

For example, if you are not happy with the layout of certain elements, you can give the AI a direct revision request:

I like the hero section. Make the second section look more modern and display the three benefits as cards next to each other.

Or:

Use fewer colors and make the overall page more minimalist.

Keep refining the mockup until the structure, colors, and style match what you have in mind.

 

3. Have the AI Generate the HTML Code

Once you are happy with the mockup, you can ask the AI to generate the HTML code based on it.

One instruction is particularly important.

Tell the AI:

Create the HTML code so that I can paste it as an HTML block into the body area of an HTML editor. The design must also display properly on mobile devices, so make sure it is responsive.

This helps prevent the AI from generating a complete HTML file with its own <html>, <head>, and <body> tags when you only need the content for an existing HTML section.

A complete prompt could look like this:

Now create the HTML code for the mockup shown above.

Create the HTML code so that I can paste it as an HTML block into the body area of an HTML editor.

Make sure the design also displays properly on mobile devices.

You can then copy the generated code and paste it into the appropriate HTML block in your template.

To do this, open your campaign and drag the “Landing Page” element into the workspace.

Double-click the element to open it and remove anything from the template that you do not need.

Then, on the right-hand side under the “Content” tab, find the “HTML” block and drag it into the landing page.

Click the block.

You can now remove the sample HTML on the right-hand side and paste in the HTML code generated by the AI.

 

4. Use Your Own Images

If you want to include your own image in the AI-generated design, the AI needs the direct file path to that image.

You can retrieve this directly from your template.

Here is how:

  1. Open your template.
  2. Add the “Image” content block.
  3. Upload the image you want to use.
  4. After the upload, the image’s file path will be displayed.
  5. Copy this file path.
  6. Add it to your AI prompt.

For example:

Use this image in the hero section:

[PASTE IMAGE PATH HERE]

Place the image to the right of the text and make sure it appears below the text on mobile devices.

Once you have copied the file path, you can delete the image block you previously added to the template.

The AI can now integrate the image path directly into the HTML code.

 

5. Integrate Quentn Forms

You can also integrate existing Quentn forms into an AI-generated landing page.

One thing is important here: Do not simply ask the AI to create an arbitrary form from scratch.

To make sure the form fields and data submission work correctly with Quentn, you should first create a real form in Quentn.

How to Do It

  1. Create a new form in Quentn.
  2. Add all the fields you want to collect later, for example:
    • First name
    • Last name
    • Email address
    • Phone number
  3. Then generate the form’s Raw HTML code.
  4. Copy this code.
  5. Give the complete Raw HTML code to the AI.

What Is Raw HTML?

Raw HTML simply means the “raw HTML code.”

You receive the technical code for the form without having to write it yourself.

This code contains important information about:

  • which form fields exist,
  • what those fields are called,
  • where the entered data is submitted,
  • and how the form is technically connected to Quentn.

This information should remain unchanged.

Example Prompt

You can then write something like this to the AI:

Here is the Raw HTML code for my Quentn form:

[PASTE RAW HTML CODE HERE]

Integrate this form into the existing landing page design. You may adjust the visual design of the form, but the existing form fields, field names, and technical functionality must remain unchanged.

This has one major advantage:

The AI takes care of the design—Quentn continues to handle the functionality.

For example, the AI can change spacing, colors, font sizes, borders, and buttons. However, the technically required fields and connections of the Quentn form remain intact.

 

6. Test the Result

After pasting the HTML code, you should always check the result carefully.

Pay particular attention to:

  • Desktop display
  • Smartphone display
  • Spacing and font sizes
  • Images and image paths
  • Buttons and links
  • Form fields
  • Form submissions
  • Preview display

If something is not quite right, you do not necessarily need to edit the code yourself.

Simply copy the existing code back into the AI and describe as precisely as possible what should be changed.

For example:

On smartphones, the spacing between the headline and the button is too large. Adjust the code accordingly. Do not change anything else in the existing design.

 

The Entire Process, Explained Simply

1. Describe your idea: Tell the AI what you want to create and what it should look like.

2. Create a mockup: Have the AI show you a visual draft first.

3. Improve the design: Tell the AI what you like and what should be changed.

4. Generate the HTML code: Once you are happy with the design, have the AI turn it into HTML code.

Always use this instruction:

Create the HTML code so that I can paste it as an HTML block into the body area of an HTML editor.

5. Prepare your images: If you want to use your own images, upload them first using the image block and copy the displayed file path.

6. Prepare your forms: If you want to integrate a Quentn form, create it in Quentn first and then copy the Raw HTML code.

7. Paste the code: Copy the HTML code generated by the AI into the designated HTML block.

8. Test everything: Check the layout, images, buttons, links, and forms.

Related articles