Siteprint
Siteprint · Programmation · Prompts
Siteprint mesure les couleurs, polices, espacements et mises en page de n'importe quel site dans un vrai navigateur, puis transforme le résultat en prompt, en DESIGN.md et en fichiers de thème pour les agents de code.
À propos de Siteprint
About
Qu'est-ce que Siteprint
Siteprint est un extracteur de design web. Vous collez une adresse, la page s'ouvre dans un vrai navigateur côté service et, au bout d'une vingtaine de secondes, vous obtenez la palette, la pile de polices, l'échelle typographique, les paliers d'espacement, les rayons d'angle, les ombres, les courbes d'accélération, les points de rupture, le logo et le framework. Tout est mesuré sur la page rendue, donc les valeurs décrivent ce que voit le visiteur, pas ce que promet la feuille de style.
Le problème résolu est la consigne que tout générateur assisté par IA finit par recevoir: fais comme ce site. Une capture d'écran transporte l'allure, pas les valeurs. L'agent devine les codes hex, les interlignes et les marges internes des boutons, et vous passez l'heure suivante à ajuster au pixel. Le passage du site web en prompt est le cœur du produit: Siteprint livre les valeurs exactes dans un prompt écrit pour Lovable, Claude Code ou Cursor, accompagné d'un fichier DESIGN.md qui présente le design comme une direction applicable à de nouvelles pages.
Deux limites comptent avant de commencer. Siteprint mesure un design, il ne le construit pas, et il vous faut donc toujours un agent ou une personne pour écrire le code. Et la version web lit la page depuis son serveur, ce qui veut dire que les sites qui bloquent les visites automatisées, les pages derrière une connexion ou une carte précise d'une page réclament l'extension Safari sur un Mac.
Premiers pas
- Ouvrez siteprint.app et collez l'adresse d'un site. Cette étape ne demande aucun compte.
- Attendez l'analyse. Siteprint ouvre le site dans un vrai navigateur, ce qui prend une vingtaine de secondes, puis remplit la page de valeurs mesurées.
- Lisez les sections qui vous intéressent: couleurs et leurs rôles, polices et styles de texte, espacements et formes, ombres et mouvement, points de rupture, ressources et technologie. Cliquez sur une valeur pour la copier.
- Pour le prompt de reconstruction et le DESIGN.md, connectez-vous et passez à Pro. Ouvrez Build with this design et collez le prompt dans Lovable, Claude Code ou Cursor.
- Si vous travaillez dans Safari sur Mac, installez l'extension pour analyser des pages derrière une connexion, une section isolée ou des sites qui refusent les visites automatisées, et laissez votre agent lire les analyses enregistrées via MCP.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Siteprint.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs front-end et créateurs indépendants
- Designers qui étudient un site de référence
- Fondateurs et équipes marketing qui savent décrire une allure mais pas le CSS
- Équipes qui gardent plusieurs produits visuellement cohérents
Tâches
- Reconstruire une page d'atterrissage dans un générateur IA
- Tirer des tokens de design d'un site qui vous plaît
- Aligner un projet existant sur une référence
Cas d'usage
- Passer un tableau de bord interne au style déjà validé par l'équipe
- Composition d'une nouvelle direction visuelle à partir de deux sites
- Audit de l'échelle typographique et du rythme d'espacement d'un concurrent avant une refonte
Fonctionnalités clés
Palette avec rôles
Siteprint liste toutes les couleurs de la page, séparées entre neutres et teintes, avec des valeurs HEX, RGB et HSL. Chaque analyse tient lieu de système de design pour la page: au-delà des couleurs, elle marque des rôles comme fond, surface, texte et atténué, pour que l'agent sache quel ton va où. Les variantes en mode sombre et les dégradés sont relevés à part quand le site en utilise.
Typographie et échelle de texte
Le panneau typographie nomme chaque famille, ses graisses, les fichiers chargés et leur provenance. Les styles de texte arrivent avec la taille, l'interligne, l'espacement des lettres et l'élément auquel ils s'appliquent. C'est la partie qu'une capture ne donne pas, et c'est souvent là qu'une reconstruction commence à dériver.
Espacements, formes et mouvement
Les paliers d'espacement, les rayons et les largeurs de contenu sont lus dans la mise en page rendue, pas déduits. Les ombres, les courbes d'accélération et les durées s'affichent avec un aperçu qui se joue au survol, ce qui aide quand un bouton semble juste sur le site de référence et faux dans votre version.
Prompt de reconstruction et DESIGN.md
Pro transforme une analyse en un prompt unique qui décrit la mise en page, le mouvement et les dimensions, au format du générateur IA que vous indiquez. Le fichier DESIGN.md présente le même design comme une direction et non comme une page figée, si bien que l'agent peut l'appliquer à des écrans qui n'existent pas encore sur le site de référence.
Exports et tokens de design
En plus du prompt, Siteprint exporte une configuration Tailwind v4, des thèmes shadcn/ui, des variables CSS et un fichier de tokens. Chaque couleur et chaque style de texte est nommé et placé, ce qui épargne la passe de renommage manuel qui mangerait sinon une après-midi.
Accès de l'agent via MCP
L'extension Safari lance un serveur MCP de design local avec trois outils: list_designs, get_design et get_reference_image. Claude Code, Cursor, Codex ou n'importe quel client MCP peuvent lire une analyse enregistrée sous forme de prompt, de design, de mise en page, de configuration Tailwind, de thème shadcn, de CSS ou de JSON. Sur la version web, vous connectez l'agent depuis la Library, et avec l'extension les fichiers ne quittent pas votre machine.
Match your build
Collez l'adresse de votre propre version et Siteprint la compare au site de référence. La sortie est une liste de corrections et un prompt qui rapproche votre page de l'original, plus utile qu'un diff de codes hex quand la mise en page s'écarte de quelques pixels.
Avantages et inconvénients
Avantages
- Inspection gratuite d'autant de sites que vous voulez, avec copie au clic et sans inscription.
- Les valeurs viennent d'un rendu réel, donc elles incluent des styles calculés qu'un HTML statique ne montre pas.
- Le prompt de reconstruction cite nommément Lovable, Claude Code, Cursor et d'autres agents, ce qui réduit le travail d'écriture de prompt à la main.
- L'extension Safari lit les pages en local, donc les sites derrière une connexion et ceux qui bloquent les robots restent accessibles, et les analyses restent sur le Mac.
- Compose et la Library transforment des consultations ponctuelles en un jeu de références réutilisable.
Inconvénients
- Le prompt de reconstruction, le DESIGN.md et les exports sont réservés à Pro, donc l'offre gratuite répond à des questions sans rien livrer avec quoi construire.
- Chaque analyse web prend une vingtaine de secondes et échoue sur les sites qui bloquent les visites automatisées, ce qui pousse les utilisateurs de Mac vers l'extension payante.
- L'extension exige Safari sur macOS 14 ou plus récent, donc les utilisateurs de Windows et de Chrome n'ont que la voie serveur, plus lente.
- Il mesure et ne construit pas, la sortie reste donc une consigne que votre agent doit interpréter correctement.
Questions fréquentes
Inspecter un site est gratuit et ne demande aucun compte, couleurs, polices, espacements, ressources et technologie compris. Pro coûte 9 $ par mois ou 69 $ par an et ajoute le prompt de reconstruction, le DESIGN.md, les exports, le fond animé et Match your build. L'extension Safari s'achète à part, 19,99 $ en une fois.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Siteprint.
Alternatives à Siteprint
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.