> ## 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.

# Concevez un site d'ouverture

> Transformez le plan de lancement du café en un design pour un site « ouverture prochaine ».

export const OpeningSiteDesignCover = () => <div className="chat-mkt" role="img" aria-label="A frosted design canvas with a website layout and image asset" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, .85fr)",
  gap: "clamp(12px, 2.4vw, 22px)",
  width: "min(720px, 84%)",
  minHeight: "inherit",
  alignItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  gap: 12,
  minHeight: "clamp(148px, 23vw, 198px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.6)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.12))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(6px)"
}}>
          <div style={{
  display: "flex",
  gap: 6
}}>
            {[".92", ".52", ".32"].map(opacity => <span key={opacity} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: `rgba(255,255,255,${opacity})`
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(0, 1fr) minmax(0, .8fr)",
  gap: 10
}}>
            <div style={{
  display: "grid",
  alignContent: "center",
  gap: 9
}}>
              <span style={{
  width: "76%",
  height: 12,
  borderRadius: 99,
  background: "rgba(255,255,255,.86)"
}} />
              <span style={{
  width: "94%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.46)"
}} />
              <span style={{
  width: "72%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.34)"
}} />
              <span style={{
  width: 48,
  height: 18,
  marginTop: 4,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            </div>
            <div style={{
  minHeight: 92,
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 12,
  background: "linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.18))"
}} />
          </div>
        </div>
        <div style={{
  display: "grid",
  gap: 10
}}>
          {["68%", "86%", "54%"].map((width, index) => <div key={width} style={{
  display: "grid",
  gridTemplateColumns: "18px minmax(0, 1fr)",
  alignItems: "center",
  gap: 9,
  padding: "clamp(9px, 1.5vw, 13px)",
  border: "1px solid rgba(255,255,255,.46)",
  borderRadius: 14,
  background: index === 0 ? "rgba(255,255,255,.29)" : "rgba(255,255,255,.12)",
  backdropFilter: "blur(5px)"
}}>
              <span style={{
  width: 18,
  height: 18,
  borderRadius: index === 1 ? 4 : 999,
  background: index === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.42)"
}} />
              <span style={{
  width,
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.7)"
}} />
            </div>)}
        </div>
      </div>
    </div>
  </div>;

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </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>;
};

<OpeningSiteDesignCover />

Vous comprenez la différence entre une conversation et un projet. Transformez
maintenant le plan de lancement du café en quelque chose que les gens peuvent
voir.

Demandez à Replit d'utiliser la conversation, la recherche et le plan de
lancement pour créer un site d'ouverture pour le café de quartier :

<AiPrompt>
  Conçois un site web « ouverture prochaine » pour mon café de quartier en
  utilisant le concept, la direction visuelle et le plan de lancement de cette
  conversation. Fais en sorte qu'il soit chaleureux, calme et accueillant.
  Inclus une courte introduction, le quartier, les mises à jour sur
  l'ouverture, et un moyen pour les gens de rester informés.
</AiPrompt>

## Créez et affinez le site d'ouverture

<Steps>
  <Step title="Passez en revue le premier site">
    Après quelques minutes, Replit transforme la direction de la conversation
    en un site d'ouverture. Passez en revue la première version avant de
    décider ce qu'il faut changer.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Aperçu du site d'ouverture du café avec les contrôles de publication dans Replit" />
  </Step>

  <Step title="Ouvrez Design">
    Avant de publier, personnalisez le site. Sélectionnez **Design** pour
    ouvrir le canvas de design.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-design.jpg" alt="Menu Design de Replit ouvert au-dessus d'un site de café « ouverture prochaine »" />
  </Step>

  <Step title="Passez en revue le design">
    Le canvas de design garde le site d'ouverture visible pendant que vous
    décidez ce qu'il faut ajuster ensuite.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/review-updated-site-design.jpg" alt="Design mis à jour du site d'ouverture du café avec une image de cappuccino générée dans la section hero" />
  </Step>

  <Step title="Explorez différentes mises en page">
    Utilisez les prochaines étapes suggérées pour essayer une mise en page
    différente ou affiner ce qui fonctionne déjà. Replit garde la première
    version disponible pendant que vous explorez.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/explore-design-directions.jpg" alt="Prochaines étapes suggérées de Replit Design pour réimaginer, essayer des mises en page, et affiner un site de café" />
  </Step>

  <Step title="Ajoutez un asset image">
    Sélectionnez **Generate**, puis choisissez **Image**. Décrivez l'asset
    dont vous avez besoin et où il apparaîtra. Ici, la demande porte sur une
    image de cappuccino pour le site du café.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-generate-menu.png" alt="Menu Generate dans le canvas de Replit Design avec les options Design, Image, Video, et Vector Graphic" />

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/write-image-request.png" alt="Prompt de génération d'image pour une image de cappuccino dans le canvas de Replit Design" />
  </Step>

  <Step title="Utilisez le nouvel asset dans le site">
    Lorsque l'image est prête, sélectionnez-la et demandez à Replit de
    l'utiliser dans la section hero. Continuez à affiner le site jusqu'à ce
    qu'il représente bien le café.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/replace-hero-image.jpg" alt="Image de cappuccino générée sélectionnée dans le canvas de Replit Design avec une demande de remplacement de l'image hero du site web" />
  </Step>

  <Step title="Prévisualisez le site avant de le publier">
    Ouvrez l'aperçu pour vérifier le site terminé. Une fois que vous en êtes
    satisfait, vous êtes prêt à publier.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Aperçu du site d'ouverture du café avec les contrôles de publication dans Replit" />
  </Step>
</Steps>

En savoir plus sur [la création d'un design](/create-a-design).

## Suivant

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/fr/home/publish-the-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">Publier</div>
    <div className="chat-card-title">Publiez le site</div>
    <p>Rendez le site d'ouverture disponible pour que les gens le visitent et le partagent.</p>
    <div className="chat-card-link">Continuer →</div>
  </a>
</section>