Best Of

In today's #TipTuesday I would like to focus our attention on something no one is talking about these days: AI. Wait, what? You have heard about it?

I've been designing and building web-based software for a long time. As in, there was only one "CSI" when I started. A long time ago. I'm talking "Gladiator", "Cast Away", "Oops I did it again". Remember when websites had "Y2K Compatible" banners on them to reassure you? I did those.

So, I don't need to tell you that I have seen more than one "new thing" come out. Yes, I was a little skeptical about AI. But having sipped a tiny bit of the potion I have come to see that it only enhances my, already considerable, talent (humblebrag). It is freeing me from the technical minutia, and time constraints, and allowing me to be creative. It's not gunning for my job, it's gunning for my success.

If you're a community manager, you understand Community — not just the platforms that they run on. Your super-power is facilitating conversations and getting eyeballs to go where they should, not mucking around with software. You have ideas that you would love to execute but lack the time and technical resources to do them. Your time (and resource) has come. Let's use AI to build a simple HTML widget in Vanilla, just for fun.

I created this in a few minutes using Claude.ai but I'm sure any AI software will do the same job. I'm lazy, so instead of typing, I talk to it. For Claude, on MacOS, I double click on the cntrl key. And then it's just talking:

Hi Claude, I want to build an HTML widget for my Vanilla community that is simply HTML and text. I want there to be three blocks of text in this order:

Even though this is the first text in this box

you will read this first

and you will read this second.

"Even though this is the first text in this box" is actually the highest placed block on the page, "You will read this first" is the second block on the page, followed by "and you will read this second" is the third block. And the CSS is designed to make the "You will read this first" visually more prominent and the "Even though this is the first text in this box" is visually less striking and is, therefore, the last thing a reader's eye is drawn to.

Claude does its thing and gives me some generic HTML and CSS. And then I add:

Terrific, now can you capture colors and fonts, background colors, from our community banner and make the contrasts even more striking? Can the You will read this first be in all caps, centered on more than one line? Can the last line be right aligned?

and I upload this screen shot:

(I'm always polite to the robots. For when they take over the world…)

Then, badabing badaboom Claude creates the HTML and CSS:

I then copy the CSS into a CustomHTML Widget on my site:

Then the HTML:

And voila:

So here's your challenge: take your first step this week and build a custom widget. Try my prompts but with the screen shot from your site. Get more creative than I have in this demo - add a link to something meaningful, ask AI to give it a background image, use your imagination. Remember, you can create custom widgets that only you can see while you're experimenting, or work on your staging site if you have one. The key is to just jump in and get your feet wet. The community managers who embrace AI as a collaboration tool today will be the ones setting the new standard for what's possible tomorrow.