Design
Converter valores de cor HEX para CMYK para impressão com suporte de canal alfa
hex-to-cmyk-converterDesign
Converter valores de cor HEX para LAB para gerenciamento de cor com suporte de canal alfa
hex-to-lab-converterDesign
Converter valores de cor HSL para CMYK para impressão com suporte de canal alfa
hsl-to-cmyk-converterDesign
Converter valores de cor HSL para LAB para gerenciamento de cor com suporte de canal alfa
hsl-to-lab-converterDesign
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-contrast