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

# Design a landing page

> From a Notion brief and brand files, design a waitlist or launch page in Replit Design.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

You don't have a page yet: a new product, waitlist, or campaign. From a Notion brief and
brand files in Google Drive, design a landing page in Replit Design: hero, proof, how it
works, and one call to action. Agent uses the offer and copy in Notion, plus the logo, colors, and
type in Drive. This is the visual system for the page, not the coded site. Use the frames
as the spec when you build.

## Best for

* Product designers who need a waitlist or launch page before the product is live.
* Founders who need a first on-brand layout from a Notion brief and Drive assets.

## Connectors

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "Brief: offer, audience, proof, and call to action",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, colors, type, and brand assets",
},
]}
/>

## Before you start

Have a Notion page with the brief (offer, audience, call to action) and brand files in Drive. Connect
Notion and Drive. Say who the page is for and what the primary call to action should be (signup,
waitlist, book a demo, buy).

## Prompt the agent

<AiPrompt>
  From this Notion page \[link] and brand files in Google Drive, design a landing
  page in Replit Design for \[waitlist / launch / book a demo]. Use the offer,
  audience, proof, and call to action from Notion. Build desktop and mobile
  frames: hero with one call to action, social proof, how it works, and a final
  call to action. Use the existing logo, colors, and type.
</AiPrompt>

## What to expect

Agent reads the Notion brief and Drive brand files, then lays out frames in Replit Design.
You get a desktop page and a mobile crop, not a deployed app. Use the frames as the spec
when you build, or ask Agent to implement them in a later Build workflow. Preview desktop
and mobile side by side. Check the call to action, proof points, and colors against Notion
and Drive before you treat the frames as final.

## Make it work for you

<AiPrompt>
  Make this a waitlist landing page: one promise, three proof points, email
  capture, and no extra nav. Pull proof points from Notion.
</AiPrompt>

<AiPrompt>
  Add a pricing section with three tiers from this Notion table \[link]. Keep the
  visual system. Highlight the middle plan.
</AiPrompt>

## Troubleshooting

* **Copy isn't from the brief:** give the Notion page link and ask Agent to use the offer, audience, proof, and call to action from there, not rewrite from the site.
* **Colors and type don't match brand:** connect Drive and point at logo, colors, and type files.
* **You expected a live site:** this workflow produces frames in Replit Design, not a deployed app. Use the frames as the spec, or ask Agent to implement them in a later Build workflow.

## Related

<CardGroup cols={2}>
  <Card title="Create social icons and banners" href="/use-cases/create-social-kit">
    Same Google Drive brand files for profile and cover assets.
  </Card>

  <Card title="Launch a paid event website" href="/use-cases/launch-event-website">
    Same Notion source for a public page, not just frames.
  </Card>
</CardGroup>