Designs

The Design Library lets you save your entire website as a named design, try a completely different direction, and switch back whenever you want. Think of it as save slots for your website.

What gets saved

A saved design includes everything that makes your website unique:

• Pages — all your PHP/HTML content files
• Styles — CSS design tokens, Tailwind utilities, custom styles
• Scripts — JavaScript files
• Data — structured content, memory, site data
• Forms — form definitions and validation rules

Your image library and actions are shared across all designs — you only upload photos once.

Saving a design

Three ways to save:

1. From the preview toolbar — click Save above the live preview (between Refresh and the external-link icon). This is the primary entry point — always visible when a site exists
2. From the Designs page — click Save Design, give it a name and optional description
3. After AI generation — a "Save to Designs" shortcut appears below the file list in the chat

All three open the same Save Design modal where you name the design and add an optional description. Saved designs appear in the Gallery as preview cards showing the design's colors, page count, and creation date.

The Save toolbar button is disabled when no site exists yet. It enables automatically after your first generation or when you load a design. During AI generation or visual editing, the button is grayed out along with the other toolbar controls.

Loading a design

Click the Load button on any design card. A confirmation modal asks whether to save your current design first:

• Checkbox checked — your current work is saved to the library before switching
• Checkbox unchecked — your current work is discarded

The Studio remembers your last choice. After loading, the Chat view opens with your restored design in the live preview.

Starting fresh

Click Start a new design from scratch in the Chat panel or New Design on the Designs page. The same confirmation modal appears — save first, or start clean. When you start fresh, the workspace is cleared and the Chat shows the "What are we building?" prompts, ready for a new site.

Undo history

When you switch designs, your undo history starts fresh. Each design begins with a clean slate — undo only affects changes made within the current session. This is intentional: cross-design undo could mix files from different websites, which would be dangerous.

Active design

The currently loaded design shows an Active badge and amber border in the Gallery. The active design ID is tracked so you know which design you're working on.

Editing saved designs

Click the pencil icon on any design card to rename it or update its description. Changes are saved immediately.

Deleting designs

Click the trash icon on any design card. A confirmation dialog prevents accidental deletions. Deleting a design removes its saved files permanently — this cannot be undone.

Design vs. Snapshot

Designs and Snapshots serve different purposes:

Both are complementary. Use snapshots as your safety net, and designs when you want to explore and compare different creative directions.

Automatic safety snapshots

VoxelSite creates invisible safety snapshots in certain situations:

• Before a restyle — when you attach a design reference URL and generate, your current design is saved first
• Before switching designs — if you load a different design without saving, VoxelSite auto-saves your work
• Before starting fresh — clearing the workspace auto-saves your current state

These safety snapshots do not appear in the Gallery — they stay out of your curated collection. They exist as restore points if something goes wrong.

Related

• Undo & Snapshots — Per-action undo and point-in-time restore
• Chat — The AI conversation panel
• Design System — How VoxelSite handles colors, typography, and tokens