---
title: "Créer un site à partir d'un site que vous aimez | Briks"
url: https://briks.dev/fr/docs/build-from-sites-you-like
description: "Ajoutez un site et jusqu'à six captures. Briks lit sa mise en page, sa typo, ses animations et ses menus, puis crée le vôtre dans cet esprit, sans copier."
last_updated: 2026-10-08
---

# Créer un site à partir d'un site que vous aimez

Si vous avez vu un site dont la mise en page ou l'esprit vous plaît, indiquez-le à Briks. Briks étudie comment la page est composée et construit la vôtre dans cet esprit, avec vos propres mots et images. Cette page explique comment ajouter un site et des captures d'écran, ce que Briks lit et ne prend jamais, et que faire quand un site ne peut pas être lu.

7 minutes de lecture Vérifié par rapport au studio le 8 octobre 2026

## Ajouter des sites et des captures d'écran

1. Ouvrir l'étape

   Où : Show what you like

   C'est la troisième étape de New project, marquée **Optional**. Le panneau explique à quoi elle sert : « Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business. »

2. Ajouter un site

   Où : A site to learn from

   Saisissez ou collez une adresse et appuyez sur **Add** ou sur Entrée. Vous pouvez omettre le https. Chaque projet accepte un site ; un second affiche « One site per project. Remove it to add another. » Le site apparaît sous forme d'étiquette avec une croix pour le retirer.

3. Ajouter des captures d'écran

   Où : Screenshots

   Appuyez sur **Add screenshots** et choisissez des fichiers JPEG, PNG ou WebP de moins de 12 Mo chacun. Le compteur indique combien vous en avez, jusqu'à **6 of 6**.

4. Dites ce que montre chaque capture d'écran

   Où : Screenshots

   Choisissez **Whole page** et, si vous le savez, l'écran sur lequel elle a été prise : **Desktop**, **Tablet** ou **Phone** (**Screen size: detect** le détermine). Ou choisissez **One section** et sélectionnez la partie montrée, comme le hero, les tarifs, les témoignages ou le pied de page.

5. Passer à la suite

   Où : Show what you like

   Appuyez sur **Next**. Le récapitulatif affiche l'adresse du site et compte vos captures d'écran.

Vous pouvez aussi apporter un site depuis la zone de briks.dev avant de vous inscrire : ouvrez le menu **+**, choisissez **Add a site you like**, et il arrive à cette étape après l'inscription.

## Ce que Briks lit

Un site est lu en largeur d'ordinateur, de tablette et de téléphone, après que Briks a répondu à toute bannière de cookies et fermé les fenêtres contextuelles. La vérification porte sur :

- **Mise en page :** les sections de haut en bas, la largeur du contenu, les colonnes et ce qui change sur un téléphone.
- **Spacing:** le rythme entre les sections et à l'intérieur de celles-ci.
- **Type :** les tailles et graisses des titres et du texte, et le caractère des polices.
- **Couleur :** l'arrière-plan, la couleur du texte et la couleur d'accent.
- **Motion:** ce qui apparaît en fondu ou en glissement au défilement, ce qui reste fixe, les rangées qui bougent seules, et ce que font les liens et boutons quand on les survole.
- **L'en-tête et son menu :** une simple rangée de liens, des menus déroulants ou de grands panneaux. Chaque panneau est ouvert et examiné.
- **Illustrations :** si la page utilise des dessins plutôt que des photographies, vos images sont dessinées dans un style similaire.

Une capture d'écran apprend moins à Briks : la mise en page et l'alignement, les espacements, la taille du titre, les couleurs et si le fond est clair ou sombre. Une capture marquée **One section** ne vaut que pour cette section.

## Ce qu'il ne prend jamais

Le panneau l'explique simplement : « One site per project. We measure its structure, rhythm and type. Nothing is copied. » Concrètement :

- **Les mots.** Avant la publication, Briks vérifie que votre site ne reprend pas de phrases du site que vous aimez, et réécrit celles qu'il trouve dans la voix de votre entreprise. Les phrases venant de votre propre brief sont laissées telles quelles.
- **Logos et noms.** Votre en-tête affiche votre nom, votre logo téléversé ou un symbole dessiné.
- **Images.** Les vôtres viennent de la bibliothèque du studio, sont dessinées pour vous, ou sont celles que vous ajoutez.
- **Autres entreprises.** Une rangée de logos de clients ou de partenaires n'affiche que les noms que vous fournissez.

Les questions posées avant la création sont rédigées à partir de votre brief et de l'adresse seuls, jamais à partir du texte de l'autre site.

## Un site, des captures d'écran, ou les deux

La fidélité de Briks à un site dépend de ce que vous lui donnez d'autre.

| Ce que vous ajoutez | Ce que fait Briks |
| --- | --- |
| Un site et rien d'autre | Cette page définit l'ordre des sections de votre page d'accueil, conçu pour votre activité |
| Un site et des captures d'écran | Ils guident ensemble la construction, si bien que le site ne fixe plus l'ordre ; une capture d'écran d'une section décide de cette section |
| Captures d'écran uniquement | Elles guident la mise en page et le style ; la capture d'écran d'une section décide de cette section |
| Réglages dans **Your brand** | Elles l'emportent sur chaque référence : votre accent reste donc le vôtre, même si le site que vous aimez est vert |

Désignez la page exacte

Briks lit la page située à l'adresse que vous donnez, pas le site entier. Si c'est une page de tarifs qui vous plaît, collez l'adresse de cette page plutôt que celle de la page d'accueil.

## Comparer la création au site

Une fois un site ajouté, l'étape affiche aussi **Measure the build against the reference**, désactivé par défaut. Activé, Briks compare la page construite avec le site que vous aimez avant de publier et corrige les écarts qu'il mesure. Cela ne s'applique que si le site est votre seule référence, sans captures d'écran, car c'est alors que votre page suit sa mise en page. Cela ajoute des crédits et du temps à la construction : laissez-le désactivé, sauf si une ressemblance fidèle compte pour vous. Vous pourrez le modifier plus tard dans **Preferences** sous le nom **Measure builds against the reference**.

## Comment un site modifie le reste de la configuration

- **Pas de style ni de section d'accueil à choisir.** L'étape **How it is built** indique « Your reference site decides the look and the hero, so there is none to choose. » Sur briks.dev, **Pick a look first** se désactive avec « The site you like sets the look. » Voir [Choisir un style](https://briks.dev/fr/docs/pick-a-look).
- **Moins de questions.** Briks ne pose pas de questions sur la mise en page, l'apparence ou ce qui ouvre la page, car le site y répond.
- Les **tableaux de bord** peuvent aussi prendre une référence. Briks lit l'écran pour repérer sa navigation (une barre latérale ou une barre du haut) et le nombre de panneaux, de tableaux et de graphiques qu'il contient. La plupart des tableaux de bord sont derrière une connexion : une capture d'écran est donc généralement le moyen d'en montrer un.

Pendant la construction, la conversation affiche un encadré intitulé **What your references decided**, qui liste ce que chaque référence a tranché : la largeur du contenu, le rythme, le menu de l'en-tête, la façon dont les éléments bougent.

## Quand un site ne peut pas être lu

La plupart des pages publiques se lisent bien. Voici les raisons habituelles pour lesquelles ce n'est pas le cas :

- **Elle est derrière une connexion.** Briks voit ce que voit un visiteur non connecté. Utilisez des captures d'écran pour tout ce qui se trouve derrière une connexion.
- **Il refuse les visiteurs automatisés.** Certains sites répondent par une vérification anti-robot au lieu de la page. Briks essaie une seconde voie d'accès, et si elle est bloquée aussi, le site est ignoré.
- **Les bannières de cookies et les pop-ups** posent rarement problème, car Briks répond à la bannière et ferme les pop-ups avant de regarder.

Si le site ne peut pas être lu mais que vos captures d'écran le peuvent, la création se poursuit sans lui et la zone indique « 1 reference could not be read and was skipped. » Si rien de ce que vous avez ajouté ne peut être lu, la création s'arrête plutôt que de concevoir un site que vous n'avez pas demandé. Une création qui s'arrête ainsi n'est pas débitée, et la réservation vous est rendue. Ce que dit le studio dépend de la raison :

| Ce que dit le studio | Que faire |
| --- | --- |
| "The reference address couldn't be opened." et "Nothing was charged." | Appuyez sur **Build without it** pour construire la même demande avec vos mots et vos réponses tels quels, en bloquant de nouveau les crédits d'un nouveau projet. Ou appuyez sur **Remove it**, qui ouvre **Reference site** dans **Preferences**, où **Remove** retire l'adresse. |
| Le site de référence a refusé l'accès au navigateur du studio, il n'a donc pas pu être lu. Veuillez essayer une autre référence. | Démarrez un nouveau projet avec des captures d'écran de la page sous **Screenshots**, ou avec un autre site. |
| "Votre référence n'a pas pu être lue en raison d'une erreur système. Veuillez réessayer plus tard." | Appuyez sur **Try again** plus tard. Vos mots et vos réponses sont conservés, les questions ne sont donc pas reposées. Ou saisissez du texte dans la zone de saisie pour relancer avec vos nouveaux mots ajoutés. |

Le groupe **Reference site** dans **Preferences** affiche l'adresse jusqu'à la première publication du site, pour que vous puissiez vérifier qu'elle a été enregistrée comme vous l'entendiez.

Où

1. Projects
2. Your project
3. Settings
4. Preferences
5. Reference site

## Exemples concrets

Un site Un cabinet dentaire qui aime le calme d'un hôtel

> Brief : un cabinet dentaire familial à Harrogate avec quatre dentistes, ouvert le samedi matin, avec un formulaire de demande. Site ajouté : la page d'accueil d'un petit hôtel que le propriétaire a trouvé calme et spacieux. Rien d'autre.

La page d'accueil du cabinet suit l'ordre et les espacements généreux de la page de l'hôtel, avec les mots, les soins et les images du cabinet. Le nom, les photos et les textes de l'hôtel n'apparaissent nulle part.

Un site et une capture d'écran Un torréfacteur de café avec un site et une capture d'écran

> Site : une torréfaction dont le menu s'ouvre sur de grands panneaux. Capture d'écran : la grille de produits d'une boutique, marquée **One section** avec des produits choisis. **Your brand** : couleur d'accent `#B4542D`.

Avec une capture d'écran ajoutée, la page de la torréfaction ne dicte plus l'ordre des sections. Son menu en panneau est repris, la section produits suit la capture d'écran, et la couleur d'accent propre au torréfacteur l'emporte sur les couleurs de la référence.

## Questions fréquentes

### Puis-je ajouter une référence une fois le site construit ?

Oui, sous forme d'image. Dans la zone de saisie du studio, joignez une capture d'écran, laissez-la marquée **Reference**, et dites ce qu'il faut en retenir : `Make the pricing section feel like this, three columns with the middle one raised.`

### Puis-je donner un site qui demande un mot de passe ?

Pas vraiment. Briks ne voit que la page publique. Faites plutôt des captures d'écran et ajoutez-les sous **Screenshots**.

### Pourquoi ne puis-je plus choisir un style ?

Un site que vous aimez détermine le style. Retirez-le dans **Show what you like** si vous préférez choisir parmi trois planches.

## À lire ensuite

- [Génération en cours **Démarrer un nouveau projet** Chaque choix de la page Nouveau projet, pas à pas : type de projet, brief, site que vous aimez, marque, images, options de création et coût du départ.](https://briks.dev/fr/docs/new-project)
- [Génération en cours **Choisissez un style** Voyez trois styles avant la création de votre site : couleurs, typographie, angles, bouton et cartes sur vos mots d'accroche. Puis créez celui de votre choix.](https://briks.dev/fr/docs/pick-a-look)
- [Génération en cours **Bien rédiger son brief** Que mettre dans un brief pour réussir la première version : activité, public, pages, action principale, faits et ton, avec six exemples avant et après.](https://briks.dev/fr/docs/writing-a-brief)
- [Génération en cours **Applications web et tableaux de bord** Application et Tableau de bord : ce qu'ils créent, où vivent les données, ce qui n'existe pas encore, avec exemples : réservations, stock, commandes d'un café.](https://briks.dev/fr/docs/web-apps-and-dashboards)

Toujours bloqué ?

Écrivez à [hello@briks.dev](mailto:hello@briks.dev) en indiquant le nom de votre projet et ce que vous espériez voir. Une capture d'écran aide.