How to Use Claude AI With Showit — No Developer Needed
Posted in: Design Resources | Read time: 7 min
Most Showit designers are using AI to write captions, brainstorm color palettes, or draft client emails.
That’s fine. But it’s also the floor — not the ceiling.
There’s a combination almost nobody in the Showit community has figured out yet: Claude AI + Showit’s code block. And once you see what it makes possible, the way you think about your website (and your clients’ websites) will never be the same.
This isn’t a workflow hack. It’s a new category of deliverable.
What Is Showit’s Code Block — And Why Most Designers Ignore It
Showit has always had a code block feature. If you’ve been using Showit for a while, you already know it exists. You’ve probably used it to embed a Calendly link, drop in a Spotify player, or add a Google Review widget.
That’s not wrong. It’s just a fraction of what it can do.
Here’s what most designers don’t realize: Showit’s code block accepts raw HTML, CSS, and JavaScript. Which means anything you can build in code, you can embed directly onto a Showit page — no plugin, no third-party tool, no developer required.
The problem has always been that most designers don’t write code. So this feature sat there, quietly underused, in the hands of the very people who could unlock it.
Claude changes that entirely.
What Claude AI Actually Does (In Plain English)
Claude is an AI made by Anthropic. You might have heard of it — it’s one of the most capable AI writing and reasoning tools available right now.
But here’s what most non-developers don’t know: Claude writes code. Really good code. And it can build a fully functional, branded, interactive HTML tool from a plain-English prompt.
You don’t need to understand the code. You just need to describe what you want, let Claude write it, and paste it into Showit.
That’s the whole thing.
What You Can Build in Under 20 Minutes
When you combine Claude’s ability to write HTML with Showit’s code block, you can build interactive experiences that most websites — including competitor sites — simply don’t have.
Here’s what’s possible:
A lead qualifier quiz. Five questions that filter your ideal client before they ever book a call. Wrong-fit inquiries drop off. The right ones arrive already pre-sold.
A brand clarity exercise. A tool that helps a visitor articulate what they want — and shows them where the gap is. Builds trust before they’ve read a single word of your copy.
A client onboarding experience. An interactive intake process embedded directly on your site. No PDF, no form that goes nowhere, no follow-up email asking for things you should already have.
A positioning audit. A self-assessment that exposes a problem and positions you as the person who knows how to fix it. (This is exactly what I built on my own site — you can take it at christyallicreative.com/designer-toolkit.)
A “what service is right for you?” tool. Let visitors self-select. They get a relevant recommendation. You get a warmer inquiry.
These aren’t gimmicks. They’re tools that do real work — filtering leads, building trust, collecting information, and educating visitors. Before they’ve spent a single dollar.
The Four-Part Framework: Audit, Ideate, Prompt, Embed
Here’s the process I use. It’s the same framework in the free guide at my designer toolkit page — broken down into four clear steps.
Step 1: Audit
Start with the bottleneck in your own business.
Is there a question you answer on every discovery call? What information are you always chasing down from clients? What do visitors need to understand before they’re ready to reach out?
That gap is your tool. You’re not building something cute — you’re solving a real friction point.
Step 2: Ideate
Once you know the problem, map the experience.
If it’s a quiz: What five questions would surface the answer? What are the possible results, and what does each one tell the visitor to do next?
If it’s an audit: What are the signs someone has the problem you solve? What would make them read each item and think, “She’s describing me exactly.”
Keep it simple. Five questions is plenty. Eight checklist items per section is enough. The goal is a quick win, not an encyclopedia.
Step 3: Prompt
This is where Claude comes in.
Write a brief — not just “build me a quiz.” Give Claude the questions, the answer options, the logic (which answers lead to which result), and your branding basics (colors, fonts, tone of voice).
The more specific your brief, the better the first output. Don’t worry about getting it perfect on the first pass. You can prompt Claude to adjust, refine, and update until it’s exactly right.
A typical build takes three to five prompts total. First pass is the structure. Second pass is branding and copy. Third pass is any tweaks.
Example prompt to get you started:
“Build a 5-question interactive quiz in HTML, CSS, and JavaScript. Each question has 4 answer options labeled A, B, C, D. Based on the combination of answers, users get one of four results. The design should use these colors: [your hex codes]. Font: [your font name or closest web-safe equivalent]. Include a restart button at the end. Here are the questions, answers, and result logic: [paste your content].”
That’s it. Claude handles the rest.
Step 4: Embed
Copy the code Claude generates. Open your Showit site. Add a code block to your canvas. Paste. Adjust the width. Preview. Publish.
From prompt to live on your website: under 20 minutes on your first attempt. Faster every time after that.
What This Means for Your Client Work
Here’s the part most designers miss when they first see this.
Yes — you can use this for your own website. You should. Build one for your business first. Experience what it feels like to have a tool on your site that does real work for you. See how visitors respond. Watch your inquiry quality change.
But then think about what you’re now able to offer clients.
Right now, the standard Showit deliverable is a beautiful website. Pages, sections, copy blocks, good design. That’s the baseline. That’s what every Showit designer offers.
What if your package included a branded, interactive client qualifier? An onboarding experience embedded directly on their site? A positioning audit that does the pre-selling for them?
That’s not a website. That’s a system. And systems command different pricing.
You’re no longer competing with every other Showit designer on aesthetics. You’re in a different category. And right now, almost nobody in the Showit community is doing this.
The Question Designers Ask Most About How To Use Claude AI with Showit
“Do I need to know how to code to do this?”
No. That’s the entire point. Claude writes the code. You brief it in plain English. If something needs adjusting — color, copy, layout, logic — you tell Claude what to change, and it updates the code. You never need to touch the HTML.
“What if the code breaks something on my Showit site?”
Code blocks in Showit are sandboxed. They sit in their own contained space on the canvas. If something goes wrong with the embed, it doesn’t affect the rest of your page. You can delete the block and start over with zero impact on your site.
“Can I do this with any platform, or just Showit?”
The Claude + HTML approach works on any platform that accepts embedded code. But Showit is particularly well-suited to it because of how flexible and visual its canvas is. You can position the embed exactly where you want it, size it to fit, and it looks native — not bolted on.
Real Example: What I Built
The quiz on my designer toolkit page was built exactly this way.
Five questions. Four answer options each. Logic that routes visitors to one of four personalized results — each one telling them which tool to build first in their own business.
I wrote the brief. Claude wrote the HTML. I pasted it into Showit. Made two adjustments (button color and restart copy). Published.
Start to finish: about 20 minutes.
The quiz isn’t just a clever feature on the page. It’s a demonstration. Every designer who takes it is experiencing exactly what the framework teaches them to build. By the time they get to the free guide, they already understand why it works — because they just felt it work.
That’s the point of teaching with tools instead of just talking about them.
How to Start
Download the free framework at christyallicreative.com/designer-toolkit.
It walks you through the full Audit → Ideate → Prompt → Embed process, includes example prompts, and gives you the thinking framework to know which tool to build first — for your own business, and eventually for clients.
Take the quiz on that page first. It was built with exactly the method described in this post. You’ll experience the result before you read about the process — and that order matters.
The Bigger Picture
Showit was already the right platform. The code block has always been its hidden superpower. Most designers just never had a way to use it without hiring a developer.
Claude removes that barrier entirely.
The designers who figure this out first aren’t just working smarter. They’re building a positioning advantage that compounds over time. Better tools. Higher-quality client experiences. Stronger differentiation. Pricing that reflects it.
You don’t need to wait until you’re more technical and you don’t need a developer on call. You just need a brief, a prompt, and a code block.
Showit was already extraordinary. Claude just made it available to everyone.
Download the free Claude + Showit Designer Framework →
Christy Alli is a brand and website designer based in Maryland, serving clients worldwide. She specializes in Undeniable Authority™ — precision strategy, elevated design, and quiet confidence for established female entrepreneurs ready for a presence that reflects the level they already operate at.
View the portfolio · Work with Christy · Contact
FREQUENTLY ASKED QUESTIONS
Can Showit designers use Claude AI without coding experience? Yes. Claude writes the code based on a plain-English brief. You describe what you want to build, Claude generates the HTML, and you paste it into Showit’s code block. No coding knowledge required.
What can you build with Claude AI in Showit? You can build interactive quizzes, client qualification tools, brand audits, onboarding experiences, and positioning exercises — anything that can be built in HTML and JavaScript. These embed directly onto any Showit page using the code block feature.
How long does it take to build an interactive tool with Claude and Showit? Most first-time builds take under 20 minutes from initial prompt to live on your site. The more specific your brief, the faster Claude produces a usable result. Refinements typically take two to three additional prompts.
Does using Claude AI in Showit require any plugins or subscriptions? No plugins are required. You need a Claude account (free tier works for basic builds) and a Showit subscription. Everything else is built inside your existing tools.
Is this approach only for Showit, or does it work on other website platforms? The Claude + HTML method works on any platform that accepts embedded code. Showit is particularly well-suited because of its flexible canvas and visual editor, which makes sizing and positioning the embed simple and precise.
Word count: ~1,850 | Last updated: April 2026
