[97] Can Squarespace Do That? How to Analyze What's Possible in an AI Design
-
This transcript was generated by Descript AI and may contain errors.
[00:00:00] Speaker 3: I want you to imagine that it's a Tuesday afternoon and you've just opened your inbox. And right there at the top is a message from someone who needs a Squarespace website, someone you're excited to work with. You open the email, and it has one sentence and one link. It says, "Can you just build this in Squarespace for me?"
[00:00:18] So you click the link, and what opens is something that was very obviously generated with AI. Now, saying it was generated with AI doesn't necessarily mean that it's slop. It could actually be a pretty good design. Maybe you've got a big hero section with a background image, some overlapping shapes, typography sitting somewhere you wouldn't normally think to put it, but it doesn't look bad.
[00:00:40] The color contrast might not be perfect, but overall, it looks pretty finished. It's not a napkin sketch. It's not from a Pinterest pin from 2013. It looks like a real website, and your client or your potential client made it themselves in a couple of minutes using Claude, using ChatGPT, whatever AI tool they've been playing with.
[00:01:02] But there's a word in that email that's doing an enormous amount of work, "just." "Can you just build this in Squarespace?" Because what they sent you is an idea, not a plan. And now your job isn't necessarily to create the idea anymore. Your job is to figure out what's possible in Squarespace and what's not, and that can take a lot more time than your potential client realizes.
[00:01:28] So in this episode of Think Inside the Square, we're talking about what actually happens when an AI-generated website design lands in your lap. We're talking about how to translate that design into a Squarespace environment and how to figure out what it's really going to take before you say yes to anything.
[00:01:47] Welcome to Think Inside the Square. I'm your host, Becca Harpain, Squarespace expert and educator and creator of insidethesquare.co. I created this podcast to share my favorite tips and tricks that can help you build a Squarespace website that you're proud of. Now, this episode is definitely geared toward those of you who consider yourselves professional designers or aspiring designers.
[00:02:08] But if you've ever built your own Squarespace website, stay with me because there are plenty of gems in this episode for you, too. We're going to talk about what happens when you have an AI-generated design, and you need to translate it into Squarespace. I'm gonna be talking about turning that idea into an actionable plan, figuring out where your time's going to go.
[00:02:29] And for the professional designers listening, I want you to start thinking about how to price something like this. For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast. I also want to mention the term Squarespace is a trademark of Squarespace, Inc.
[00:02:47] This content is not affiliated with Squarespace, Inc. I'm a website designer. Squarespace is my preferred platform, and that's why I talk about it all the time.
[00:02:59] All right. I wanna start by talking about what these AI tools are actually doing because I think this is where the whole situation starts to make a little more sense. When you ask any AI tool to design a homepage, it's trying to give you something that looks right. It's arranging text, images, shapes, color, spacing, all of those visual elements into something that looks like a finished website.
[00:03:20] These tools are starting to get pretty good at that. But unless you specifically tell it that it's to design something around the constraints of Squarespace, it doesn't necessarily think about how that design will actually be built. It's not thinking about Fluid Engine. It's probably not thinking about page sections at all.
[00:03:39] It's not thinking about the different types of content blocks that Squarespace has, or the fact that the mobile layout isn't just a smaller version of desktop. It can be its own arrangement with its own rules. All it's trying to do is make something that looks good, so it puts text where it thinks text looks good.
[00:03:56] It overlaps two elements because that overlap looks interesting. It creates space that works beautifully in the image it generated, even if that space doesn't necessarily exist inside the platform you're going to use. Because when AI has to guess, you end up with a mess. Apparently, that's my new favorite tagline 'cause I've said that a lot in these past few weeks.
[00:04:17] When AI has to guess, you end up with a mess. Now, here's the part I really want you to sit with. A lot of what AI sends your way can probably be created inside Squarespace, especially once you start customizing with code. But just because you can recreate that design in the Squarespace platform doesn't mean you should recreate every single detail exactly the way AI designed it.
[00:04:43] Squarespace has a structure. Some of that structure exists because of accessibility. Some of it exists because of responsive design. Some of it exists because there are general design principles and technical considerations underneath that website that your AI-generated mockup just simply isn't thinking about.
[00:05:03] So translating an AI design into Squarespace can sometimes feel limiting, but I promise you, those limits, they're actually good. And this is where our judgment as the designers becomes really important Your client might look at what AI created and think, "That looks great." And you know what? It might. But our job is to look at it and ask, "Will it work great?"
[00:05:26] That is a very different question. So when I get an AI-generated design and need to figure out how to make it real in Squarespace, I put every element of it into one of three categories. It's either built in, built customized, or built somewhere else. I do this before I reply to the email, before I give out any quote or even start thinking about quoting it, and definitely before I open up Squarespace and start clicking around a blank template.
[00:05:52] So let's go through these three categories together. The first one is built in. This is everything Squarespace already does. Maybe it's a hero section with a background image and text on top. Maybe it's an image block, a text block, and a button, a gallery, an accordion, a basic form. Maybe it's a fluid engine section that looks a little unusual 'cause one image is offset or the typography's bigger than you'd normally make it.
[00:06:17] Built in is almost always the biggest category. So look at this AI-generated mock-up with content blocks in line. Can you see an image block, a text block, a gallery, an accordion with a border around it, a button that could be primary, and a button style that could be secondary? Look at the design, break it apart into pieces, and ask yourself, "What already exists inside Squarespace that gets me most of the way there?" Now, the second category is for built custom. These are the things that are possible inside Squarespace, but they're going to take some extra work. You can look at the design and understand how it fits into the Squarespace structure, but there's something extra that needs to be added.
[00:06:58] Maybe it's a unique hover effect, like my favorite, changing the color of a button on a hover. Squarespace can do some hover effects now, but that still isn't one of them. We still need to code that. So that's something that I would put in the built custom category. Maybe there's a layout Squarespace can't quite produce on its own, something similar to a carousel list section, but the arrows are in a different spot.
[00:07:22] Maybe you need the text to behave in an unusual way. Maybe there's a custom background treatment or a border effect, something that requires just a little custom CSS. It's possible, but it's gonna take a little time and a little skill to make it work. For the professional designers listening, this is when we need to start thinking about pricing for our skills, not just the time it takes you to build something.
[00:07:44] This category can be exciting for those of us comfortable with customizing Squarespace, but this is also where we need to use a little discretion. Just because you can customize something to perfectly match the AI-generated design, that doesn't necessarily mean that the customization is worth doing.
[00:08:02] Does rotating that image three degrees to the left meaningfully improve the design? Does that particular corner treatment on a text block really matter? Does that tiny difference in spacing actually contribute to the overall experience? Does that unusual typography animation still look good on mobile?
[00:08:20] And if it doesn't, is it important enough that you need to spend an hour figuring out a completely separate mobile solution? Sometimes the answer is yes. Sometimes those details are what make a design feel special. But sometimes AI creates something unusual because it has no reason not to. And now you're about to spend two hours reproducing a decorative detail that nobody, including the client, actually cares about.
[00:08:46] Pick apart the design and figure out what's truly important and what you can create. Then let's get into that third category, built somewhere else. This is the one I really want you to pay attention to because this category can derail a project very quickly if you don't catch it early. Built somewhere else does not mean, "Oh, I just need to learn a little more CSS."
[00:09:07] It's not a customization problem. It's functionality that needs an entirely separate system in order to exist. Here's a recent example for you. A client sent me a mock-up that included a booking calendar. They wanted someone to visit the site, pick a date, pick a time, receive a confirmation. Now, visually, that looks like a slightly fancy form on a website.
[00:09:28] It's a calendar, maybe a couple of buttons, maybe a drop-down. AI can draw that in seconds. But this isn't really a design element. It's an appointment system, something that has to know your availability, something that has to hold a time slot so two people don't book the same appointment, something that has to send confirmations, maybe reminder emails, cancellations, rescheduling.
[00:09:50] All of that is functionality. And yes, you can absolutely have that experience on a Squarespace website, but you're going to need a system capable of handling that functionality. And depending upon what you use, that can mean an additional tool and an additional ongoing subscription. Then I had to make sure that it worked accurately before integrating it into Squarespace, and I had to make sure it matched the website.
[00:10:14] All of that took time. And when I responded to the client, I needed to be very clear about what they were paying for. To the person looking at that AI-generated mock-up, those things can feel exactly like the hero section above it, pieces of content on a page, but they're not. Same finished look, wildly different invoice.
[00:10:33] And that's what we need to recognize before we start saying yes. So let's recap. When somebody hands you an AI-generated design, or when you create one yourself and you're trying to figure out how to make it work inside Squarespace, pull back and look at those three categories. Is this built-in? Is this built custom?
[00:10:53] Or is this built somewhere else? And if you're a professional Squarespace designer, keep those categories in mind when you're pricing. And if you're not a professional Squarespace designer, keep those categories in mind when you're thinking about how much time you're willing to invest into this project.
[00:11:09] Because I never want your immediate response to be, "Squarespace can't do that." Even if the sentence is technically accurate, that is not a helpful answer. Your potential client might hear, "She doesn't know how to do this," or, "She just doesn't want to." Instead, explain what it would actually take. Reflect those three categories back to your client.
[00:11:30] You can say, "Here's what's already a part of Squarespace that's straightforward and easy to recreate. Here's what will need custom development or additional customization, and here's the functionality that needs a separate tool, an integration, a custom-built solution." Explain what those mean for the project.
[00:11:47] Maybe it changes the timeline, maybe it changes the budget. Maybe there's an ongoing subscription that your client needs to think about. Or maybe one small decorative detail simply isn't important enough to justify the extra development time. That conversation is where your experience becomes valuable.
[00:12:05] Your potential client, they're going to pay you to look at that picture and understand what it actually takes to turn it into a working website. People are paying for your judgment, for your experience. Your skills are in recognizing the difference between something that looks simple and something that is simple.
[00:12:23] And being upfront with your potential client about what's easy, what's possible, what's going to get expensive, all of that helps you set clear expectations before the project begins. Now, I'm not here to say that every AI-generated design is impossible, and I'm definitely not here to say that every AI-generated design is possible inside Squarespace.
[00:12:45] What I'm saying is that it's our job as those using Squarespace to have judgment here, to look at what AI dreamed up and figure out exactly what can be easily recreated, what needs a little bit of customization, and where that beautiful mock-up might be hiding an entirely different piece of technology underneath it.
[00:13:05] I want to leave you with this because I'm definitely not down on AI-generated design. I use AI tools almost every day. And I don't think any potential client is wrong for sending you an AI-generated idea. In fact, I think there's something really exciting about the fact that someone who can't design or code can finally take an idea they have in their head and make it a visual to send to you.
[00:13:27] That can be an incredible starting point for a project. But a starting point is what it is. We need to make sure they understand they have the idea, we create the plan. I think that distinction matters more than ever. In this world of AI-generated content, one of the most important skills that we as designers have isn't our ability to recreate every pixel someone puts in front of us.
[00:13:50] It's our judgment. Knowing what needs to exist, what doesn't need to exist, what's easy, what's possible, and when AI is dreaming up some pretty big ideas and giving us some big shoes to fill. Our job is changing a little bit, but it hasn't disappeared. And for those of you that are Squarespace users building your own website, I want you to be inspired by what AI can create for you.
[00:14:13] Play with those ideas, but when you're ready to actually build that design, use your own judgment. Look at what already exists inside Squarespace, decide where customization is really worth your time, and recognize when the thing that AI created isn't actually a design element at all. It's an entire system hiding inside a pretty little rectangle.
[00:14:32] I'm Becca from Inside the Square, and I hope you enjoyed my very opinionated episode. If you did, give it a like, leave me a comment, and forward this episode along to any designer that you know who's already received one or five of these emails asking them to recreate something that AI made. Thank you so much for tuning in, and most importantly, have fun with your Squarespace website.
[00:14:55] Bye for now
It's a Tuesday afternoon, and there's an email at the top of your inbox from someone you'd genuinely like to work with. One sentence, one link: Can you just build this in Squarespace for me?
You click. What opens was very obviously generated with AI, but that doesn't automatically mean slop. It might be a pretty good design. A big hero section with a background image, some overlapping shapes, typography sitting somewhere you wouldn't have thought to put it. The color contrast isn't perfect, but it looks finished. It's not a napkin sketch or a Pinterest pin from 2013. It looks like a real website, and your client made it in a couple of minutes.
There's one word in that email doing an enormous amount of work, and it's just. Because what they sent you is an idea, not a plan. Your job isn't to create the idea anymore. Your job is to figure out what's possible in Squarespace and what isn't, and that takes far more time than your client realizes.
Here's what's actually happening inside those AI tools. When you ask one to design a homepage, it's trying to give you something that looks right. It arranges text, images, shapes, color, and spacing into something that reads as a finished website, and it's gotten good at that. But unless you specifically tell it to design within the constraints of Squarespace, it isn't thinking about how the design gets built. It's not thinking about Fluid Engine. It's probably not thinking about page sections at all, or content blocks, or the fact that your mobile layout isn't a smaller version of desktop; it's its own arrangement with its own rules. So it puts text where text looks good. It overlaps two elements because the overlap looks interesting. It creates space that works beautifully in the image it generated, even if that space doesn't exist inside the platform you're about to use.
When AI has to guess, you end up with a mess.
Now here's the part I want you to sit with. Most of what AI sends your way probably can be created in Squarespace, especially once you start customizing with code. But being able to recreate a design doesn't mean you should recreate every detail exactly as AI drew it. Squarespace has a structure. Some of it exists for accessibility, some for responsive design, and some because there are design principles and technical considerations underneath a website that an AI mockup simply isn't accounting for. Those limits are good. Your client looks at what AI made and thinks that looks great, and they might be right. Your job is to ask whether it will work great. Very different question.
So before I reply to the email, before I quote anything, and definitely before I open Squarespace and start clicking around a blank template, I sort every element of that design into one of three buckets.
Built in is everything Squarespace already does. A hero section with a background image and text on top. An image block, a text block, a button, a gallery, an accordion, a basic form. A Fluid Engine section that looks unusual because one image is offset or the typography is bigger than you'd normally go. This is almost always your biggest category. Look at the mockup with content blocks in mind and ask what already exists that gets you most of the way there.
Built custom is possible, but it takes extra work. A hover effect Squarespace still doesn't handle natively, like changing a button's color on hover. A layout that's almost a carousel list section, except the arrows sit somewhere else. A custom background treatment, a border effect, text behaving in an unusual way. This is the fun category if you're comfortable with CSS, and it's also where you need discretion. Does rotating that image three degrees meaningfully improve the design? Does that corner treatment matter? Does that typography animation still look good on mobile, and if not, is it worth an hour building a separate mobile solution? Sometimes yes, those details are what make a design feel special. But sometimes AI made something unusual because it had no reason not to, and you're about to spend two hours reproducing a decorative detail nobody cares about, including the client.
Built somewhere else is the one that derails projects. This isn't I need to learn more CSS. It's functionality that requires an entirely separate system. A client sent me a mockup with a booking calendar: visit the site, pick a date, pick a time, get a confirmation. Visually that's a fancy form, and AI can draw it in seconds. But it's an appointment system. It has to know your availability, hold a time slot so two people don't book the same one, send confirmations, handle reminders and cancellations and reschedules. You can absolutely have that on a Squarespace site, but it means another tool, likely another ongoing subscription, testing to make sure it works, and styling to make sure it matches. To the person looking at the mockup, that calendar feels exactly like the hero section above it. Same finished look, wildly different invoice.
Never let your first response be "Squarespace can't do that." Even when it's technically accurate, it isn't helpful, and what your client hears is she doesn't know how or she doesn't want to. Reflect the three categories back to them instead. Here's what's already built into Squarespace and is straightforward. Here's what needs custom development. Here's the functionality that needs a separate tool or integration. Then explain what each one means for the timeline, the budget, and any subscription they'll be carrying, or why one small decorative detail isn't worth the development time. That conversation is where your experience becomes visible.
Because that's what they're paying for. Not pixel-matching. They're paying you to look at a picture and understand what it actually takes to turn it into a working website: to recognize the difference between something that looks simple and something that is simple.
I'm not down on AI-generated design. I use these tools nearly every day, and I don't think a single client is wrong for sending one. There's something genuinely exciting about someone who can't design or code finally getting the idea out of their head and onto a screen. That's a great starting point. It's just a starting point.
They have the idea. You create the plan.
