Elysia Tools
Navegación
Workflow Playbook
Captura una página pública autorizada, contrasta estilos con la imagen, revisa pares de colores y cambios de tokens y entrega pruebas sin atribuirles el sistema de diseño original.
Temas
Este flujo sirve a diseñadores y mantenedores de un sitio autorizado. Produce un inventario revisado y propuestas de tokens, no un clon ni los archivos originales de diseño. Elige una página pública sin credenciales ni información sensible. Registra URL, momento, ventana de escritorio o móvil, preferencia clara u oscura y espera. Solicitar modo oscuro no demuestra que la página lo haya activado.
Guarda el ZIP con design.md, screenshot.png, tokens.json y tokens.css y calcula resúmenes. Examina primero la imagen: consentimiento, fuentes ausentes o recursos bloqueados pueden cambiar el estado observado. La imagen cubre una ventana fija, mientras el muestreo limitado puede incluir elementos inferiores. No se desplaza, pulsa ni inicia sesión automáticamente. Conserva advertencias y truncamientos como límites, no como inventario completo.
Elige títulos, textos, botones y tarjetas representativos y vincula valores a contexto en un registro separado. Usa coordenadas de imagen para contrastar una superficie visible, no para recuperar CSS a ciegas. Antialiasing, transparencias, degradados, fotografías y gestión de color pueden hacer que un píxel difiera de una declaración. Busca un área sólida y conserva ambos valores cuando corresponda.
Las frecuencias cuentan declaraciones muestreadas, no área ni importancia de marca. Una lista font-family no prueba la fuente utilizada para cada glifo; un ancho no define toda la escala adaptable. observed-1 es un nombre mecánico. Proponer que represente una acción principal requiere responsable y motivo. Expresiones no representables pueden quedar en el informe sin token primitivo: registra la limitación en vez de inventar sustitutos.
Convierte notaciones solo si están admitidas, conservando valores originales y advertencias de gama. Pasar a una gama menor puede cambiar apariencia; no equipares silenciosamente HEX con un origen de gama amplia. Identifica primer plano y fondo reales para cada contraste. Transparencias requieren composición comprobada; imágenes y degradados necesitan otras verificaciones. Si la herramienta no representa el caso, déjalo pendiente sin inventar colores opacos.
Formatea una copia de tokens.css para lectura, no para sobrescribir el sitio. Valida tokens.json con tu esquema compatible y soportado: estructura correcta o una etiqueta de formato no demuestran diseño ni conformidad normativa. Compara capturas con ventana, preferencia y ajustes equivalentes. El orden puede desplazar números: un cambio en observed-1 no identifica necesariamente el mismo componente. Concilia valores y contexto, separando cambios reales de recursos ausentes y ruido.
Mantén referencia de captura, componente, declaración, coordenada cuando proceda, nombre propuesto, estado, motivo y responsable. Es un registro independiente, no una identidad estable generada automáticamente. Separa originales, propuestas aceptadas y pendientes y conserva la relación de cada nombre nuevo con su fuente.
Reabre CSS y JSON, repite comprobaciones tras editar y calcula resúmenes de los archivos entregados. Conserva copias locales y recursos del informe, no solo enlaces temporales. Enumera anchos, estados hover/foco/error, pantallas privadas, marcos y páginas sin probar. El receptor debe verificar cambios en el navegador objetivo antes de desplegar: una imagen y unos pares no certifican accesibilidad global. Los flujos relacionados cubren nuevas paletas, tipografía e implementación CSS.
Guía de flujo de trabajo
Captura la página autorizada en ZIP con imagen, informe y tokens. Registra ventana, preferencia y espera, conserva advertencias y calcula resúmenes.
Revisa componentes y usa muestreo por coordenadas solo como contraste visual. Separa valores CSS, píxeles, familias declaradas y lagunas.
Convierte colores verificados donde se admitan sin ocultar cambios de gama. Comprueba pares reales y deja pendientes transparencias, degradados o imágenes sin evidencia suficiente.
Formatea una copia CSS, valida JSON con esquema compatible y compara con una base equivalente. Revisa manualmente cambios de numeración mecánica.
Contrasta imagen y advertencias con la página esperada. Recursos ausentes, ventanas de consentimiento o carga incompleta exigen repetir o declarar límites, no inventar valores.
Preserva nombres mecánicos y pruebas. Asigna un papel semántico solo tras revisión humana: frecuencia de declaraciones no demuestra importancia de marca.
Iguala ventana, preferencia y ajustes. Concilia valores y contexto antes de interpretar diferencias JSON; observed-1 no es una identidad semántica estable.
Separa capturas originales y propuestas revisadas, vuelve a comprobar CSS y JSON y calcula resúmenes finales. Entrega razones, advertencias y estados que requieren navegador.