# Design Page Builder

> Turn a page plan into canonical source and an interactive storefront preview

Canonical URL: https://c22dfdd27662:3005/guides/visual-page-builder

`/design-page` is the design stage of the storefront workflow. It turns a page
plan into canonical source and a responsive local preview.
It does not prepare final assets, create a Lexsis draft, or publish.

## Workflow

```text
saved store/theme + page plan
  -> canonical source
  -> dry-run Lexsis compilation
  -> interactive local preview
  -> visual approval
```

The preview is a design artifact. It communicates section hierarchy,
composition, whitespace, image treatment, typography direction, CTA placement,
and mobile stacking before final production source is created.

## Inputs

Use:

- the approved `page-plan.md`
- the selected store and theme saved by `/setup`
- current read-only product and media information
- existing verified assets where available
- neutral bundled placeholders where final media is still missing

If the user explicitly skips `/plan-page`, `/design-page` records the skip and
creates only the minimum plan needed for the mockup. It never invokes
`/setup` or `/plan-page` automatically.

## Readable Visual Source

The skill writes `lexsis-source.html` with:

- stable section delimiters and matching section IDs
- ordinary HTML for static content
- readable `<lx-island>` authoring markup for supported interactions
- schema-valid preview props
- a direct fallback for each island
- no complete-page image pretending to be the layout

Before authoring an island, the agent resolves its current active schema with
`lexsis_design` action `island_schema`. It never invents island names or props.

## Interactive Local Preview

Raw `<lx-island>` tags are authoring markup and do not hydrate directly in a
browser. `/design-page` therefore:

1. Dry-run compiles the complete source with `lexsis_pages` action
   `compile`.
2. Builds `page-preview.html` from the compiled section output.
3. Loads the exported Lexsis island CSS and JavaScript runtime.
4. Reviews the result at 390px, 768px, and 1280px.

Shoppable video, galleries, before/after comparisons, accordions, and similar
components use the real island runtime when valid media and props exist. If an
island cannot compile or lacks usable preview data, the mockup shows its static
fallback and records that limitation.

The local shell does not add a restrictive content-security policy or replace
normal browser networking, forms, links, or popups. Keep preview props focused
on presentation. Real variant selection, add-to-cart, cart totals, and
checkout behavior are certified later on the hosted Lexsis draft.

## Revise Before Creating a Draft

You can update `lexsis-source.html`, recompile it, and regenerate the local
preview as many times as needed before creating a remote page. Alternative
concepts can be retained as separate local workspace copies for comparison.

The skill infers `fast-draft` or `production-ready` from the complete request.
A fast draft may expose the first coherent preview before exhaustive critique;
production-ready work completes the full critique gate first.

Each review should report:

- local mockup path
- selected store and theme
- ordered sections
- interactive island previews
- static fallbacks
- temporary assets still requiring replacement

## After Approval

```text
optional /asset-prep
  -> replace unresolved or temporary media

/generate
  -> compile current workspace source
  -> create and return DRAFT_CREATED
  -> synchronize and run hosted QA for DRAFT_READY

/publish
  -> release the reviewed version after separate approval
```

Use `/analyze-page` before planning when a URL, screenshot, ad, or existing page
should inform the design. Every workflow remains independently invokable, and
explicitly skipped stages are recorded rather than silently executed.