P1
DA Simple
$19une fois
Palette, typographie et tokens mesurés.
Extraits réels, publiés tels quels
10 marques au meilleur score de complétude — captures d’écran véritables
Colle une URL : Prism ouvre la page dans un vrai navigateur, mesure chaque couleur, chaque fonte, chaque animation — et t’en rend un dossier de design exploitable, prouvé au pixel.
Chaque valeur ci-dessus sort de getComputedStyle() sur stripe.com — colle ta propre URL plus haut pour voir la même chose sur ton site.
De l’URL au clone repeint, trois étapes — et zéro valeur inventée : tout part du rendu réel, mesuré dans un vrai navigateur.
Playwright ouvre la page dans un vrai navigateur et mesure ce qui est peint à l’écran : getComputedStyle() sur chaque nœud, couleurs composées, ombres, grilles, états de survol.
## 2. Color Palette & Roles ### Background & Surface - **Action** (`#ffffff`): Page background (primary) - **Surface** (`#e5edf5`): Surface / elevated background - **Surface** (`#f8fafd`): Surface / elevated background - **Off-White** (`#f5f5ff`): Surface / elevated background - **Snow** (`#ffe0d1`): Surface / elevated background ### Text & Content - **Pure Black** (`#000000`): Primary body text - **Deep Navy** (`#031323`): Secondary text - **Text** (`#061b31`): Secondary text - **Translucent Deep Purple (50%)** (`rgba(0, 14, 255, 0.5)`): Secondary text
Chaque extraction produit un DESIGN.md : couleurs nommées par rôle, typographie, composants, motion — rédigé depuis les valeurs mesurées, lisible par un humain comme par un agent.
Accents lus dans le catalogue d’extractions — aucune pastille décorative.
L’éditeur repeint le clone par variables CSS, en direct : la structure reste, la peau change — vos couleurs, votre typo, export compris.
Ouvrir l’éditeurLes animations sont capturées sur le rendu réel — WAAPI, GSAP, CSS. Chaque spec est rejouable, chaque easing est le véritable, jamais fabriqué.
3 575 animations capturées, rejouables
Preuves · 2 confrontations publiées
Chaque clone est confronté à l’original par similarité structurelle (SSIM). Les verdicts sont publiés — y compris les mauvais.
47/ 100 SSIM · après retouche
Publié tel quel : on ne cache pas les ratés.
Comparaison non publiée70/ 100 SSIM · après retouche
Publié tel quel : on ne cache pas les ratés.
Voir la comparaisonSSIM = similarité structurelle entre le screenshot du clone et l’original, 0–100 ; pixel = score de comparaison brute. Verdict par zone sur le score pixel (≥85 conforme · ≥60 à retravailler · sinon échec) ; verdict global : toutes les zones principales conformes → conforme, une en échec → échec, sinon à retravailler. Jamais rendu par le seul score pleine page.
Toutes les extractions, par catégorie ou par recherche. Ouvre-en une, repeins-la à ta marque.
getComputedStyle() sur le rendu réel101 marques affichées · triées par score de complétude, les 6 premières en grand
16 colors · 5 shadows · Inter
30 colors · 3 shadows · __greyCliff_21e86f
13 colors · 2 shadows · Manrope
27 colors · 3 shadows · mrs-eaves
25 colors · 1 shadows · Open Sans
4 colors · Inconsolata
35 colors · 4 shadows · SuisseIntl
14 colors · 6 shadows · Graphik
17 colors · 2 shadows · Nunito Sans
10 colors · 1 shadows · DM Sans
15 colors · 3 shadows · ABC Diatype
6 colors · Stanley
7 colors · Noto Serif JP
8 colors · Subset Cedrattextweb
25 colors · Montserrat
26 colors · 2 shadows · Pitch Regular
10 colors · SecondaryFont
8 colors · din-2014
27 colors · 4 shadows · Circular Std 500
9 colors · 1 shadows · Heebo
15 colors · 1 shadows · Balto
16 colors · 1 shadows · Vintage-Hand
17 colors · 4 shadows · accessibly
25 colors · Roboto
15 colors · 3 shadows · clearface
18 colors · 3 shadows · edict_displayregular
7 colors · Untitled Sans
4 colors · Radikal
7 colors · PP Editorial Sans Medium
16 colors · Sweet Sans Pro
5 colors · 1 shadows · Montserrat
21 colors · 2 shadows · Work Sans
10 colors · Roboto
14 colors · 2 shadows · Open Sans
12 colors · Lyon Display Web
66 colors · 18 shadows · Inter Variable
18 colors · 1 shadows · Roboto
11 colors · Josefin Sans
19 colors · Roboto
11 colors · 1 shadows · jura
33 colors · 5 shadows · Montserrat
21 colors · 5 shadows · optima
29 colors · 5 shadows · neueMontreal
12 colors · 3 shadows · Anek Bangla
17 colors · 1 shadows · Montserrat
32 colors · 4 shadows · Lato
13 colors · 7 shadows · Lato
13 colors · 7 shadows · Lato
21 colors · 1 shadows · Cardo
17 colors · 4 shadows · DM Sans
5 colors · Univers LT Pro 55
13 colors · 1 shadows · Helvetica Neue
25 colors · 2 shadows · Special Elite
24 colors · 7 shadows · object-fit: cover
12 colors · 1 shadows · Textes-Chartier
35 colors · 7 shadows · Pompiere
5 colors · Menlo
46 colors · 1 shadows · Roboto
19 colors · 1 shadows · Inter
50 colors · 8 shadows · Montserrat
29 colors · Helvetica Neue
22 colors · 8 shadows · Nunito Sans
29 colors · Lato
8 colors · helvetica neue
17 colors · 1 shadows · Montserrat-UltraLight
10 colors · DM Sans
29 colors · 6 shadows · open-sans
10 colors · Futura Pt Light (300)
38 colors · 6 shadows · Montserrat
22 colors · 1 shadows · メイリオ
29 colors · 6 shadows · poppins-light
17 colors · 3 shadows · Raleway
13 colors · 2 shadows · Varela Round
39 colors · 8 shadows · Roboto
14 colors · 4 shadows · Roboto
33 colors · Outfit
15 colors · 1 shadows · Segoe UI Historic
11 colors · Cabin
15 colors · メイリオ
24 colors · 6 shadows · Lora
18 colors · Inter
16 colors · 2 shadows · Inter
27 colors · 6 shadows · Inter
29 colors · 1 shadows · Inter
14 colors · 2 shadows · Inter
32 colors · 6 shadows · Inter
29 colors · 4 shadows · Inter
17 colors · 1 shadows · Inter
28 colors · 2 shadows · Inter
47 colors · 1 shadows · Inter
20 colors · 2 shadows · Inter
11 colors · 5 shadows · Inter
11 colors · 7 shadows · Inter
10 colors · 1 shadows · Inter
9 colors · Inter
21 colors · 2 shadows · Inter
16 colors · 2 shadows · Inter
23 colors · 1 shadows · InterL’extension capture ce que ton onglet voit vraiment, le CLI dépose le résultat là où tu construis, et le serveur MCP le sert directement à tes agents de code.
Pas encore publiée sur le Chrome Web Store — installation en mode développeur pour l’instant.
Serveur MCP intégré pour Claude Code, Cursor et Windsurf — tes agents appellent Prism comme un outil.
Trois paliers cumulatifs selon la richesse d’extraction dont tu as besoin. Le moteur reste open source et gratuit en local.
npx prism-design add <site>
Paiement pas encore ouvert — la liste d’attente fige ton prix de lancement.
Manifeste
Chaque token affiche d’où il vient. À ce jour : 2 194 couleurs mesurées sur 101 marques — et ce qui n’est pas mesuré est annoncé.
Lu par getComputedStyle sur le rendu réel, dans un navigateur qui exécute le JavaScript de la page.
ex. la couleur d’un bouton telle qu’elle est peinte à l’écran, après cascade et compositing.
Calculé à partir de valeurs mesurées, avec une formule traçable — jamais un ordre de grandeur.
ex. l’échelle d’espacement xs–xl, déduite des gaps réellement rendus.
Proposé quand rien n’est observable, et annoncé comme tel — jamais glissé en silence.
ex. le rôle sémantique d’une couleur, étiqueté « inféré » dans le fichier exporté.
La provenance est exportée token par token dans tokens.json — le doute ne se maquille pas.