> ## 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 your app

> Use Design mode to shape how your app looks, screen by screen.

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const designPrompt = "Create five different designs for the game menu, where players choose between Blocks, Snake, Racer, and Pinball, and see the top scores for each.";

How your app looks is as much a part of it as what it does. PixelGames is a Game Boy on a
phone: the cream shell, the olive-green screen, and the chunky buttons are the whole point.
A generic app layout would lose it.

<Steps>
  <Step title="Switch to Design mode">
    Switch to Design mode on the toggle at the top left of your workspace:

    <Frame caption="The Design and Build toggle with Design selected in the PixelGames workspace.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-1.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=8cbcacf95a04c466f273586b54c4acbb" alt="Replit Design canvas with Design selected in the top-left toggle and five PixelGames menu variants" data-path="images/pixelgames/mobile/design-step-1.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-1.png" />
    </Frame>
  </Step>

  <Step title="Describe what you want to Agent">
    Describe the result and Agent handles the rest. Ask for several versions at once to find a direction.

    <AiPrompt>
      {designPrompt}
    </AiPrompt>

    <PromptActions prompt={designPrompt} campaign="docs-mobile-design" />
  </Step>

  <Step title="Compare the versions">
    Agent lays them out side by side on the canvas, so you judge them as whole screens rather
    than one at a time.
  </Step>

  <Step title="Pick one and see where to take it">
    Select a design, then use the suggestions that appear next to it to try other variations.

    <Frame caption="A selected design, with suggested next steps beside it.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-2.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dba067f0c15dde736af003a7fd768185" alt="A selected PixelGames menu design with suggested next steps: integration, comparison, remix, and reimagining" data-path="images/pixelgames/mobile/design-step-2.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-2.png" />
    </Frame>
  </Step>

  <Step title="Build the version you want">
    Once a version is right, click the send icon in the toolbar above it. Agent takes that
    design off the canvas and builds it as a real screen in your app.

    <Frame caption="The send icon turns the selected design into a real screen.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-3.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=9006dbe90f73b24de3db94d75cadcd84" alt="A PixelGames menu design selected on the canvas with the send icon highlighted in the toolbar" data-path="images/pixelgames/mobile/design-step-3.png" width="1284" height="846" data-path="images/pixelgames/mobile/design-step-3.png" />
    </Frame>
  </Step>
</Steps>

## Troubleshooting

* **The change went further than you wanted:** ask Agent to revert it and describe a smaller
  change, one screen or one element at a time.
* **It looks right in preview, wrong on a phone:** name the device and what you saw, safe
  area and screen size handling are the usual causes.
* **A change keeps getting undone:** the same value may be set in more than one place, ask
  Agent where the styling for that screen actually lives.

## What's next

<CardGroup cols={2}>
  <Card title="Generate an app icon" icon="image" href="/build/mobile-app-icon">
    Design the icon players tap on their home screen.
  </Card>

  <Card title="Use iOS native components" icon="apple" href="/build/mobile-native-components">
    Pair a custom look with native alerts and menus.
  </Card>
</CardGroup>

## Related

* [Generate App Store screenshots](/build/mobile-store-screenshots)
* [Preview and test on your phone](/build/mobile-preview-testing)