[93] Vibe Coding 101
-
This transcript was generated by Descript AI and may contain errors.
[00:00:00] Speaker: Vibe coding is a hot topic these days, and a lot of people think it means just handing AI the keys to your website kingdom while you sit back and sip some coffee. That's not it at all, not even a little bit, and that's what we're gonna talk about in this episode of Think Inside the Square
[00:00:15]
[00:00:22] Speaker: I'm Becca from Inside the Square.
[00:00:24] I love to talk about Squarespace and all the cool things we're doing to create and customize websites using that platform. But in this episode, we're gonna talk about vibe coding, a skill that is essential for anyone who's designing in Squarespace in 2026 and beyond. I'm really passionate about talking about vibe coding, and I've got some ideas top of mind that I wanna share with you right now.
[00:00:45] I definitely agree the environmental impact is something to talk about, but I'm not gonna get into that in this episode.
[00:00:51] When I talk about vibe coding, what I mean is I am creating a design, and I'm directing AI so it can help me apply that design to a Squarespace website.
[00:01:02] Squarespace itself has a really unique structure. It's a responsive website builder that's going to resize and restructure the layout of content based on the screen size and the device that's being used. It has a ton of features. Squarespace has made so many updates lately. We've got all kinds of cool things to play with.
[00:01:20] Not just backgrounds and borders, but like transformations and animations, making things happen on a scroll or on a hover, . There's so much cool stuff that we can do with Squarespace now. But with all that built into the platform, vibe coding is where we create features that don't exist.
[00:01:36] Knowing that Squarespace has all those settings, we can now focus on really getting creative and having AI assist us in turning our vision into something that's real
[00:01:46] i've gotta be honest with you, though. I think that AI slop is a problem because the people that are using AI to generate that slop are not spending enough time learning how to direct the programs. It's our job to be creative. It's our job to create the design, design the features, the functions, the cool things that we wanna see, and then we can direct AI to build it for us.
[00:02:09] Handing the creativity to AI is where the problems happen. When AI has to guess, that's when you end up with a sloppy mess of code. There are plenty of times I'll see people try to vibe code, and they'll send me what they created, and the truth is, they have a really good idea, but they have no idea how to structure that in parameters that work within Squarespace.
[00:02:30] We're talking about site structure. We're talking about the three code languages that Squarespace uses. We're talking about the breakpoints built into the platform. I had an example come up oh so recently, as in literally last week
[00:02:43] On Thursday, I hopped on live on YouTube. I had the chat vote on what we were gonna vibe code for Squarespace. One of the first things we came up with was a countdown timer in an announcement bar, and that's what I had to vibe code.
[00:02:54] But what it gave me wasn't what I really wanted because I wasn't specific enough. I told it to vibe code a countdown timer for my announcement bar. I wanted it to match my H4 text type on my website, I even thought I was being clever because I decided what it was going to say when the timer was up.
[00:03:11] I mean, that's pretty much every step, right? well, I didn't realize that the H4 was gonna be the same color as the background, so we had to change that. And I didn't realize when I gave it the countdown timer, it was just gonna use D, H, M, and S instead of actually saying days, hours, minutes, seconds.
[00:03:27] I didn't realize so many little nuances about the countdown timer, and whatever I didn't specify, AI made up. So that's really the secret and the core lesson of vibe coding here. If you wanna have this as a skill, a true skill to bring your designs to life, you need to be as specific as possible.
[00:03:45] You need to know Squarespace better than anyone. You need to be able to look at that code and say, "Hey, AI, what I asked you for was a style change, and you just gave me JavaScript." That is overkill. That is the skill that we designers need to work on right now. Squarespace can do so much more than it ever could before.
[00:04:03] We've got borders. We've got backgrounds. We've got transformations, scroll effects, hover effects, skew, shifting things on the X and the Y axis, but when it comes to features that Squarespace doesn't have, we now have the power of AI knowledge behind us. We can design and develop code faster than ever But we need to do it strategically.
[00:04:24] We need to be specific about what we create.
[00:04:27] We need to diagnose more and prompt less. Specificity is the most important part, and being an expert in what you're vibe coding for, that's where the magic happens. That's why I'm so glad that I focus on one specific platform, Squarespace. The skill of truly knowing Squarespace and truly understanding how that code will work within my website
[00:04:48] I have a feeling that the second I post this, eh, probably within the first five minutes, I'm gonna be getting quite a few comments that I need to delete. That's happened with every single AI video that I've ever posted.
[00:04:58] It happens with some of my other tutorials too, But AI really seems to bring out the best trolls on my YouTube channel. So, uh, here's another video for you friends. I look forward to deleting the angry comments first thing in the morning.
[00:05:10] But I do wanna say that I do think it's our responsibility to harness the power of the latest technology that we have. We as designers need to use the tools that we have today, and AI is one of those tools, and that's something I'm very proudly going to be coding with to create anything and everything that my clients need me to create, specifically for a Squarespace website My friend Will Myers, another Squarespace coder out there, shared this really cool image the other day on one of his blog posts where he talked about our job is the beginning and the ending. AI can handle the messy middle, but it's our job to direct, tell AI what to create,
[00:05:45] and then at the very end, it's our job to clean up the mess and make sure it works well for our clients. So I'm no longer writing codes that add a background to a list section item or maybe a border to a text block. I'm animating things on a scroll without having to touch a single line of CSS or JavaScript.
[00:06:01] . But when it comes to countdown timers or blog sidebars or creative light boxes , there are so many amazing things that we can create with the power of AI. Our imagination really is the limit at this point. I'm very excited to see what this skill can help me develop
[00:06:17] And to help others harness this new power that we all have access to. Anyone out there can vibe code. Anyone out there can get AI to make something pretty messy. But it takes a true artist, a true designer, to turn the code that AI generates into something useful for our clients. I'm Becca from Inside the Square.
[00:06:35] Thank you so much for listening to this episode. Please visit the show notes for links to anything I talked about in this episode. And if you wanna learn more about vibe coding for Squarespace specifically, head on over to insidethesquare.co/beyond so I can share with you what I've learned.
[00:06:49] Thank you so much for tuning in, and most importantly, have fun with your Squarespace website. Bye for now
A lot of people hear "vibe coding" and picture handing AI the keys while you walk away. That's not what it is, and in this episode I break down what vibe coding actually means for Squarespace designers in 2026.
Vibe coding is creating a design, then directing AI to help apply that design to a Squarespace website. Squarespace's built in settings already cover backgrounds, borders, transformations, scroll effects, and hover effects. Vibe coding is for the features Squarespace doesn't have built in.
The AI slop problem isn't AI's fault. It happens when people hand over the creative decisions instead of making them first. When AI has to guess what you want, you get a mess. Design is still the designer's job. AI is the tool that builds what you've already decided.
The lesson: specificity is the whole skill. You need to know Squarespace's structure, its breakpoints, and its three code languages well enough to look at generated code and call out when it's overkill for what you actually asked for. Diagnose more, prompt less.
Want to go deeper on vibe coding for Squarespace? Head to insidethesquare.co/beyond
