UI Inspector - Editor CSS Visual

Un editor visual de CSS para el navegador

Mejora tu flujo de trabajo de desarrollo y diseño web con UI Inspector, una potente extensión de Chrome que te permite inspeccionar, editar y estilizar cualquier página web de forma visual y en tiempo real. Evita la complejidad de las DevTools y realiza ajustes instantáneos directamente en la página.

Con UI Inspector, puedes:

- Inspeccionar elementos — activa la extensión y haz clic en cualquier elemento para ver sus atributos.
- Editar atributos — modifica estilos en el editor visual y observa los cambios en tiempo real.
- Controlar la tipografía — ajusta familia tipográfica, tamaño, peso, altura de línea y espaciado entre letras.
- Configurar diseño y espaciado — establece márgenes, rellenos, propiedades de visualización y alineación.
- Mejorar fondos y sombras — aplica colores personalizados, degradados, desenfoque de fondo y efectos de sombra.
- Personalizar bordes — ajusta ancho, estilo, color y radio de borde.
- Afinar la apariencia — controla opacidad, modos de fusión y transformaciones como la rotación.
- Ver todos los cambios — consulta una lista de cada elemento que has modificado en un solo lugar.
- Copiar CSS — visualiza y copia el CSS compilado de tus cambios al instante.

---

Desbloquea UI Inspector PRO y:

- Aplicar cambios globalmente — usa el control de sensibilidad para aplicar automáticamente cambios de estilo a elementos similares en toda la página.
- Plantillas de estilo — guarda cualquier elemento como plantilla reutilizable y aplícala en cualquier sitio web con un solo clic.
- Exportar como Tailwind, SCSS o JSX — copia tus cambios en el formato de código que tu proyecto necesita.
- Exportar capturas de pantalla — captura imágenes PNG de alta resolución de elementos estilizados individualmente.
- Exportar a GitHub — genera un issue en GitHub con tus cambios de diseño compilados en CSS.

---

¿Para quién es UI Inspector?

Desarrolladores web:
- Acelerar el desarrollo front-end: identifica y corrige rápidamente problemas de diseño o estilos editando elementos sobre la marcha.
- Simplificar la depuración de CSS: evita las DevTools con un editor visual e intuitivo.
- Exportar código listo para producción: copia los cambios como CSS, Tailwind, SCSS o JSX directamente en tu código base.

Diseñadores web:
- Validación de diseño en tiempo real: ajusta y perfecciona diseños en el navegador para garantizar una implementación pixel-perfect.
- Conectar diseño y desarrollo: colabora de manera más efectiva modificando directamente las páginas en vivo.
- Guardar y reutilizar plantillas: construye una biblioteca de estilos reutilizables y aplícalos de forma consistente en todos tus proyectos.

---

Cómo usar UI Inspector

1. Activar la extensión: haz clic en el icono de UI Inspector en la barra de herramientas del navegador o presiona Alt/Option + Shift + I.
2. Inspeccionar y editar elementos: pasa el cursor sobre cualquier elemento para seleccionarlo y ver instantáneamente sus estilos ajustables.
3. Modificar estilos visualmente: usa la interfaz intuitiva para cambiar tipografía, diseño, espaciado, fondos, bordes, sombras y más.
4. Guardar y aplicar plantillas: crea plantillas de estilo para un diseño consistente y aplícalas a cualquier elemento en cualquier sitio.
5. Exportar y compartir: copia CSS en múltiples formatos, captura pantallas o exporta cambios como un issue de GitHub.

---

Instalación

Compatible con cualquier navegador Chromium que soporte la Side Panel API. Para mejores resultados, asegúrate de que tu navegador soporta todas las APIs requeridas. Si surgen problemas de instalación, actualiza tu navegador a la última versión e inténtalo de nuevo.