À propos du projet

designlang (dépôt manavarya09/design-extract, paquet npm designlang) est un CLI open-source sous licence MIT, nécessitant Node 20+, qui utilise un navigateur headless pour extraire un système de design depuis n'importe quelle URL en direct. Il génère 17+ fichiers dans ./design-extract-output, dont un markdown de langue design en 19 sections, des tokens W3C DTCG avec couches primitive, sémantique et composite, une config Tailwind, des variables thème shadcn/ui, des JSON Variables Figma, des propriétés CSS custom, des stubs d'anatomie de composants React typés, des tokens motion, un JSON de voix de marque, et des prompts prêts à l'emploi pour v0, Lovable, Cursor et Claude Artifacts. Il écrit aussi une charge utile serveur MCP et peut s'exécuter comme serveur MCP. Au-delà de l'extraction de tokens sur une seule page, il propose la capture de système de layout (grilles, flex, largeurs de conteneur, espacements), un crawling responsive à quatre breakpoints, la capture des états d'interaction (hover/focus/active), la capture motion runtime via document.getAnimations() pour durées, chorégraphie/décalage, et recettes de scroll, le crawling multi-pages avec réconciliation tokenisée partagée versus spécifique aux routes, l'audit de contraste WCAG 2.1 avec suggestions de palette corrective, des cartes z-index, la détection de gradients, la déduplication SVG, la détection de polices, la classification image-style, le stack fingerprinting, l'audit santé CSS, la classification sémantique des régions (nav, hero, pricing, témoignages, CTA, footer), et le regroupement de composants réutilisables. Les commandes incluent : designlang URL pour extraction complète ; site pour système canonique global et note de cohérence ; grade pour un rapport HTML partageable et badge SVG ; battle pour notation comparative ; remix pour redessiner dans des vocabulaires tels que brutaliste, suisse, art-déco, cyberpunk, soft-ui, éditorial ; pack pour regrouper les sorties ; theme-swap pour rotation hue OKLCH autour d'un nouveau primaire ; brand pour un livre de guidelines marque en 13 chapitres ; pair pour fusionner deux designs ; dna pour positionner un design dans un espace à 30 fonctionnalités contre un corpus ; dna-corpus pour construire un corpus référence personnalisé ; fidelity pour noter un clone visuellement et motion par rapport à l'original avec plan correction ; gallery pour galerie statique ; clone pour starter Next.js ; apply pour écrire tokens dans un framework détecté ; drift, lint et visual-diff pour contrôles CI-ready ; sync, history, watch, diff pour monitoring et comparaison. Les émetteurs multi-plateformes ajoutent iOS SwiftUI, Android Compose, Flutter et WordPress. Une extension Chrome (MV3, activeTab) offre un transfert en un clic. Installable globalement via npm ou en tant que skill agent, et fourni comme plugin Claude Code avec slash commands. --smart classification optionnel utilisant Atlas Cloud ou clés OpenAI/Anthropic existantes. Le README note un fonctionnement déterministe gratuit pour l'extraction site et que le scoring design évite de substituer des mesures manquantes. C'est un projet design-tooling / developer-tooling utile pour audits design-system, génération tokens, revue accessibilité, workflows design-to-code, et mesure fidélité clone.