Design
Converter valores de cor HSL para LAB para gerenciamento de cor com suporte de canal alfa
hsl-to-lab-converterDesign
Converte valores px do Figma para as unidades corretas de cada plataforma e gera um spec card para devs: pt do iOS (@1x/@2x/@3x com px renderizados por escala), dp/sp do Android (tabela de renderização mdpi…xxxhdpi e escala de fonte), rem/vw web com snippet clamp(); auditoria de alvos de toque mínimos (44pt iOS / 48dp Android / 44px e 24px WCAG) com classes de janela do Material e breakpoints do Tailwind.
figma-ios-android-pt-dp-sp-responsive-design-spec-cardDesign
Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis.
font-file-inspectorDesign
Visualize uma combinação de fontes para título e corpo com texto real, tamanhos, pesos, alturas de linha, caracteres e CSS.
font-pairing-preview-cardDesign
Cole um JSON de variáveis Figma / Tokens Studio e exporte para Tailwind, variáveis CSS shadcn, Style Dictionary ou SCSS. Preserva tokens de cor, espaçamento e fonte com inferência de tipo.
figma-tokens-exportDesign
Calcula o campo de visão da câmera a partir da distância focal e do tamanho do sensor, com cobertura da cena à distância.
field-of-view-calculatorDesign
Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
echarts-theme-token-extractorDesign
Gera uma assinatura de e-mail HTML limpa e pronta para copiar-colar que renderiza corretamente no Gmail, Outlook e Apple Mail — com avatar/logo, ícones sociais (auto-detectados dos seus links), cor de destaque, tema claro/escuro/auto e um layout em tabela seguro para e-mail com estilos inline. Copie o HTML e cole no seu cliente de e-mail.
email-signature-html-builderDesign
Adiciona efeitos de desfoque a imagens com intensidade ajustável e múltiplos tipos de desfoque
image-blurDesign
Ajuste os níveis de brilho da imagem com visualização em tempo real e controle preciso
image-brightnessDesign
Ajuste os níveis de contraste da imagem com controle preciso para clareza aprimorada
image-contrastDesign
Corte imagens para dimensões específicas ou proporção de aspecto com posicionamento personalizado
image-cropper