How to get started with Compose in SquareKicker
Create custom designs by describing your idea
Turning an idea into a custom website feature often means switching between design tools, custom code, and trial and error.
Compose changes that workflow.
Built into the SquareKicker menu, Compose lets you describe what you want to create in plain language. It uses the context of your Squarespace page to generate code, preview the result, and apply it when you're ready.
In this guide, you'll learn how Compose works, how to give it the right context, and how to manage and refine your designs as you build.
Open Compose and start a new design
If you have a SquareKicker subscription, Compose is available from the top level of the SquareKicker menu alongside the Extension. From there, you can start a new design and begin describing what you'd like to build.
Compose can help create a wide range of custom website features, including:
Custom layouts
Visual styling
Animations
Interactions
Page transitions
Calculators
Menus
Games
And other custom design ideas supported by your prompt
Give Compose the right context
One of the first steps in Compose is telling it exactly which parts of your page you want to work with.
Using Select element, you can click directly on your page to choose:
An entire section
Individual images
Text elements
Header elements
Multiple elements at once by holding Shift
Each selection is added as a context chip, giving Compose a clear understanding of what your prompt refers to. If you no longer need an item, you can remove it from the context list at any time.
You can also browse page layers if you prefer selecting elements from the layer structure instead of clicking directly on the page.
Describe the design you want
Once your context is selected, describe the outcome you're trying to create.
In the tutorial, the example prompt creates a horizontal image accordion using existing Squarespace list items. The prompt specifies the layout, hover behavior, animation, spacing, and how the interaction should behave.
As Compose processes the request, it analyzes your selected content along with your site's existing design context, including styles, colors, fonts, and page structure, before generating the code for the design.
Preview before applying changes
After Compose generates the design, it's added as a preview rather than immediately becoming part of your live website.
This gives you the chance to:
Interact with the design
Test animations
Review the layout
Enable or disable the preview
Only when you click Apply is the generated code added to your site. Until then, generated code is saved on the SquareKicker server, not stored in your code injection area.
Edit generated code if you want more control
Compose is designed so you don't need to edit code, but the option is available if you want it.
The built-in code editor displays the generated code in a readable format, making it easier to inspect and modify than the compressed code in the Squarespace code injection area.
For example, the tutorial adjusts a variable controlling the accordion height, saves the change, and automatically creates a new version of the design.
Every saved edit becomes a new version, making it easy to experiment without losing previous work.
Create and manage design versions
Every new prompt builds from the version you're currently seeing on the page - that could be a design you're previewing or the applied design.
This makes it easy to explore different design directions while keeping earlier ideas available.
You can:
Create multiple versions of the same design
Rename versions with meaningful names
Switch between versions instantly
Restore an earlier version to continue developing from that point
Rather than replacing previous work, Compose treats versions as saved checkpoints that you can return to whenever you need.
Keep your designs organized
Compose includes tools for managing designs once you have multiple projects.
You can:
See which designs are currently applied
Enable or disable designs (which applies them or removes them from your site)
Rename designs
Archive designs you no longer need
Restore archived designs later
Applied designs are clearly identified within the Compose home view with the lime dot, making it easier to manage larger projects.
Use images as part of your prompt
Compose supports two different ways of adding images, depending on what you're trying to achieve.
Add images from your Asset library
Images selected from your Squarespace Asset library become part of the final design generated by Compose.
Add visual references
Reference images work differently.
They don't appear in the finished design. Instead, they provide visual guidance that helps Compose understand the style or direction you're aiming for. At the time of the tutorial, image files are the only supported reference type.
Build more advanced experiences
The tutorial also demonstrates creating a custom page introduction using multiple images from the asset library.
The prompt describes:
A full-page loading sequence
A rotating cube animation
Images displayed on each face of the cube
Animated typography
A smooth transition into the homepage
Displaying the animation once per visitor session
This example highlights how detailed prompts can be used to guide more complex interactive experiences.
Use Compose across your entire website
Compose isn't limited to selected elements.
You can also describe broader parts of your website, such as:
All buttons
Header text
Mobile menus
Hero sections
Specific sections on the page
When appropriate, Compose can identify these areas from your prompt without requiring you to manually select them first.
Start from existing code
Compose also supports starting a design from code rather than a written prompt.
You can paste existing code into a new Compose design, save it, and continue iterating from there.
The tutorial also demonstrates copying code from one Compose design into another, making it easier to reuse and continue developing previous work across different projects.
Build while Compose works
Each prompt runs on Compose's servers.
That means you don't have to wait for one design to finish before continuing with your work.
While a prompt is processing, you can:
Start another design
Continue editing your website
Leave Compose and return later
Your completed design will be ready when processing finishes.
Bringing your ideas to life
Compose is designed to help you move from an idea to a working design without constantly switching between planning, coding, and testing.
By selecting the right context, writing clear prompts, previewing each result, and using version history to refine your work, you can explore custom layouts, interactions, and animations while keeping your workflow inside Squarespace.
Whether you're creating subtle interface improvements or more ambitious interactive experiences, Compose gives you a structured way to experiment, iterate, and build with confidence.
