AI isn’t magic. But when you’ve got a mile-long to-do list and someone (or something) can offer a hand? You take it.

So, here are two bite-sized ways I’ve used ChatGPT recently to keep things moving, especially when I hit a moment that would normally slow me down or have me asking someone else for help 🪄

1. Finding the right element(s) to anchor to

Modern web apps are built in all kinds of unpredictable ways. So when it comes time to place a Tooltip or a Pin, it’s not always obvious which element to anchor it to—or how to tell Appcues exactly what you mean.

Sometimes, you’ll see an error like “this selector isn’t unique or valid.” Other times, the step works in the editor, but doesn’t show up in preview. It’s not that anything’s broken; selecting the right element is hard when you're not a developer.

This is the moment where I’d (and some of our customers) normally go to our Support team (shoutout to my heroes 🙏) to inspect the page, dig into the element structure, and help find the right CSS selector.

Now? I ask AI when I need help.

Here’s how:

• I open the page in Chrome, right-click the element I want to anchor to, and choose Inspect.
• From there, I screenshot the relevant chunk of HTML in the Elements panel—usually a few lines that include the element and its attributes.
• Then I copy that code from the screenshot into ChatGPT using a structured prompt (below).

(The video below shows this step by step, including what to capture and how to paste it in.)

Then, ChatGPT gives me a few selector options, explains which one is most stable, and follows Appcues best practices—no weird :nth-child() hacks or class names that vanish tomorrow.

Pro Tip: Create a project and put this prompt in the AI Instructions so you don't have to re-type it each time.

🧪 Prompt I used to locate the correct CSS selector:

You're an expert in Appcues and CSS selectors. I need your help targeting a specific element on a webpage for Appcues content (tooltip, hotspot, or pin). Your response must follow these rules:

• Stability: Avoid dynamic classes, index-based selectors, or elements that change on page load.
• Simplicity: Use the shortest, most readable selector that’s uniquely targetable.
• Best Practices: Follow Appcues selector guidelines and general CSS standards (Appcues docs, CSS Tricks, W3Schools).
• Attribute Targeting: If needed, use attributes like [aria-label], [data-*], etc.
• No structural dependencies: Don’t use selectors that rely on element order or hierarchy.
• Appcues Use Case: Assume the selector will anchor a Flow on a live page.

Here’s the element I want to target: [Element]

Text copied

Is it perfect every time? Not quite. But it gets me 90% of the way there without waiting or guessing. And that frees me up to strategize our next initiative.... and even write this article.

Next up: pivoting to a way AI helped with something a little more design-y.

2. Writing responsive HTML all by myself

When I was rebuilding our free trial emails (you can bet there’s more coming on that soon 👀), I wanted them to feel more like us: bold, skimmable, and visually balanced. Basically: less boring, generic, text-based, more “that’s a nice looking email.”

So I headed to reallygoodemails.com for some inspiration. Shoutout to Miro so many great-looking ideas that are clean, modern, and content-first.

I love this, and I know the Appcues email builder can support designs like this. The problem is, layouts like that can take a hot second to build. I started wondering if a content block with custom HTML might be the faster path—not for the whole email, just for a nice two-column layout with text and a button side by side.

But I don’t know how to write HTML… so I thought: could AI write the code for that? Turns out—yep. It can.

🧪 Prompt I used to create two side-by-side responsive squares:

Write responsive email-safe HTML using only table-based layout (no divs or flex).

Two equal-width columns (50% each) inside a full-width table.
Each column should contain a card with the following:

• Width: 100%
• Background: #E5E5FF
• Border-radius: 8px
• 20px padding
• Centered image at top (30px wide, real or placeholder src)
• Bold title (h2, 14px)
• Paragraph (p, 14px)
• Centered button (a tag): Background: #5A39FF, white text, 4px border-radius, Font: 14px, Padding: 10px 20px

Use only inline styles for full compatibility
Use Mulish, sans-serif font
Make sure the layout stacks cleanly on mobile with a media query
Ensure it works perfectly in Outlook and Gmail
Do not exceed 600px width total if using a container

Text copied

I dropped the code into our builder. Then, I swapped the images, copy, and button URLs—and voila. She’s a beaut:

(Or, if something’s off, just go back to the thread and tell GPT exactly what to change—it’ll update the code for you in seconds.)

Honestly—what is next?

These were quick wins, but I know there’s a lot more I could do with AI to keep building smarter.

So you tell us what you want to see next:

• Should we make a custom GPT that helps you write message copy in your voice?
• A shared prompt library?
• Templated use cases from customers?

I’ve got ideas. But I’d love to hear which one you’d want to see next.

Tell me what you think: bill.williams@appcues.com