If you’re ready to experiment with a generative AI web builder, then we’d like to introduce you to Hatchbot AI! Using GPT, Hatchbot AI lets you describe the look and functionality of a web element in plain language. It will then produce the element within your Hatch project. Using Hatchbot, you can create complex web elements without knowing how to code.
Hatchbot is currently in development and the results are a bit unpredictable now (but that’s part of the fun). For better results, here are some tips while using this feature.
- Hatchbot is good at handling specific requests for functionality, not entire pages
- Ask Hatchbot to build you one element at a time
- If you don’t like the element, try the same prompt again for a different result
- Hatchbot builds your element from scratch every time, so be sure to tell it to keep parts you like (especially images)
- When requesting an image, providing a source (like Pixabay or Unsplash) can improve results
Finding Hatchbot
Open up your Editor and enter the Elements tab. Scroll to “hatchbot ai.” You can also launch Hatchbot directly from this link: https://hatch.one/try-hatchbot.
Within the editor, click on Hatchbot and you’ll get a new window in the middle of your screen. Type into the input box with your prompt, keeping your request simple and specific to start. If you’re stumped on an idea, there are prompts to try out below the text box; just double click on them.
After selecting a prompt or inputing your prompt, you can see how the AI generates the code for your new element in the Inspector on the right sidebar. Once Hatchbot is done producing the code, click Preview on the top right corner and see how your element behaves on the live page!
Populate images quickly
If you want to make a slideshow with specific images, we have a great drag-and-drop slideshow element for that! But if you want to quickly populate a slideshow with stock images, Hatchbot is fun to try. Rather than hunting around for images on your theme, you can enter a single prompt and leave the task to the AI, while you work on something else.
For the slideshow below we used this prompt:
Make an automatic slideshow with 8 beach-themed images of the same size. You can pull the images from Pexels.
Remember, the same prompt can produce different results. So if you don’t like what you see, you can delete the element and try again. You can also tell Hatchbot to make changes to the existing element. If you select the element and check the inspector, you’ll find that Hatchbot is quite open to more suggestions:
Don’t be afraid to experiment with the specifics. For example, you can ask Hatchbot to only pick daytime images, or to have them cycle faster or slower.
Create a countdown timer
Timers on personal sites are widely used to hype people up for an event or release. Hatchbot can help quickly set up a timer that fits our needs, so we tried the following prompt:
I want a timer that counts down until next Christmas. The timer should display days, hours, seconds and minutes left.
The video below shows what Hatchbot came up with.
Maybe we want to change the font. We can do that in the Inspector where Hatchbot asks for changes. We used the following prompt to follow up from the previous version.
Give it a more aesthetic font.
The result is above. Notice the request for “aesthetic” added serifs. Using a more specific, less subjective prompt would likely result in something more exciting or unique. The background image also changed. Because we didn’t specify what image to use originally, Hatchbot rebuilt the element with a new, random Christmas-themed image.
If you have something in mind, be sure to ask for specific images or fonts and Hatchbot will be happy to accommodate.
Animated, interactive images
For dynamic movement on our site, we can embed videos directly or use gif files. But Hatchbot can also help us add some interactivity to the experience. For example, let’s try images that become animated once a visitor hovers over them.
Let’s try it out! For this we’ll need a static image and an animated version of the image, like a gif. Then open Hatchbot AI and paste in the following prompt:
I want image1 to turn into image2 when the user hovers over it.
image1: (link to your static image)
image2: (link to your animated image/gif)
Let the bot cook then click preview to check the results. The video below shows what Hatchbot did and it’s pretty effective! Try out some prompts for yourself and see what happens! We can’t wait to see what you create!
