Latest / ThinkInsideTheSquare / [93] Vibe Coding for Squarespace

Transcript

[93] Vibe Coding for Squarespace · ThinkInsideTheSquare

• 0:00
  SPEAKER_00: Vive 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.
• 0:09
  SPEAKER_00: That's not it at all.
• 0:10
  SPEAKER_00: Not even a little bit.
• 0:12
  SPEAKER_00: And that's what we're gonna talk about in this episode of Think Inside the Square.
• 0:22
  SPEAKER_00: I'm Becca from Inside the Square.
• 0:24
  SPEAKER_00: I love to talk about Squarespace and all the cool things we're doing to create and customize websites using that platform.
• 0:31
  SPEAKER_00: 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.
• 0:40
  SPEAKER_00: I'm really passionate about talking about vibe coding, and I've got some ideas top of mind that I want to share with you right now.
• 0:46
  SPEAKER_00: 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.
• 0:57
  SPEAKER_00: Squarespace itself has a really unique structure.
• 1:00
  SPEAKER_00: 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.
• 1:08
  SPEAKER_00: It has a ton of features.
• 1:09
  SPEAKER_00: Squarespace has made so many updates lately.
• 1:12
  SPEAKER_00: We've got all kinds of cool things to play with, not just backgrounds and borders, but like transformations and animations, making things happen on a scroll or on a hover.
• 1:22
  SPEAKER_00: There's so much cool stuff that we can do with Squarespace now.
• 1:25
  SPEAKER_00: But with all that built into the platform, vibe coding is where we create features that don't exist.
• 1:31
  SPEAKER_00: 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.
• 1:42
  SPEAKER_00: I've got to 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.
• 1:53
  SPEAKER_00: It's our job to be creative.
• 1:55
  SPEAKER_00: It's our job to create the design, design the features, the functions, the cool things that we want to see, and then we can direct AI to build it for us.
• 2:04
  SPEAKER_00: Handing the creativity to AI is where the problems happen.
• 2:08
  SPEAKER_00: When AI has to guess, that's when you end up with a sloppy mess of code.
• 2:12
  SPEAKER_00: There are plenty of times I'll see people try to vibe code and they'll send me what they created.
• 2:17
  SPEAKER_00: 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.
• 2:25
  SPEAKER_00: 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.
• 2:34
  SPEAKER_00: I had an example come up oh so recently, as in literally last week.
• 2:38
  SPEAKER_00: On Thursday, I hopped on live on YouTube.
• 2:40
  SPEAKER_00: I had the chat vote on what we were going to vibecode for Squarespace.
• 2:44
  SPEAKER_00: One of the first things we came up with was a countdown timer in an announcement bar.
• 2:48
  SPEAKER_00: And that's what I had at Vibecode.
• 2:50
  SPEAKER_00: But what it gave me wasn't what I really wanted because I wasn't specific enough.
• 2:55
  SPEAKER_00: I told it to vibe code a countdown timer for my announcement bar.
• 2:58
  SPEAKER_00: I wanted it to match my H4 text type on my website.
• 3:01
  SPEAKER_00: I even thought I was being clever because I decided what it was going to say when the timer was up.
• 3:06
  SPEAKER_00: I mean, that's pretty much every step, right?
• 3:08
  SPEAKER_00: Well, I didn't realize that the H4 was going to be the same color as the background, so we had to change that.
• 3:13
  SPEAKER_00: And I didn't realize when I gave it the countdown timer, it was just going to use D, H, M, and S instead of actually saying days, hours, minutes, seconds.
• 3:22
  SPEAKER_00: And I didn't realize so many little nuances about the countdown timer and whatever I didn't specify, AI made up.
• 3:30
  SPEAKER_00: So that's really the secret and the core lesson of vibe coding here.
• 3:33
  SPEAKER_00: If you want to have this as a skill, a true skill to bring your designs to life, you need to be as specific as possible.
• 3:41
  SPEAKER_00: You need to know Squarespace better than anyone.
• 3:43
  SPEAKER_00: 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.
• 3:50
  SPEAKER_00: That is overkill.
• 3:52
  SPEAKER_00: That is the skill that we designers need to work on right now.
• 3:55
  SPEAKER_00: Squarespace can do so much more than it ever could before.
• 3:58
  SPEAKER_00: 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.
• 4:06
  SPEAKER_00: But when it comes to features that Squarespace doesn't have, we now have the power of AI knowledge behind us.
• 4:13
  SPEAKER_00: We can design and develop code faster than ever, but we need to do it strategically.
• 4:19
  SPEAKER_00: We need to be specific about what we create.
• 4:22
  SPEAKER_00: We need to diagnose more and prompt less.
• 4:25
  SPEAKER_00: Specificity is the most important part.
• 4:28
  SPEAKER_00: And being an expert in what you're vibe coding for, that's where the magic happens.
• 4:32
  SPEAKER_00: 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.
• 4:43
  SPEAKER_00: I have a feeling that the second I post this, probably within the first five minutes, I'm going to be getting quite a few comments that I need to delete.
• 4:50
  SPEAKER_00: That's happened with every single AI video that I've ever posted.
• 4:53
  SPEAKER_00: It happens with some of my other tutorials too, but AI really seems to bring out the best trolls on my YouTube channel.
• 5:00
  SPEAKER_00: So here's another video for you, friends.
• 5:02
  SPEAKER_00: I look forward to deleting the angry comments first thing in the morning.
• 5:05
  SPEAKER_00: But I do want to say that I do think it's our responsibility to harness the power of the latest technology that we have.
• 5:12
  SPEAKER_00: We as designers need to use the tools that we have today.
• 5:15
  SPEAKER_00: And AI is one of those tools.
• 5:17
  SPEAKER_00: 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.
• 5:25
  SPEAKER_00: 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.
• 5:35
  SPEAKER_00: AI can handle the messy middle, but it's our job to direct, tell AI what to create.
• 5:40
  SPEAKER_00: And then at the very end, it's our job to clean up the mess and make sure it works well for our clients.
• 5:45
  SPEAKER_00: So I'm no longer writing codes that add a background to a list section item or maybe a border to a text blog.
• 5:51
  SPEAKER_00: I'm animating things on a scroll without having to touch a single line of CSS or JavaScript.
• 5:56
  SPEAKER_00: 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.
• 6:06
  SPEAKER_00: Our imagination really is the limit at this point.
• 6:09
  SPEAKER_00: I'm very excited to see what this skill can help me develop and to help others harness this new power that we all have access to.
• 6:16
  SPEAKER_00: Anyone out there can vibe code.
• 6:18
  SPEAKER_00: Anyone out there can get AI to make something pretty messy.
• 6:22
  SPEAKER_00: But it takes a true artist, a true designer to turn the code that AI generates into something useful for our clients.
• 6:28
  SPEAKER_00: I'm Becca from Inside the Square.
• 6:30
  SPEAKER_00: Thank you so much for listening to this episode.
• 6:32
  SPEAKER_00: Please visit the show notes for links to anything I talked about in this episode.
• 6:36
  SPEAKER_00: And if you want to learn more about vibe coding for Squarespace specifically, head on over to insidehesquare.co forward slash beyond so I can share with you what I've learned.
• 6:44
  SPEAKER_00: Thank you so much for tuning in.
• 6:46
  SPEAKER_00: And most importantly, have fun with your Squarespace website.
• 6:49
  SPEAKER_00: Bye for now.