Get Started with Studio

Written By Luke Wakefield

Last updated 6 days ago

Step 1: Site Setup

There are 2 ways to get started with Studio (although we recommend watching the videos below first):

  1. StudioKit Site Template (recommended): Copy a Site Template from the Marketplace

  2. Install the Studio Module to an existing site (advanced): Install Studio Module

Step 2: Design Implementation

Once you have a Site setup there are a few different ways to build out a website starting with the design:

  • Customise our StudioKit design (no-code)

  • Import a Design from Figma, other design tools or even just screenshots/images (CLI)

  • Import an existing HTML/CSS website design (CLI)

Customise our StudioKit design (no-code)

Simply edit the Theme in the StudioKit Library: Studio Libraries

Create/edit Sections: Studio AI Section Builder

Then create and edit pages: Studio Page Editor

Import Design from Figma

This is for Developers and requires Siteglide CLI: Quickstart: CLI

Give your chosen AI tool the Figma design and it can import into Siteglide setting it up as a Studio Library or Theme will full Studio setup for Sections and Pages:

AI design results may vary but the Skills help ensure the Siteglide/Studio setup is correct: Studio AI Skills with Siteglide CLI

Import an existing HTML/CSS website design

This is for Developers and requires Siteglide CLI: Quickstart: CLI

This walkthrough shows how easily you can import an existing web page design using your preferred AI tools (we use and recommend Cursor):

AI design results may vary but the Skills help ensure the Siteglide/Studio setup is correct: Studio AI Skills with Siteglide CLI

Step 3: Customise the Library, Theme, Templates, Section and Pages

This step is essentially where you build out the website but it should be far quicker than the traditional way of building from scratch. You simply customise the different areas:

  1. Library: Control settings, globals and categorisation

  2. Theme: Control design (fonts, colours etc), CSS and any extra code required

  3. Template: Edit the Header, Footer, Sidebars and other global elements of the site

  4. Section: Create and edit modular sections used across the site

  5. Page: Create and edit the actual pages that use a combination of the other elements

This video follows on from the Import an existing HTML/CSS website design video above and shows how to quickly fix/vibe code any issues from the import as well as getting AI to help update the Theme and styling across the site: