Sobre o projeto

designlang (repositório manavarya09/design-extract, pacote npm designlang) é um CLI open-source, licenciado MIT, que requer Node 20+ e usa navegador headless para extrair sistemas de design de qualquer URL ao vivo. Emite mais de 17 arquivos em ./design-extract-output, incluindo markdown de design-language com 19 seções, tokens W3C DTCG com camadas primitiva, semântica e composta, config Tailwind, variáveis de tema shadcn/ui, JSON de variáveis Figma, propriedades CSS customizadas, stubs tipados de anatomia de componentes React, motion tokens, JSON de voz da marca e prompts prontos para v0, Lovable, Cursor e Claude Artifacts. Escreve também payload de servidor MCP e pode rodar como servidor MCP. Vai além da extração single-page: captura sistema de layout (grids, flex, larguras, gaps), crawling responsivo em quatro breakpoints, captura de interaction states (hover/focus/active), motion runtime via document.getAnimations() para durações, choreography/stagger e scroll recipes, crawling multi-page com reconciliação de tokens compartilhados versus route-specific, pontuação WCAG 2.1 com sugestões de paleta de correção, mapas z-index, detecção de gradientes, deduplicação SVG, detecção de font-files, classificação image-style, stack fingerprinting, auditoria de saúde CSS e classificação semântica de regiões (nav, hero, pricing, testimonials, CTA, footer). Comandos incluem: designlang URL para extração completa; site para sistema canônico e nota de consistência; grade para relatório HTML e badge SVG; battle para grading head-to-head; remix para restyling em vocabulários como brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial; pack para empacotar saídas; theme-swap para rotação hue OKLCH; brand para livro de 13 capítulos de brand-guidelines; pair para fusionar dois designs; dna para posicionar design em espaço de 30 features contra corpus; dna-corpus para construir corpus personalizado; fidelity para score visual e motion de clone; gallery para galeria estática; clone para gerar Next.js starter; apply para写入 tokens em framework detectado; drift, lint, visual-diff para checks CI-ready; sync, history, watch e diff para monitoramento. Emissores multi-plataforma: iOS SwiftUI, Android Compose, Flutter, WordPress. Extensão Chrome MV3 activeTab para handoff one-click. Instalável globalmente via npm, como agent skill ou plugin Claude Code com slash commands. Classificação --smart opcional via Atlas Cloud ou chaves OpenAI/Anthropic. O README indica operação determinística e gratuita para extração, e que design scoring evita substituir medições ausentes. Projeto útil para design-system audits, token generation, acessibilidade, design-to-code workflows e clone fidelity measurement.