Cadres d'appareils génériques sans marque : 7 cadres, clair et sombre (SVG, PNG et outil de pose)

Ces cadres servent aux designers UI, aux développeurs et à toute personne qui doit montrer une interface dans son contexte : un portfolio, une étude de cas, une présentation client, une page de vente ou un visuel de réseau social. Vous posez une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur ou de fenêtre de navigateur, et vous obtenez une image propre, sans logo ni nom d’appareil. Aucun logiciel de design n’est nécessaire : un outil de pose, livré sous forme de page HTML, fait l’assemblage dans votre navigateur.

Les cadres sont volontairement génériques. Ils ne copient aucun appareil du commerce : la caméra est un petit point placé dans la bordure, il n’y a ni encoche ni îlot dans l’écran, et la fenêtre de navigateur est un cadre neutre. Le dessin est en aplats, sans reflet, sans dégradé ni ombre.

• 7 cadres :
  • un téléphone en portrait (phone-portrait) et en paysage (phone-landscape) ;
  • une tablette en portrait (tablet-portrait) et en paysage (tablet-landscape) ;
  • un ordinateur portable (laptop) ;
  • un écran de bureau sur pied (monitor) ;
  • une fenêtre de navigateur (browser).
• 2 thèmes pour chaque cadre, clair (light) et sombre (dark).
• 14 fichiers SVG : chaque cadre dans chaque thème.
• 28 fichiers PNG transparents : les mêmes cadres en 1x et en 2x.
• 1 outil de pose hors ligne (pose/index.html) : déposez une capture, choisissez le cadre, le thème, l’ajustement, l’échelle et le fond, puis téléchargez le PNG.
• Le tableau des zones d’écran (docs/screen-areas.md, en anglais et en français) et le même relevé pour les scripts (frames.json).

Organisation de l’archive :

svg/<cadre>-<thème>.svg
png/1x/<cadre>-<thème>.png
png/2x/<cadre>-<thème>.png
pose/index.html
docs/screen-areas.md
frames.json

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Ce que les cadres font, et ne font pas

• La zone d’écran est exacte. Pour chaque cadre, le tableau de docs/screen-areas.md donne la taille de la toile, la position de l’écran, sa taille et le rayon de ses coins, en pixels à 1x ; les PNG 2x doublent chaque valeur. L’écran est un trou : les SVG et les PNG sont transparents à l’intérieur, et une capture placée dessous apparaît à travers, coins arrondis compris.
• La caméra est dans la bordure. Aucun cadre n’a d’encoche, d’îlot ni de perçage dans l’écran : toute la surface de l’écran reste à votre capture.
• Le navigateur est un cadre de fenêtre générique : une barre avec les boutons précédent, suivant et recharger et un champ d’adresse vide. Il n’a ni onglets, ni pastilles de fenêtre, ni logo.
• Les aperçus de cette page montrent des écrans d’exemple inventés, posés avec l’outil. Ils ne sont pas dans l’archive : vous y posez vos propres captures.

Comment l’utiliser

1. Ouvrez pose/index.html dans un navigateur récent. L’outil fonctionne hors ligne et n’envoie rien. Son interface est en anglais.
2. Déposez une capture sur le panneau, ou cliquez dessus pour choisir un fichier.
3. Choisissez le cadre, le thème, l’ajustement (remplir l’écran, montrer toute l’image ou garder le haut d’une page longue), l’échelle 1x ou 2x et le fond, transparent ou coloré.
4. Téléchargez le PNG.

Pour un résultat au pixel près, capturez votre interface aux dimensions d’écran du tableau, ou au double pour l’export 2x. Dans un outil de design, placez la capture sous le cadre SVG et servez-vous de la forme screen, présente dans chaque SVG, comme masque.

Fabrication et IA

Les cadres SVG, l’outil de pose, les scripts et les écrans d’exemple des aperçus ont été produits avec un assistant d’IA, puis relus et contrôlés : recette mesurée sur chaque fichier (zone d’écran, coins, PNG comparés aux SVG, exports de l’outil de pose vérifiés au pixel près) et relecture humaine des planches. Aucune image n’a été produite par un générateur d’images : les PNG sont rendus depuis les SVG.

• SVG : la source de chaque cadre, sans texte ni police embarquée. Les fichiers SVG s’utilisent dans la plupart des outils de design et des éditeurs vectoriels.
• PNG 1x et 2x (transparent) : prêts à poser sous une capture dans les logiciels de présentation, de traitement de texte ou de retouche, ou dans une page web.
• HTML (outil de pose hors ligne) : une seule page, à ouvrir dans un navigateur récent, sans installation ni connexion.
• JSON : frames.json décrit chaque cadre (toile, zone d’écran, rayons, fichiers) pour automatiser une pose dans vos propres scripts.

Les cadres sont livrés sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Utiliser ou créer n’importe quel mockup avec un plugin dédié
• Choisir ses plugins par tâche, mockups compris

1.0.0 (11 novembre 2026) : première version.