Le livrable de Prism est un dossier de design lisible par un humain et par un agent : un narratif complet, des tokens avec leur provenance, et des preuves. Voici comment il est fabriqué.
Playwright photographie la page entière — desktop 1440 px et mobile 390 px, section par section.
getComputedStyle() sur chaque nœud du DOM réel, custom properties comprises — les valeurs peintes, pas les classes.
type de page, grilles, dimensions, navigation, composants, animations — la structure, pas juste les couleurs.
couleurs, typo, espacements, rayons, ombres — chaque token porte sa provenance : mesuré, dérivé ou inféré.
le narratif lisible par un humain et exploitable par un agent : thème, règles, do’s & don’ts, guide d’usage.
le code généré est re-photographié et confronté à l’original (SSIM) — le verdict est publié, bon ou mauvais.
Les intitulés ci-dessous sont les headings réels du DESIGN.md de stripe.com — pas une liste marketing.
Lu par getComputedStyle sur la page vivante, après cascade et compositing.
Calculé depuis des valeurs mesurées, formule traçable — jamais un ordre de grandeur.
Proposé quand rien n’est observable — et étiqueté comme tel dans l’export.
Preuve sur cette page même : l’accent #0066ff ci-dessus vient de extractions/framer.com/tokens.json#colors.accent.primary, cité dans v4/tokens.js — le pipeline documente sa propre couleur de marque.