> ## Documentation Index
> Fetch the complete documentation index at: https://docs.etho.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Wireframe (Beta)

> Recreate a public page as an editable wireframe in Agent chat with /wireframe.

Recreate an existing public page as a saved wireframe in Agent chat. The result keeps the page's copy and section order, shows its layout, and uses outlined placeholders for images, videos, forms, and other components.

<Note>
  **Beta:** This guide covers the Wireframe beta workflow. Use Agent chat on
  desktop. If `/wireframe` does not appear in your command picker, [contact
  Support](mailto:support@etho.net) to check availability in your workspace.
</Note>

## Create a wireframe

For a worked example with an existing Olympus page, follow [Build a sales-call funnel](/labs/examples/sales-call-funnel).

<Steps>
  <Step title="Select the skill">
    Open Agent chat, type `/wireframe`, and select **Wireframe** from the command picker.
  </Step>

  <Step title="Describe the page">
    Send the exact URL of the page you want to recreate:

    ```text theme={null}
    Recreate https://example.com/pricing as a wireframe.
    Keep the original copy, section order, columns, and media positions.
    ```

    If you have already shared the URL in this conversation, you can ask for a wireframe of "this page."
  </Step>

  <Step title="Confirm the action">
    Review and approve the action if prompted. Recreating a supplied page does not require choosing an offer or audience.
  </Step>

  <Step title="Review the result">
    When generation finishes, the saved wireframe appears as an artifact in the conversation. Review the section order, copy, and placeholder briefs. Each request creates one page.
  </Step>
</Steps>

## How it chooses the structure

For an existing page, the agent opens it in a browser, closes pop-ups and cookie banners, scrolls the full length so every section loads, and reads the visible text and layout. Section order, columns, cards and media positions come from that capture, and the copy is never rewritten. Desktop and mobile screenshots are used to name each section and describe each image. Your saved business context does not replace the source page's copy. Earlier review suggestions only apply when you request changes separately.

The original text remains visible. Media and interactive elements become outlined placeholders with briefs describing what appeared there. A reference wireframe shows how these placeholders should look; its copy and business facts are not reused.

If no browser can load the page, generation fails instead of substituting a new draft. App screens that a site draws with HTML may appear as one image placeholder rather than as text. Numbers drawn by scripts the browser cannot read, such as some live counters, can be missing.

## Draft a new page

You can also ask for a new page from a brief:

```text theme={null}
Create a landing-page wireframe for our consultation offer.
The goal is to book a call. Include benefits, how it works,
proof placeholders, FAQs, and a booking section.
```

For a new page, the agent uses your brief and available brand context. It may ask for a page type; an offer and audience are optional. Missing proof remains a placeholder. The [sales-call funnel example](/labs/examples/sales-call-funnel) shows this separate drafting workflow.

## Edit the copy

Select a copy field in the completed wireframe, update its text, and click **Save**. You can edit in the chat artifact or its expanded side pane. Saving creates a new version and keeps earlier versions available.

For an exact replacement through chat, name the field and provide the replacement:

```text theme={null}
Change the hero headline to "Make room for your next stage of growth."
Keep the rest of the page unchanged.
```

For a broader rewrite, identify the section and describe the change:

```text theme={null}
Rewrite only the benefits section to emphasize saving time.
Keep every other section unchanged.
```

Editing becomes available when generation or an active revision finishes. Your workspace permissions determine whether you can edit or export the page.

## Download a saved version

Open the export menu on the wireframe you want to download:

* **Download HTML** saves a file you can open in a browser offline.
* **Print / Save as PDF** opens a print preview. Continue to your browser's print dialog and select a PDF destination or printer.

Exports use the selected saved version, including when you open an older version. If you have unsaved copy changes, resolve the Save, Discard, or Cancel prompt before continuing.

## Continue in Build

Ask the agent to create a Build draft from the version you want to use:

```text theme={null}
Create a Build draft from this wireframe.
```

Review any required approval, then continue editing the draft in [Build](/modules/build). Creating a draft does not publish the page. Later wireframe edits do not automatically update an existing Build draft.

For beta feedback or help with a missing command, [contact Support](mailto:support@etho.net).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.