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

# Wireframes

> Sketch first, build fast: ask WPOS for a grey-block wireframe to agree the layout, then turn the same structure into the finished page.

export const YouTubeVideo = ({id, title, caption}) => {
  const [playing, setPlaying] = useState(false);
  return <div className="demo-embed">
      {playing ? <iframe src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0&playsinline=1`} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen /> : <button type="button" className="yt-facade" onClick={() => setPlaying(true)} aria-label={`Play video: ${title}`} title={title}>
          <span className="yt-facade-thumb" style={{
    backgroundImage: `url(https://i.ytimg.com/vi/${id}/maxresdefault.jpg)`
  }} aria-hidden="true" />
          <span className="yt-facade-play" aria-hidden="true">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5.14v13.72a1 1 0 0 0 1.52.85l10.97-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z" />
            </svg>
          </span>
        </button>}
      {caption ? <p className="demo-caption">{caption}</p> : null}
    </div>;
};

Before you commit to a full design, ask WPOS for a wireframe: a grey-block
version of the page with every section in place. Use it to agree the
structure with your client while changes are still cheap. Once the layout is
right, WPOS builds the finished page on the same structure.

<YouTubeVideo id="Dp66t4rwXFE" title="Sketch First, Build Fast: Wireframes in WPOS" caption="Sketch first, build fast: grey blocks first, then the designed page" />

## Ask for a wireframe

In the [Command Center](/operate/command-center) chat, ask for a
**wireframe**. Asking for a prototype, a lo-fi mockup, a rough layout, or a
quick mock works the same way. WPOS then builds a wireframe instead of a
finished design.

```text theme={null}
Build a wireframe of a services page: a hero, three
service cards, pricing, testimonials, and a contact form.
```

```text theme={null}
Give me a quick mock of the About page layout
before we design it.
```

WPOS places the wireframe on a real page of the site, so you review it in the
live preview like any other page, then walks you through what it built.

## What a wireframe looks like

* **Greyscale only.** Structure and hierarchy are shown in shades of grey, with
  no colour or brand styling, so nobody mistakes a wireframe for the final
  design.
* **Real labels, placeholder copy.** Headings, navigation, labels, and buttons
  use real text. Body copy appears as grey placeholder lines, and images as
  crossed-out placeholder boxes.
* **Real page sections.** Navigation, hero, cards, forms, tables, tabs,
  accordions, and footers are laid out as real sections, not a flat picture.
* **Responsive.** On screens 768px wide or narrower, multi-column rows stack
  into a single column, so you can check the mobile layout too.
* **Works in Gutenberg and Elementor.** A wireframe looks the same in the
  preview, on the front end, and inside the Gutenberg and Elementor editors.

The whole wireframe is built as a single WPOS widget, which is what makes it
fast to build and easy to replace once the real design is ready.

## From wireframe to finished page

<Steps>
  <Step title="Review the structure">
    Open the wireframe in the preview and change the layout in plain language,
    for example "move pricing above testimonials" or "add an FAQ section".
    Settle the structure here, before any styling.
  </Step>

  <Step title="Apply the design">
    When the layout is approved, ask WPOS to design it, for example "apply the
    brand to this page". WPOS builds the finished page on the same structure.
    See [Styling and brand](/operate/styling) for pinning the brand.
  </Step>

  <Step title="Compare, then publish">
    Ask WPOS to keep the wireframe on its own page and build the designed
    version separately, so you can compare the two side by side.
  </Step>
</Steps>

<Warning>
  Wireframes use placeholder content. Replace placeholder text, sample forms,
  and example testimonials with the client's real content before you publish.
</Warning>

<CardGroup cols={2}>
  <Card title="Build a page" icon="file-pen" href="/operate/build-a-page">
    The page-by-page workflow for shipping a site.
  </Card>

  <Card title="Styling and brand" icon="palette" href="/operate/styling">
    Pin the brand so every page comes out on-brand.
  </Card>
</CardGroup>