CSS
Recopilar estilos de las páginas
Introduce una URL. Milten lee las hojas de estilo disponibles y agrupa colores, fuentes, tamaños, espacios, radios de esquina, sombras y propiedades personalizadas recurrentes.
Colores, fuentes y espaciado de su sitio
Reúna los colores, fuentes y espacios de una página en un informe. Identifique valores repetidos y diferencias para preparar un diseño coherente.
Cómo funciona el escáner
De las fuentes CSS a un resumen de frecuencia de valores
Frecuencia
Agrupar valores repetidos
El informe cuenta cuántas veces aparecen colores, fuentes, tamaños, espaciado, border-radius, box-shadow y variables CSS idénticos. Cuanto más se repite un valor, más se parece a un token del sistema.
Resumen
Mostrar concentración y dispersión
El resumen te ayuda a ver rápidamente dónde se repiten los valores de forma consistente y dónde la interfaz ha acumulado una amplia dispersión de colores, tamaños, fuentes o sombras.
Lectura
Ayuda a elegir qué revisar primero
Compara los colores, tamaños de fuente y espacios repetidos con su función en los componentes. Los valores similares pueden ser intencionales. El resumen de CSS ayuda a planificar los tokens, pero no genera un sistema de diseño terminado ni asigna nombres semánticos.
Qué incluye el informe
Siete grupos de valores de diseño
Colores
Colores repetidos
El escáner muestra los valores de color y sus recuentos de uso para que puedas separar los colores del sistema de los tonos locales accidentales.
valorusos
Fuentes
Fuentes y tamaños de texto
El informe incluye los valores de font-family detectados, con qué frecuencia aparecen, y los valores de font-size repetidos.
font-familyfont-size
Espaciado / tamaño
Tamaños, margin, padding, width y height
El resumen destaca los valores de tamaño y espaciado usados con frecuencia. Una gran dispersión aquí suele indicar una consistencia débil de la cuadrícula.
pxrem
Radio / sombras
Radios y sombras
Grupos separados muestran valores repetidos de border-radius y box-shadow, incluidos los casos en que un valor aparece más a menudo que los demás.
radiosombra
Variables CSS
Propiedades personalizadas detectadas
El escáner muestra las propiedades personalizadas de CSS y sus recuentos de uso para que veas qué variables ya funcionan como tokens.
--varusos
Preguntas frecuentes
Preguntas frecuentes sobre el escáner de tokens CSS
Respuestas breves sobre qué valores entran en el informe y cómo leer el resumen de frecuencia.
¿En qué se diferencia el escáner de tokens CSS de exportar variables CSS?
Su alcance es más amplio: además de las propiedades personalizadas, el informe muestra colores, fuentes, valores de font-size, tamaños, espaciado, border-radius y box-shadow repetidos. La frecuencia de uso importa para cada valor.
¿Puedo analizar un sitio sin acceso al repositorio?
Sí. La primera pasada puede ejecutarse sobre páginas públicas y estilos vinculados. Si parte del CSS está detrás de autenticación o no se carga en la página, no entrará en el resumen.
¿El informe muestra conflictos de tokens?
El informe muestra los valores repetidos y su distribución. No determina conflictos semánticos ni propone nombres de tokens. Tu equipo decide cómo organizar los tokens.
¿El escáner es útil si ya existen tokens?
Sí. El informe muestra qué variables CSS se encontraron y con qué frecuencia se usan, además de dónde siguen existiendo valores sin procesar repetidos cerca: colores, tamaños, espaciado o sombras.
¿Cómo debo interpretar los valores vacíos o poco frecuentes?
Un valor poco frecuente puede pertenecer a un estado o componente importante. Comprueba dónde se utiliza antes de combinarlo o eliminarlo. La frecuencia ayuda a priorizar la investigación, pero no decide qué valores deben convertirse en un único token.
Servicios relacionados
Qué comprobar después de este servicio
Auditoría de CSS
Encuentra hojas de estilo grandes, duplicados y estilos sin usar durante la carga. Esos estilos pueden ser necesarios en otras páginas o tras acciones del usuario.
AbrirComprobación de HTML
Detecta errores de HTML y estructuras de página demasiado complejas. El informe identifica los elementos afectados.
AbrirAccesibilidad
Detecta problemas de accesibilidad con una comprobación automática. Obtén recomendaciones; una evaluación completa también necesita comprobaciones manuales.
AbrirComprobación de JavaScript
Revisa archivos JavaScript, errores de carga y código sin usar durante la carga. Identifica scripts que requieren un análisis más detallado.
Abrir