Design
Convertir valores de color HSL a LAB para gestión de color con soporte de canal alfa
hsl-to-lab-converterDesign
Convierte valores px de Figma a las unidades correctas por plataforma y genera una spec card para desarrolladores: pt de iOS (@1x/@2x/@3x con px renderizado por escala), dp/sp de Android (tabla de renderizado mdpi…xxxhdpi y escala de fuente), rem/vw web con snippet clamp() fluido; audita objetivos táctiles mínimos (44pt iOS / 48dp Android / 44px y 24px WCAG) y anota clases de ventana de Material y breakpoints de Tailwind.
figma-ios-android-pt-dp-sp-responsive-design-spec-cardDesign
Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables.
font-file-inspectorDesign
Previsualiza una combinación de fuentes para título y cuerpo con texto real, tamaños, pesos, interlineado, caracteres y CSS.
font-pairing-preview-cardDesign
Pega un JSON de variables de Figma / Tokens Studio y exporta a Tailwind, variables CSS shadcn, Style Dictionary o SCSS. Conserva tokens de color, espaciado y fuente con inferencia de tipos.
figma-tokens-exportDesign
Calcula el campo de visión de una cámara a partir de la focal y el tamaño del sensor, con cobertura de escena a distancia.
field-of-view-calculatorDesign
Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano.
echarts-theme-token-extractorDesign
Genera una firma de correo HTML limpia y lista para copiar-pegar que se ve correctamente en Gmail, Outlook y Apple Mail — con avatar/logo, iconos sociales (auto-detectados desde tus enlaces), color de acento, tema claro/oscuro/auto, y un diseño basado en tablas con estilos en línea seguro para correo. Copia el HTML y pégalo en tu cliente.
email-signature-html-builderDesign
Añade efectos de desenfoque a imágenes con intensidad ajustable y múltiples tipos de desenfoque
image-blurDesign
Ajusta los niveles de brillo de la imagen con vista previa en tiempo real y control preciso
image-brightnessDesign
Ajusta los niveles de contraste de la imagen con control preciso para mayor claridad
image-contrastDesign
Recorta imágenes a dimensiones específicas o relación de aspecto con posicionamiento personalizado
image-cropper