Prompt Best Practices

Overview

Master AI by using clear prompts, visual cues, and workspace-level branding settings. This guide helps you get faster, more accurate page updates from SuperFunnel's AI Agents and SuperAgent.

Remember, AI Agents are not just for executing tasks — they can also explain their reasoning, suggest improvements, and help you plan your design and campaign strategy. The more effectively you communicate with them, the better results you'll get.

Plan first

Consider starting with a Figma or AI-Generated mockup before creating SuperFunnel pages or quizzes.

Take time to read the Agent response

You don't need to be a developer to read the Agent's response. Reading the response helps you understand what the Agent is doing and why. It also helps you catch mistakes before they are implemented.

If you can, take the time to check out the code change and understand what's happening. At the very minimum, take the time to see your expected vs real results. This will help you understand the Agent's reasoning and improve your prompts.

Core Prompting Strategy

To get the best results when updating a page, follow these guidelines:

Isolate Requests

Make one change at a time. Bundling several complex design updates into a single prompt can confuse the AI or result in incomplete implementations.

With SuperFunnel, it is common to start by asking the SuperAgent to copy an entire page. For complex pages, you will see better results by starting with a single section, then starting new chats for each additional section. This ensures pixel perfect results.

99% AI, 1% Manual Edits

AI can copy/paste all the text and assets from a webpage or Figma design, so it is a great starting point. However, for small changes, such as fixing a sentence, or replacing a low-res image, consider doing it manually. Making small changes manually saves you AI credits and ensures accuracy.

Be Clear and Explicit

Use precise language instead of vague instructions. Precision can involve context, constraints and exact technical data (like hex codes or responsiveness).

Example: Giving Design Feedback

Avoid: "Make this section look better."
Better: "Increase the font size of the subtitle."
Pro: "Increase the font size of the subtitle on small screen sizes by 20%. Ensure the text still fits on a single line on most mobile screens. Do not change the font size on desktop or tablet."

Example: Specifying Color Changes

Avoid: "Change the background."
Better: "Change the background to mint green."
Pro: "Change the background to hex code #E8F5E9 to achieve a softer mint green that meets WCAG contrast accessibility guidelines."

Use the Agent to improve your prompts

Imagine you just used 3+ prompts to do something you thought you could achieve in one. Ask the Agent to help you improve your prompt for next time. Consider modifying and saving the response.

Share the page's goal, not just the change

With SuperFunnel, tell the SuperAgent what the page is for and who it's for, not only the visual tweaks. Context about your conversion goal lets the Agent make better design decisions on its own.

Prompt example: "This is a lead-gen landing page for B2B founders. Prioritize the signup form above the fold and keep the layout focused on a single call to action."

Be mindful of screen sizes

Tell the AI explicitly which screen sizes your task is for, and/or which it's not for.

Example: Preserving Layout

"Increase the hero image height by 50px for desktop only. For mobile, keep the size the same, but shift the image to the right by 50%."

Provide a mobile and desktop reference

Most Figma designers will provide a mobile and desktop reference. If you have one, provide it. If you are copying a website, open the site in both desktop and mobile view and take screenshots of both.

Prompt example, "Attached are design references for desktop and mobile..."

Start a New Chat for Unrelated Tasks

When switching to a completely different section or objective, open a new chat session. Context from a previous task can bleed into unrelated requests and produce unexpected results.

Refresh After JS Updates

Javascript may not update until a page is reloaded. If you are adjusting UX, refresh the page after prompts.

Leverage AI Explanation Patterns

Pay attention to how the AI describes layout fixes in the chat log. If you need a similar adjustment later, refer to terms like:

absolute inset-0
overflow-x: clip
column width

Referencing these structural terms helps the AI replicate fixes consistently.

You can ask questions

If you are unsure how or why the AI made a certain change, ask it. This can help you understand how it interprets your prompts and guide you in crafting better instructions in the future.

Prompt examples: "Tell me the name of the original and new images you swapped during this session." or "Give me a prompt to replicate the three changes we just made."

Utilizing Visual Assistance Tools

The AI agent works best when it has precise visual context. Use these built-in tools to guide its focus:

Visual Selection

In SuperFunnel, click the Visual Edit button in the bottom input bar and select specific components directly on the page preview. This highlights the exact element for the Agent and prevents it from editing unrelated sections.

Reference Screenshots

Take screenshots of pages or layouts you want to mirror. Explain what styling, layout, or alignment from the image you want the AI to copy.

Provide Full-Screen Context

If an element looks clipped or misaligned, include a screenshot that shows both the AI chat sidebar and the page preview. This helps the agent determine whether the issue is caused by responsive viewport constraints or absolute boundaries.

Reference Your Existing Pages

Point the Agent at pages you've already built as a style anchor instead of describing the look from scratch. This reuses styling you've already dialed in and keeps your workspace consistent.

Prompt example: "Match the header style and button colors from my Pricing page."

Managing Global Styles & Branding

Set strong workspace defaults so the AI can use your brand guidelines as a reliable baseline.

Enforce Workspace Settings

If layout or color results repeatedly miss your brand style, update the global branding guidelines in account settings. The AI references these rules when generating page updates.

Global and page design may differ

If you have specific pages that require different fonts, colors, or logos, you can set page-level design settings. However, maintaining consistent global settings helps the AI produce more predictable results across all pages.

Define Standard Layout Constraints

When your pages often use a recurring structure—such as split-column layouts with text on the left and a form or carousel on the right—mention those layout anchors in your prompt.

Verify & Save Your Changes

After the AI makes an edit, confirm it looks right across devices and that your work is saved.

Viewport Testing

After every AI modification, toggle between Desktop, Tablet, and Mobile previews. This ensures the layout remains responsive across breakpoints.

Try using an emulator or actual device for deep testing

After you're confident in your designs, consider using an iPhone emulator or testing on an actual mobile device to verify that changes render correctly in real-world conditions.

Draft Tracking

Look for the "Saved" status indicator before closing the chat session so you know all AI-generated changes are safely stored.

Troubleshooting & Resetting the AI State

If the AI gets stuck or produces an unwanted layout, use these recovery strategies:

Repeated task failure: click + New Chat or refresh the page, then try a new way of describing your outcome. Include screenshots whenever possible.
Broken layout: use Undo and Redo features to revert a page without losing chat context.
Caching issue: if a change is marked done but does not render visually, try refreshing.

Summary

Clear, focused prompts and strong visual context helps AI, such as SuperFunnel Agents and SuperAgents. Use configuration, such as SuperFunnel's workspace branding settings, and built-in recovery tools to keep page edits predictable and responsive.