# Quickstart

> Plan, preview, and create your first storefront draft

Canonical URL: https://fa7e86e3d553:3005/getting-started/quickstart

Create a storefront page through distinct planning, visual design, asset, draft,
and publishing stages.

## Prerequisites

- A Lexsis workspace with a connected Shopify store
- [Lexsis skills and MCP installed](/getting-started/skill-packs)
- `/setup` completed for the store and theme you want to use

## The Pipeline

Run setup once for each store and theme you want to save:

```text
/setup
```

The normal page workflow is:

```text
/plan-page → /design-page → /generate → /publish
```

Each command owns one result and can also run independently. If you explicitly
skip a step, the workflow records the skip instead of silently invoking another
skill.

## Generate Your First Page

Once your agent has the Lexsis skill pack and MCP connected, give it a prompt:

```
Create a landing page for my Summer Collection.

Feature these products: Glow Serum, Hydra Cream, and Sun Shield SPF 50.

Include a hero section with the headline "Your Summer Glow Starts Here",
a trust bar with free shipping and 30-day returns,
a product carousel, customer reviews, and an FAQ section.

Use my saved brand colors and theme. Create a draft with the handle
"summer-collection", but do not publish it yet.
```

The workflow produces:

1. **`/plan-page`** — A campaign, audience, conversion, copy, and section plan
2. **`/design-page`** — Canonical source and an interactive local preview
3. **`/generate`** — An early `DRAFT_CREATED` preview, then `DRAFT_READY` after synchronization and QA
4. **`/publish`** — A separate live release only after you explicitly approve it

Use **`/asset-prep`** independently when the page needs standalone or
replacement image or video work.

You can revise the local visual source and regenerate its preview as many times
as needed before `/generate` creates a Lexsis draft.

Generated islands use source format:

```html
<lx-island name="BuyBox">
  <script type="application/json">{ "productId": "gid://shopify/Product/123" }</script>
</lx-island>
```

Pass this source to `lexsis_pages` action `compile`, then use the same
source with `lexsis_page_create` action `create`.

## Result

`/generate` returns a hosted draft preview:

```
https://storefront.trylexsis.com/v/summer-collection
```

Review desktop, tablet, mobile, and commerce behavior. Run `/publish` only when
the reviewed local source, recorded remote version, and QA report are ready.

## Using Slash Commands Directly

You can also invoke individual workflow steps:

| Command | When to use |
|---------|-------------|
| `/setup` | Save reusable brand and theme context for one or more stores |
| `/plan-page` | Plan at the depth implied by the request |
| `/design-page` | Build and revise canonical source and a responsive preview |
| `/asset-prep` | Replace temporary media with verified production assets |
| `/generate` | Create an unpublished draft early, then run synchronization and hosted QA |
| `/publish` | Release the reviewed draft after explicit approval |
| `/analyze-page` | Analyze a URL, screenshot, ad, or existing page |
| `/optimize` | Improve an existing page for a chosen business outcome |
| `/experiment` | Create focused storefront experiments |
| `/cart` | Inspect, assign, or edit cart profiles |

## Tips for Better Prompts

| Do this | Why |
|---------|-----|
| Name specific products | Agent pulls real images, prices, and variants |
| Describe the tone | "luxury and minimal" vs "bold and playful" changes the entire design |
| Mention your audience | "for first-time buyers" triggers different copy than "for returning customers" |
| Reference an ad creative | "Match the style of this Meta ad" lets the agent analyze and mirror it |
| Specify a page type | "PDP" vs "landing page" vs "collection page" triggers different layouts |
| Mention traffic source | "for TikTok traffic" triggers video-native, scroll-stopping patterns |

## Example: PDP from an Ad

```
I have a Meta ad for our Vitamin C Serum targeting women 25-40.
The ad headline is "Brighten Your Skin in 14 Days".

Create a product detail page that matches the ad messaging.
Include a buy box, before/after slider, ingredient explorer,
reviews, and a sticky add-to-cart bar.

Publish as "vitamin-c-serum-pdp".
```

## Example: Quick Landing Page

```
Build a simple landing page for our flash sale.
20% off everything, ends Friday.
Include a countdown timer, our bestselling 4 products,
trust badges, and an email capture form.
Slug: "flash-sale-june".
```

## Editing a Draft or Published Page

Page edits are local-source-first. The agent reads the current remote version,
changes `lexsis-source.html`, compiles the complete source, and patches only
the changed sections. An unexpected version mismatch stops the update instead
of overwriting another change.

```
Add a reviews section after the hero on "summer-collection".
```

```
Replace the FAQ section on "vitamin-c-serum-pdp" with these questions: ...
```

```
Move the trust bar above the product carousel on "flash-sale-june".
```

## Next Steps

- [Skill Packs](/getting-started/skill-packs) — Install and update the complete workflow
- [Design Page Builder](/guides/visual-page-builder) — Create interactive local design previews
- [Islands](/islands) — See all interactive components you can request
- [Theming](/pages/theming) — Understand how brand theming works
- [Tools](/tools) — Full reference of what the agent can do under the hood