How to Use ChatGPT to Improve Your Squarespace Website Design (2024)
Check out the YouTube version
View our full YouTube tutorial on improving your Squarespace website using the ChatGPT AI tool. In this guide I offer a more visual look, and include some great example on how you can enhance your Squarespace website using this innovative tool.
Contents
Why Most Designers Misuse ChatGPT
The Right Way to Prompt
Example: Gradient Text Effect
Example: Adding Scale Animation
Example: Styling a Button
Final Thoughts
Why Most Designers Misuse ChatGPT
We are currently in the time where ChatGPT is massively underused, especially within the Squarespace & wider design space. Many business owners feel as if AI can be very robotic, and far less quality than if they take on the work themselves.
It’s very true, ChatGPT can get annoying if not used properly, but let me tell you now, if you learn to prompt the bot correctly, it can be an absolute Godsend to us Squarespace designers and business owners.
How To Prompt Correctly
Here is an example of the perfect ChatGPT prompt.
“You are an world class Squarespace designer. I would like to add a gradient effect to a heading that says: Welcome to Example Media. Ensure it is H2, style it with a gradient from green to blue. Provide the custom CSS I will need, as well as steps to implement it.”
Ensure you always do the following when prompting ChatGPT as a Squarespace designer:
Place it in a role (Squarespace designer) - “You are a Squarespace designer”.
Give it as many details as possible, bullet points if you have to.
Tell it exactly what you need (CSS, HTML, steps to implement, etc).
Be prepared for issues, so test and reprompt.
I will give you some examples from the YouTube video of me implementing some cool element effects on the Squarespace website using ChatGPT.
Example: Gradient Text Effect
First of all, let’s use the gradient effect, and its steps that ChatGPT used on my Squarespace website.
Add a Code Block
C&P the HTML
Save the block
Then:
Go to Design → Custom CSS
Paste the CSS ChatGPT provides
Make sure class names match exactly
And boom — your heading will have a custom gradient effect.
Example: Adding Scale Animation To The Text
You can use any of the built in animations that comes with CSS and Squarespace.
“Can you add a scale animation to this text?”
ChatGPT will rewrite your code to include your selected animation. Ensure to watch the YouTube version of this tutorial for a visual look (I understand it can be difficult to visualise through the article version).
Example: Styling a Button
You can even prompt ChatGPT to style things like buttons
“Can you create a button with a gradient background and scaling animation on hover?”
You will receive HTML, CSS, and even implementation steps to achieve this.
In fact, on Wednesday I shared a tutorial on styling a button with a gradient effect, check it out here.
Final Thoughts
ChatGPT will never get you to perfect with your Squarespace website and business tasks (that’s where you come in), but it is an extremely effective time saving device. Over time you will get better at understanding the tool and prompting it to be as effective as possible.
Your Designer
My name is Jacob, your expert Squarespace designer. I have helped hundreds of businesses across multiple industries. If you have any questions after reading this article, be sure to contact me through WhatsApp.
If you would like to discuss a potential design project, you can email me at jacobchivers@chiverscrafted.co.uk or contact me here.
Thanks for reading!
