PrismD
Connexion Éditeur Extraire un site
extraction sur rendu réel · v2.17.1

Le design réel, extrait. Jamais deviné.

Colle une URL : PrismD 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.

$
essayer sans coller :
86 marques extraites1 737 couleurs mesurées0 valeur inventée
Explorer la galerie Pourquoi « jamais deviné » ? Nouveau le mouvement aussi est extrait
PrismD — pipeline d’extraction re-jeu d’une extraction réelle
prismd — extraction
$ npx prism-design add stripe.com
lecture du DOM réel
recensement des couleurs
échelle typographique
rythme des espacements
regroupement des composants
audit des contrastes WCAG
capture des webfonts
export tokens.json · DTCG
Brand book prêt · DESIGN.md · tokens.json · clone▋
Résultat — stripe.com
Ouvrir la fiche complète DESIGN.md complet
Résultat de base gratuit — rapport complet, export & suivi dès $19, une foisRejoindre la liste d'attente

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.

Comment ça marche

Extraire. Lire. Repeindre.

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.

  1. rendu réel, mesuré au navigateur
    getComputedStyle() sur le rendu final
couleurs · typographie · espacements
rayons · ombres · transitions · layout
    Aucune capture n’est publiée pour cette extraction — les mesures ci-contre viennent du fichier, pas d’une image.
    01 / EXTRAIRE

    Le rendu réel, pas le code source

    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. DESIGN.md indisponible sur ce serveur.
    02 / LIRE

    Une charte écrite depuis les mesures

    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.

  3. Accents lus dans le catalogue d’extractions — aucune pastille décorative.

    03 / REPEINDRE

    Repeindre sans casser la structure

    L’éditeur repeint le clone par variables CSS, en direct : la structure reste, la peau change — vos couleurs, votre typo, export compris.

    Ouvrir l’éditeur
PrismD Motion

Le mouvement aussi est extrait

Les animations sont capturées sur le rendu réel — WAAPI, GSAP, CSS. Chaque spec est rejouable, chaque easing est le véritable, jamais fabriqué.

6 043 animations capturées, rejouables

Galerie Rejouer chaque animation capturée et copier son code tel quel. Texte animé Animer tes titres lettre à lettre, avec les timings mesurés. Mixeur Fusionner une lettre et une image en mini-animation. Import Capturer les animations d’une URL sur son rendu réel.
Emporte PrismD partout

Navigateur, terminal, agents : le même moteur.

L’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.

Extension Chrome

v0.8.2
  • Capture pleine pageDéfilement et assemblage automatiques — la page entière, pas seulement l’écran visible.
  • Enregistrement vidéo des animationsLes mouvements réels de la page, capturés tels qu’ils se jouent dans l’onglet.
  • Collecte d’assets cochableImages, fontes et vidéos recensées dans le panneau latéral — tu coches ce que tu gardes.
  • Sélection d’un élément à la sourisSurvole, clique : la section visée est isolée pour la capture.
  • Envoi direct vers le pipelineUpload sécurisé par jeton d’appareil, fichiers vérifiés côté serveur.

Pas encore publiée sur le Chrome Web Store — installation en mode développeur pour l’instant.

CLI et agents

prism-design
installe DESIGN.md + tokens.json dans ton projet
génère la charte de marque, avec PDF imprimable
lance le serveur MCP en stdio pour tes agents
Récupère le DESIGN.md — dépose-le là où tu construis
pour n'importe quel builder IALovablev0BoltFramerWebflowWordPressWix
ou n'importe quel agent de codeClaude CodeCursorCopilot

Serveur MCP intégré pour Claude Code, Cursor et Windsurf — tes agents appellent PrismD comme un outil.

tarifs

Un prix, une fois.
Aucun abonnement.

Trois paliers cumulatifs selon la richesse d’extraction dont tu as besoin. Le moteur reste open source et gratuit en local.

Le CLI est gratuit et le restera. Extraction locale sur ta machine, sans compte ni quota serveur.
npx prism-design add <site>
P1

DA Simple

$19une fois

Palette, typographie et tokens mesurés.

P2 le plus choisi

DA + Structure

$49une fois

DA complète + layout, blocs, breakpoints, états.

P3

FULL

$99une fois

Tout : layout, blocs, motion, images, guide agent.

Voir le détail des paliers & la liste d’attente

Paiement pas encore ouvert — la liste d’attente fige ton prix de lancement.

Manifeste

Mesuré, dérivé, inféré — jamais deviné

Chaque token affiche d’où il vient. À ce jour : 1 737 couleurs mesurées sur 86 marques — et ce qui n’est pas mesuré est annoncé.

Mesuré

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.

Dérivé

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.

Inféré

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

Deviné — IA classique

Couleurs un violet plausible, sorti des habitudes du modèle
Typo une fonte par défaut, tailles au jugé
Espacements des multiples de 8, par réflexe
Animations ease-in-out générique, durées au hasard

Mesuré — PrismD

Couleurs la valeur rendue, relevée canal par canal
Typo pile de fontes et corps lus sur la page vivante
Espacements échelle dérivée des gaps mesurés, formule incluse
Animations courbes et durées captées (WAAPI, GSAP) sur le site réel
La méthode en détail

La provenance est exportée token par token dans tokens.json — le doute ne se maquille pas.