Site Studio · An AI CMS for CX1

1 · URL-vibe

Paste a B2B URL, get a brand-aligned CX1 page

The URL is the prompt. One field. Style intent below clarifies the AI's role: a reference, not a clone.

Idle

← Back│Site setup › From a reference URL

Generate site from a reference URL

Step 1 of 3

Paste a site you like. We'll match the vibe, not the content.

We capture the page, extract layout patterns and design sentiment, and rebuild it using your components, content, and brand tokens. We never copy text, images, or markup from the source.

⊕https://example.com↵

Public pages onlyHonors robots.txtStructure & vibe — never markup

Recent captures

fastenal-style.example.com

Industrial · Dense · Photographic · 2d ago

grainger-style.example.com

Search-first · Card grid · Red CTA · 5d ago

msc-style.example.com

Clean · Spec-led · Cool palette · 1w ago

1

The URL is the prompt

One field. No knobs. Site Studio decides what to extract — and tells you before applying.

2

Guardrails up front

Robots.txt honored. Structure and vibe only — never markup or images.

1 · URL-vibe

Paste a B2B URL, get a brand-aligned CX1 page

Live capture log. No fake progress bar — we tell the user exactly what we're doing as we do it.

Capturing…

← Back│Site setup › From a reference URL

Generate site from a reference URL

Capturing…

https://acme-industrial.example.comsession · 0:42

Capturing screenshots

desktop · 1920×1080mobile · 390×844

Pipeline

Reachability + robots.txt check

Headless capture · desktop

Headless capture · mobile

Vision-LLM · structural primitives

Vision-LLM · design sentiment

1

Real telemetry

Each step is named so the output isn't a black box. We tell the user exactly what we're doing as we do it.

1 · URL-vibe

Paste a B2B URL, get a brand-aligned CX1 page

Vibe descriptors made legible. We name what we extracted — palette, voice, density — so the user can sanity-check before applying.

Analyzed

← Back│Site setup › From a reference URL

Generate site from a reference URL

Analyzed

https://acme-industrial.example.com Analyzedsession · 0:42

Source snapshotcaptured 0:18 agonot stored

1

2

3

4

Design briefstructural patterns only

1LayoutHero • Search • 4-up category grid • Promo strip • Footer

2HierarchySearch dominates above the fold. Hero is dark, supporting.

3DensityHigh — small type, tight gutters, dense cards

4Sentiment

IndustrialTrustworthyPhotographicCool paletteHigh-density

1

No black box

We name the layout, hierarchy, density, and sentiment we read — and let the user edit before anything is applied.

1 · URL-vibe

Paste a B2B URL, get a brand-aligned CX1 page

Brand-safety gate. Their colors vs. yours, side by side. The difference between inspiration and IP infringement.

Conflict

← Back│Site setup › From a reference URL

Generate site from a reference URL

Review brand conflicts

https://acme-industrial.example.com Brand conflictssession · 0:42

From the reference · Inferred design

primaryDeep navy#0F2236

accentIndustrial yellow#FBC756

neutralCool gray#E8E8E8

font·Roboto Condensed

radius·3px (sharp)

density·High

shadow·Hard, low-spread

Acme brand layer · Will be used

Wins

primaryAcme blue#3289E7

accentCaution amber#F9AC06

neutralNeutral 100#F2F2F2

font·Avenir Next

radius·6px (kept)

density·Medium · kept

shadow·Soft, blue-tinted

Keep density & layout from reference

Honor brand layer (recommended)

1

Inspiration ≠ infringement

Per-token diff so the brand-safety conversation happens before the generate button.

1 · URL-vibe

Paste a B2B URL, get a brand-aligned CX1 page

Generated page in your tokens. Reference vibe ↔ your brand pinned together so the user remembers the lineage.

Applied

← Back│Site setup › From a reference URL

Generate site from a reference URL

Applied

ACMEPlumbing · HVAC · IndustrialSign inCart · 0

Since 1928

Parts in your hands by tomorrow.

Shop catalog

Pipe & fittings

Valves

Pumps

HVAC

Inherited from reference

Hero hierarchySearch above the fold4-up category gridIndustrial densityPromo strip

From your brand layer

Acme blue (primary)Caution amber (accent)Avenir Next6px radiiSoft shadowsCopy tone

Validation

✓All components in registry
✓WCAG 4.5:1 contrast on text
✓No verbatim copy from source

Note: The reference site's IP was never copied. Only structural and stylistic patterns were applied to your registered components.

1

The lineage is visible

Reference vibe and brand layer pinned together — so the team can see what came from where.

2 · Source-aware migration

Billtrust eCommerce → CX1, ~55-60% autonomous

Honest scope-setting up front. We name the 55-60% target and what we expect to find before kicking off — no surprises mid-crawl.

Connect

← Back│Site setup › Migrate from Billtrust

Billtrust → CX1 migration

Not connected

Point us at your Billtrust eCommerce site. We'll do 55-60% autonomously.

We crawl every public page, parse the legacy templates and custom JS components, and rebuild each page using your registered CX1 components. Pages we can't confidently translate are queued for an author handoff with full context.

Billtrust eCommerce URL

⊞ https://legacy.acme-supply.com

Optional · EcommerceRepository commit

git@github.com:acme-supply/storefront@ mainConnected

Higher-fidelity migration when source templates are available.

Target customer layer

acme

Tier

Tier 1 (full autonomy)

PIM source

pim-grpc-gateway

Brand tokens

From Theme editor

What we expect to find

Pages~1,240

Legacy templates184

Custom JS modules37

Legacy UI components~2,300 instances

Crawl time~18 min

We use matched-pair analysis against the Billtrust↔CX1 component map. Confidence below 70% routes to author handoff.

1

No surprises mid-crawl

Pages, templates, JS modules, time — sized before we start.

2 · Source-aware migration

Billtrust eCommerce → CX1, ~55-60% autonomous

Live crawl log. Real telemetry — pages, templates, components, confidence — instead of an opaque progress bar.

Crawling

← Back│Site setup › Migrate from Billtrust

Billtrust → CX1 migration

Crawling…

Crawling legacy.acme-supply.com

Discovered 743 of ~1,240 pages · ETA 11 min

Pages discovered

743

Templates parsed

108

Components mapped

1,872

Confidence avg

0.71

12:04:18 INFO crawl GET /catalog/pipe-fittings/copper → 200

12:04:18 INFO parse matched template: catalog-listing.vm

12:04:19 INFO map ProductGrid (Billtrust) → ProductGrid (CX1) · 0.94

12:04:19 INFO map FacetSidebar (Billtrust) → FacetPanel (CX1) · 0.88

12:04:20 WARN map QuickOrderForm: no matched pair · queued for handoff

12:04:21 INFO crawl GET /content/about-us → 200

12:04:21 INFO parse freeform CMS page · 1 RichText, 2 Images

12:04:22 INFO map all components mapped · 0.96

1

Confidence per component

Each match carries a score. Anything that doesn't pair cleanly is queued for handoff, not silently dropped.

2 · Source-aware migration

Billtrust eCommerce → CX1, ~55-60% autonomous

Confidence is the unit of work. The stacked bar maps directly to the 55-60% claim. Filter by status, dive into any page.

In progress · 58%

← Back│Site setup › Migrate from Billtrust

Billtrust → CX1 migration

In progress · 58%

Total pages

1,240

discovered

Auto-migrated

722

58.2%

Needs review

218

17.6%

Handoff queue

287

23.1%

Failed

13

1.0%

Confidence distribution

≥ 0.85 auto 0.65-0.85 review 0.45-0.65 handoff < 0.45 fail

Pages · 1,240

AllAutoReviewHandoffFailed

/Home94%12 / 12Auto›

/catalog/pipe-fittings/copperListing91%8 / 8Auto›

/product/57-cu-elb-90Product detail88%11 / 11Auto›

/account/quick-orderForm62%4 / 6Handoff›

/content/about-usContent96%5 / 5Auto›

/account/order-historyAccount71%7 / 9Review›

/branches/locatorCustom41%2 / 8Failed›

/content/credit-applicationForm55%3 / 7Handoff›

1

The 58% is honest

Auto · Review · Handoff · Failed — every page is accounted for. Nothing hides in a pending bucket.

2 · Source-aware migration

Billtrust eCommerce → CX1, ~55-60% autonomous

Source ↔ target side by side. Below: the matched-pair component map with confidence per match. Approve, reject, or re-run with hints.

Per-page diff

← Back│Site setup › Migrate from Billtrust

Billtrust → CX1 migration

Reviewing page

← All pages /catalog/pipe-fittings/copper Auto-migrated 91%

SourceBilltrust eCommerce (legacy)Legacy templates · custom JS

ACME

Home › Catalog › Pipe Fittings › Copper

TargetCX1 (generated)Vue 3 · PrimeVue v4 · Acme tokens

ACME

Home › Catalog › Pipe Fittings › Copper

Matched-pair component map · 8 of 8 mapped

diff hash · 0xa1f3c0

header.vm + nav.vm→AppHeader · MegaMenu1:296%

search-bar.vm→SearchInput1:192%

facet-sidebar.vm + filter-chips.js→FacetPanel2:188%

product-grid.vm→ProductGrid1:194%

product-card.vm→ProductCard1:191%

pagination.vm + jquery-pager.js→Pagination2:187%

1

Pixel-aware, not pixel-perfect

The page is rebuilt with your registered CX1 components — not a static screenshot port.

2 · Source-aware migration

Billtrust eCommerce → CX1, ~55-60% autonomous

Failures are not orphans. Each handoff card carries the legacy template, parsed structure, suggested components, and the reason — so authors finish in minutes.

Handoff queue

← Back│Site setup › Migrate from Billtrust

Billtrust → CX1 migration

Handoff queue

← Dashboard Author handoff queue 287 pages

These pages couldn't be auto-migrated with confidence. Each comes with full handoff context — the legacy template, parsed structure, suggested CX1 components, and the reason for handoff — so an author can finish in minutes, not hours.

/account/quick-order· Form · Account

High

⊘ Why handoff: QuickOrderForm has no matched CX1 component yet (Tier 2)

Handoff context

Source: account/quick-order.vm
Parsed: 1 ProductLookup, 6 QtyInputs, 1 SubmitBar
Suggest: build new QuickOrderForm or compose from FormGrid + ProductLookupField

Assignee:S. Bachalli

/branches/locator· Custom · Maps

High

⊘ Why handoff: Map widget uses Google Maps SDK directly — no CX1 equivalent registered

Handoff context

Source: branches/locator.vm + map-widget.js
Parsed: 1 SearchInput, 1 BranchList, 1 MapEmbed
Suggest: register MapEmbed component or fall back to BranchList only

Assignee:Unassigned

/content/credit-application· Form · Content

Medium

⊘ Why handoff: Multi-step wizard pattern not in registry

Handoff context

Source: content/credit-app.vm + 3 partials
Parsed: 7 form fields across 3 steps
Suggest: compose with WizardShell + FieldGrid

Assignee:L. Doe

/account/saved-lists· Account

Medium

⊘ Why handoff: Custom JS interactivity (drag-reorder) not migratable

Handoff context

Source: account/lists.vm + lists.js
Parsed: 1 ListIndex, 1 ItemTable
Suggest: ListIndex + ItemTable, defer drag-reorder to v1.1

Assignee:Unassigned

1

No orphan tickets

Every handoff carries the why, the parsed structure, and a suggestion. Authors finish in minutes.

3 · Theme-from-logo

Upload a logo, get a full token set

One drop zone, one promise. SVG preferred for vector-precise extraction; sample logos let users try without uploading.

No logo

← Back│Site setup › Brand & theme › From logo

Theme from logo

No logo

Drop a logo. Get a full token set in seconds.

We extract colors, infer typography character, derive radii from the logo's geometry, and propose a brand voice. Everything is editable before it touches your theme.

Drop your logo here

SVG preferred · PNG also fine · or paste a URL

Choose file

or try a sample:AcmeApexContinental

1

No-setup-cost preview

Sample logos let prospects experience the magic before they upload anything of their own.

3 · Theme-from-logo

Upload a logo, get a full token set

Step-by-step extraction. Color → type → radius → contrast → voice. Each step is named so the output isn't a black box.

Extracting…

← Back│Site setup › Brand & theme › From logo

Theme from logo

Extracting…

ACME

Reading your logo

Extracting palette · inferring typography · measuring geometry…

Color extraction (5-stop ramps × 3)

Typography character

Geometric radius inference

Contrast & WCAG validation

Brand voice proposal

1

Five passes, named

Color → type → radius → contrast → voice. Each stage is auditable before the next runs.

3 · Theme-from-logo

Upload a logo, get a full token set

The full derived set. 5-stop color ramps, type pairing, radius scale, shadow scale, brand voice — plus a live preview.

Tokens derived

← Back│Site setup › Brand & theme › From logo

Theme from logo

Tokens derived

ACME

Source

acme-logo.svg

3 dominant colors · sharp geometry · sans-serif wordmark

Color tokens· 5-stop ramps derived from logo

Primary--blue-50 → --blue-900

50#F2F6FA

200#BBD8F7

500#5FA3EC

700#3289E7

900#1357A0

Accent--yellow-50 → --yellow-900

50#FEF7E6

200#FDE6B4

500#F9AC06

700#C97B00

900#7A4900

Neutral--gray-50 → --gray-900

50#FFFFFF

200#F2F2F2

500#A6A6A6

700#404040

900#171717

Typography · Inferred from wordmark

Display

Tomorrow's parts.

Avenir Next · 700

Body

Net-30 terms available.

Avenir Next · 400

Mono

SKU-57-CU-90

JetBrains Mono · 500

Radius · From logo geometry

4pxxs

6pxs

8pxm

12pxl

Sharp geometry in the logo · we picked a tight ramp (4–12px). Not pill-shaped.

Shadow & voice · Inferred

xs

s

m

Brand voice

Direct, practical, trade-friendly. Avoids hype. Uses industry shorthand (SKU, MFR, Net-30) without explaining.

1

A system, not a swatch

15 colors · 3 type styles · 4 radii · 3 shadows · 1 voice — all from one image.

3 · Theme-from-logo

Upload a logo, get a full token set

Edit before applying. WCAG contrast badges per color · "Edited" tag on user overrides · live preview using the current tokens.

Review & tweak

← Back│Site setup › Brand & theme › From logo

Theme from logo

Review & tweak

← Back

Review & tweak

Click any token to edit. Changes preview live.

Tokens· 27 derived · 2 edited

--blue (primary)#3289E7WCAG AAA

--blue-dark#0D3E72WCAG AAAEdited

--yellow (accent)#F9AC06WCAG AA

--font-sansAvenir Next

--font-monoJetBrains MonoEdited

--radius-m8px

--shadow-s0 2px 6px rgba(9,26,50,0.08)

--space-l24px

Sample page· live preview

HomeListingDetail

ACME · since 1928

Parts in your hands by tomorrow.

Shop catalogTalk to sales

57-CU-90 Elbow

Copper · 1/2"

$3.42

57-CU-90 Elbow

Copper · 1/2"

$3.42

57-CU-90 Elbow

Copper · 1/2"

$3.42

1

Trust through transparency

WCAG badge per color · "Edited" tag on user overrides · everything previewable before commit.

3 · Theme-from-logo

Upload a logo, get a full token set

Wired into the schema. Tokens written to ai_schema.brand_tokens, code-gen pipeline triggered, AC-BT-1 / AC-BT-2 satisfied.

Applied

← Back│Site setup › Brand & theme › From logo

Theme from logo

Applied

Wrote

ai_schema.brand_tokens

+15 color tokens

+6 type tokens

+4 radius tokens

+5 shadow tokens

+1 voice spec

Triggered

code-gen pipeline

→theme.css regenerated

→Tailwind config overrides emitted

→PrimeVue passthrough updated

→142 page previews rebuilt

Acceptance

AC-BT-1, AC-BT-2

✓End-to-end pilot: Acme

✓5-stop primary ramp

✓WCAG 4.5:1 satisfied

✓Builder review gate

1

Schema-level commit

Tokens land in ai_schema.brand_tokens — auditable, versioned, reversible.