AI generation, visual editing, one design system

Build the web your way.

Create a website with AI, edit it visually like a professional design tool, apply one design system across every page, and publish it. From one studio.

Start building See how it works

Untitled project

Start anywhere

Most builders start you at a blank canvas. Studio starts you wherever you already are.

Some of these are here today. The rest are on the way, and we say which is which.

A sentence

A blank canvas

A templateIn development

A Figma filePlanned

Existing HTML

A repositoryPlanned

The difference

Not another website builder.

A generator gives you something you cannot edit. A drag-and-drop builder gives you an empty page and a long afternoon. A developer tool gives you a repository and no design.

Studio is the layer where all three meet — so the thing AI made is the same thing you edit, and the thing you edit is the same thing you publish.

A traditional builder

Start from a blank canvas.

Skode Studio

Start from anywhere — and keep going.

—Designers get a real design system

—Developers get real components

—Everyone gets the same project

AI Builder

Describe it. See it. Shape it.

Write what you want in a sentence. Studio composes the page from a library of sections that were tested before they reached your canvas — so what you get back is a real page you can edit, not a wall of generated code that breaks the first time you touch it.

Then keep talking to it. Ask for a darker hero, a fourth pricing tier, a mobile drawer. Studio edits the page in place instead of rebuilding it, so nothing you already liked gets thrown away.

AI page generationAI editingSection library

How the AI builder works

Make the hero darker and add a mobile drawer.

What changed

— Hero background set to near-black
— Navigation swapped to the drawer variant

Studio reports only what it actually changed. If an edit did not land, it says so rather than describing work it did not do.

Visual builder

AI when you want it. Control when you need it.

Every section AI produces is a section you can select, restyle, reorder or delete by hand. There is no moment where the project stops being yours.

Visual editor

Select any section to edit its text, images, layout and spacing directly.

Multi-page sites

Add, rename and link pages inside a single project.

Version history

Every save is kept, so you can go back to any earlier state.

Import

Bring what you already built.

Upload an HTML page or a project archive and Studio rebuilds it as editable sections. Figma and GitHub are still planned.

HTML import

Upload or paste an HTML page and Studio rebuilds it from editable sections.

Project archive import

Beta

Upload a .zip of a React, Vue or AI Studio project. If it contains a built page, Studio rebuilds that; otherwise it recovers what copy it can from the source, which needs more tidying afterwards.

Google AI Studio import

Beta

Export the project as a .zip and import it. Content comes across; the original layout does not.

Vue import

Beta

Import a Vue project as a .zip. Its content is rebuilt from Studio sections rather than kept as Vue components.

Figma import

Planned

Turn a Figma frame into editable Studio sections.

GitHub import

Planned

Connect a repository and import its front end.

What import will look like

Design system

One design system. Every page.

Colour, type, corner radius, shadow and spacing are values your project holds — not decisions repeated on every section. Change one and the whole site moves with it.

Primary

Corners

Home

Pricing

About

Three pages. One set of values. Nothing was edited page by page.

E-commerce

Storefronts, designed properly.

The plan is that your store keeps its products, orders and checkout where they are, and Studio designs everything the customer actually sees — storefront, collections, product pages, cart.

Commerce integrations are planned and not available yet. Nothing on this page connects to a store today.

Shopify

Planned

Connect a Shopify store and build its storefront, product pages and collections in Studio.

WooCommerce

Planned

Connect a WooCommerce store and design its storefront in Studio.

Templates

In development

Start from a finished, editable project instead of a blank page.

See what is planned

For developers

Your code. Your components. Your Studio.

Studio pages are structured data, not a bag of markup. Every section is a typed React component with a fixed set of props, rendered server-side and bundled to a self-contained page. That is why AI can edit a page without breaking it — it changes values, never syntax.

Read the developer overview

{
  "title": "Pricing",
  "theme": {
    "primary": "#f5a623",
    "font": "inter",
    "radii": "rounded"
  },
  "blocks": [
    { "type": "hero-centered", "props": {
        "heading": "Simple pricing",
        "cta": "Start free"
    }},
    { "type": "pricing-3col", "props": { ... } },
    { "type": "footer-simple", "props": { ... } }
  ]
}

Publish

One click, and it is live.

Publishing gives you a live HTTPS address immediately. Your own domain is being built now.

Publishing

Publish to a live skode.ai address in one click, with HTTPS handled for you.

Custom domains

In development

Point your own domain at a published Studio site.

From idea to production, without starting over.

Open the studio and describe the first page. You will have something real to edit in under a minute.

Start building