How to Use the AI Design Editor

Introduction

The AI Design Editor lets you build and redesign your quiz just by describing what you want in plain language. Instead of editing every page by hand, you tell the AI what you're after — "add email capture before results," "make all the buttons dark blue," "rewrite my intro to be more compelling" — and it makes the changes for you, live.

It can add pages, capture leads, restyle elements, rewrite copy, apply a theme across your entire quiz, and even suggest conversion improvements — turning ideas into a finished quiz in minutes.

The key to getting great results is describing what you want clearly — and that's easier when you know Quizell's building blocks. This guide covers how the AI Design Editor works, the page types and elements it understands, and how to prompt it effectively.

You can watch the walkthrough below to see how it works:

Where to find it

Open a quiz in the Editor
In the left sidebar, click the AI tab
Type your request in the Ask Quizell… box, or click one of the suggested prompts

You'll see starter suggestions such as Add a welcome page with a strong value prop, Add email capture before results, Analyze quiz to boost conversions, Improve design with custom styling & HTML, Add a loader page before results, and Add a question to gather more insights.

How it works

Describe what you want in the chat — or click a suggestion to get going.
The AI applies the changes to your quiz and shows a summary of what it did (e.g., "Applied 2 changes"), with the result visible in the live preview.
Review and refine. Not quite right? Send a follow-up message to adjust — the AI builds on what's already there.
Save your changes. The AI will ask, "Would you like me to save these changes?" Click Save (top-right of the editor) to keep them. Unsaved changes are lost on page refresh.

Quizell building blocks (so you can prompt precisely)

The AI understands the structure of a Quizell quiz. Using the right terms in your prompts gets you faster, more accurate results.

Page types

Get Started Page — your quiz's welcome page and the first thing visitors see. Typically a headline, a short value proposition, and a button to begin.
Prompt Page — a question page that asks the visitor something and collects their answer.
Lead Page — a page dedicated to collecting contact details, often placed right before the results (e.g., "enter your email to view results").
Lead Capture Field — the input field (email, name, etc.) used to collect a lead. It's what sits on a lead page to gather visitor information.
Result Page — shows the visitor's personalized recommendation or outcome.
Thank You Page — the closing page shown after the results or a submission.
Static Page — an informational page with no question — useful for a message, explanation, or content block between steps.

You can also ask for utility pages like a loader page (a short animated step before results).

Elements

Elements are the building blocks placed on a page. You can ask the AI to add, edit, or restyle:

Background image — the image behind a page's content
Button / CTA — the call-to-action visitors click (e.g., "Get started," "Next," "View results")
HTML or CSS — custom code or content for advanced layouts and styling
…along with text, images, and other on-page elements

The more specific you are — naming the page type, the element, and the exact change — the closer the result will be to what you imagined.

What you can ask it to do

Add pages — a Get Started page, a lead page, a loader page, or a new question
Rewrite copy — headlines, intros, button text, and result messaging
Restyle elements — button colors, font sizes, backgrounds, and more
Apply a theme — a consistent look across your entire quiz
Gather more data — add questions to learn more about your visitors
Optimize — analyze the quiz for conversion improvements
Go advanced — improve the design with custom styling and HTML

Example prompts

Building

"Add a welcome page with a strong value prop"
"Add email capture before results"
"Add a loader page before results"
"Add a question to gather more insights"

Styling

"Change all the Next button backgrounds to dark blue, and make the font size 22px"
"Edit the whole quiz to different blue tones and make it look polished"

Copy & experience

"Improve my Get Started page design and copy to give a much better experience"

Optimization

"Analyze my quiz to boost conversions"

Saving your changes

Changes appear immediately in the editor preview, but they aren't permanent until you click Save.
Unsaved changes are lost on page refresh — always save once you're happy.
When you apply quiz-wide styling, save the theme too. This ensures any new pages you add later automatically inherit the same styles, keeping everything consistent.

Best practices

Speak Quizell's language. Reference page types and elements by name — "Get Started page," "lead page," "Next button" — so the AI targets exactly what you mean.
Be specific. Include the color, size, page, and element in your request. "Make all Next buttons dark blue at 22px" beats "make the buttons nicer."
One clear goal per message. Then refine with follow-ups — the AI builds on the current state.
Style quiz-wide, then save the theme. Apply a consistent look across the whole quiz and save the theme so future pages match automatically.
Review the preview before saving. Check each change in the live preview, then save when it's right.
Iterate freely. If a result isn't perfect, just describe the adjustment — you don't have to start over.

Important notes

Unsaved changes are lost on page refresh. Save before navigating away.
Each AI response shows an "Applied N changes" summary so you can see exactly what it did.
Saving the theme makes new pages inherit your current styles — do this after quiz-wide design changes.
Changes apply to the quiz you currently have open in the editor.

Troubleshooting

My changes disappeared

They were likely unsaved when the page refreshed. Re-apply your request and click Save.

New pages don't match my quiz's style

Save the theme after your design changes so new pages inherit the styling automatically.

The AI changed more or less than I expected

Be more specific and use Quizell's page/element names. Then send a follow-up message to fine-tune the result.

What's next?

These guides help you take the AI Design Editor's output even further.

Updated on: 05/06/2026

Was this article helpful?

Thank you!