Vibe coding is a new way to build digital experiences without writing code. You describe what you want in natural language, and the system generates and implements the code for you. It empowers marketers and non-technical teams to design and update experiences on their own.
Vibe coding has been gaining traction recently, and we’ve begun integrating it into key areas of the ai12z platform. This is just the start, with more enhancements rolling out soon.
How we’re using vibe coding at ai12z
We recently introduced a WYSIWYG environment where users can vibe code their digital assistant’s welcome panel and subsequent panels.
What do we mean by a “panel”?
When you create a new digital assistant (call it a chatbot or agent if you prefer), ai12z automatically generates a branded look and feel for the assistant. Most chatbots we’re used to interacting with are fairly blank ... maybe a few buttons, but largely just an open text field asking the visitor to type something.
The challenge is that visitors don’t always know what to ask.
Let’s use an example.
I recently visited The Phillips Collection in Washington, DC. As a demo, I created a digital assistant for their website (this is not live on their site). Within minutes, the system generated a welcome panel.
Now imagine they want to promote their Annual Gala instead of the existing Donate button. Rather than writing code or submitting a request to a development team, I typed into the editor: “Change the Donate button to Annual Gala.”
Within minutes, it updated:
You can even see the “Feedback” section, where it explains what it did. We’ll click into “Annual Gala” by changing the Panel, and see it created this:
Our vibe coding environment for the UX of the digital assistant includes:
- An instruction area: Describe what you want to create or modify. That could be changing a button, adding a banner image, inserting a carousel of blog posts, or redesigning a panel layout.
- An upload area for images: Sometimes it's helpful to show what you mean. Users can upload brand assets or inspiration images to guide the system, such as referencing button styles or layout preferences.
- A preview screen: After you submit instructions, you can see a preview of the results. This will show changes in real-time, allowing for quick tweaks and more tests.
Here's a video if you want to see it in action:
Most users have an idea of what they want their digital assistant to feel like or what they want for the layout. The hard part is usually turning those abstract ideas and feelings (“vibes” if you will) into code. Removing the need for hand-offs and lengthy project timelines can help turn those concepts into reality faster.
You can try vibe coding in your ai12z account today. If you’d like a live demo of this new release, you can also get in touch with a member of our team.