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

# Créer votre design system

> Extrayez vos couleurs, votre typographie et vos tokens dans un design system enregistré, puis placez vos applications existantes sous ce système.

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>;
};

Votre marque vit dans un dossier Drive, un fichier Figma ou un design que vous aimez déjà.
Transformez-la en un design system enregistré dans votre espace de travail : des couleurs
par rôle, une échelle typographique, des tokens et quelques composants d'exemple. Les
nouveaux travaux démarrent alors aux couleurs de votre marque, et vous pouvez reconstruire
vos applications existantes sous le même système. Appliquer un système à une application
déjà livrée est une vraie reconstruction, pas un simple changement de feuille de style.

## Idéal pour

* Les product designers qui ont besoin d'une source de vérité unique avant de concevoir les cinq prochaines pages.
* Les fondateurs dont les applications ont fini par diverger et qui veulent les remettre toutes dans la même apparence.

## Connecteurs

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, couleurs, typographie et charte de marque",
},
{ id: "figma", name: "Figma", why: "Un design existant à partir duquel extraire" },
]}
/>

## Avant de commencer

Rassemblez tout ce qui définit votre marque, où que cela se trouve aujourd'hui : fichiers
de marque, un design que vous aimez déjà, votre site web ou un fichier Figma. Connectez
Drive si votre logo, vos couleurs ou votre typographie y sont stockés. Ayez à portée de
main une URL Figma, une URL de site ou un fichier `DESIGN.md` existant si vous en avez un.

## Donner le prompt à l'agent

<AiPrompt>
  Crée un design system pour \[marque] à partir des fichiers de marque de ce
  dossier Google Drive \[lien] et de ce fichier Figma \[URL]. Extrais la palette par
  rôle, l'échelle typographique et les tokens. Inclus le logo.
</AiPrompt>

## À quoi s'attendre

Agent transforme la source que vous lui avez donnée en [guide de style vivant](/fr/design/design-md) :
vos couleurs avec un rôle pour chacune, une échelle typographique, les tokens auxquels le
reste du système fait référence, deux ou trois composants d'exemple et les éléments de
marque que vous avez fournis. Examinez-le, puis sélectionnez **Save design system** pour le
conserver dans votre espace de travail. À partir de là, les nouveaux travaux sont générés
aux couleurs de votre marque dès le premier cadre.

Pour placer une application déjà construite sous le système, sélectionnez la cible et
[appliquez le système](/fr/design/apply-design-system).

## Adaptez-le à vos besoins

<AiPrompt>
  Étends le design system avec davantage de composants d'exemple : boutons,
  champs de formulaire, navigation, cartes, tableaux et états vides.
</AiPrompt>

<AiPrompt>
  Ajoute un mode sombre au système : mêmes tokens, un second jeu de valeurs de
  couleur par rôle.
</AiPrompt>

## Dépannage

<AccordionGroup>
  <Accordion title="Le système ne ressemble pas à votre marque">
    Pointez vers une source au lieu de la décrire. Un dossier de marque Drive,
    une URL Figma, un site en ligne ou un fichier `DESIGN.md` fonctionnent tous
    comme entrée.
  </Accordion>

  <Accordion title="L'application est plus lente que prévu">
    Appliquer un système à un travail existant régénère la couche de style au
    lieu de remplacer une feuille de style. L'avertissement sur la durée et les
    crédits affiché avant le lancement est normal.
  </Accordion>

  <Accordion title="Les nouvelles modifications retombent dans l'ancien style">
    Les modifications suivantes devraient continuer à utiliser le système.
    Quand vous repérez une dérive, signalez-la dans le chat et nommez l'écran.
  </Accordion>

  <Accordion title="Vous ne pouvez pas réutiliser le système dans un autre projet">
    Enregistrez-le d'abord. Un guide de style non enregistré reste dans le projet
    où il a été généré.
  </Accordion>
</AccordionGroup>

## Voir aussi

<CardGroup cols={2}>
  <Card title="Concevoir une landing page" href="/fr/use-cases/design-landing-page">
    Mettez le système enregistré au travail sur une page de liste d'attente ou de lancement.
  </Card>

  <Card title="Refondre votre site web existant" href="/fr/use-cases/redesign-your-website">
    Extrayez le système du site que vous avez déjà.
  </Card>
</CardGroup>