Piny es un editor visual diseñado para desarrolladores que trabajan con Astro, React, Next.js y Tailwind CSS, integrándose perfectamente en tu IDE para mejorar el flujo de trabajo de desarrollo. Permite un estilo intuitivo y en tiempo real y la navegación directamente dentro de tu base de código, eliminando la necesidad de cambiar de contexto o usar herramientas externas. Al proporcionar controles visuales y funciones asistidas por IA, Piny agiliza el proceso de construcción y refinamiento de interfaces de usuario, convirtiéndose en un recurso invaluable para los desarrolladores que buscan eficiencia y precisión.
Características y Funcionalidad Clave:
- Controles Visuales de Tailwind: Haz clic en cualquier elemento de tu código para estilizarlo usando controles visuales intuitivos, con cambios reflejados inmediatamente en el código y guardados automáticamente para activar recargas en caliente.
- Inspector de Clases de Tailwind: Gestiona estilos complejos de Tailwind a través de un árbol de clases y estados organizado y editable.
- Edita Clases de Tailwind en Todas Partes: Modifica clases de Tailwind directamente dentro de cadenas, variables e incluso en código que no sea de React/Astro.
- Navegación de Componentes: Salta rápidamente entre componentes tanto en Piny como en tu código, asociando rutas con componentes individuales para obtener siempre la vista previa relevante.
- Arrastrar y Soltar Potenciado por IA: Construye tu interfaz de usuario visualmente usando arrastrar y soltar asistido por IA, utilizando un Asistente de IA incorporado con tu propia clave de proveedor de API.
- Selección Visual (Función Pro): Selecciona elementos visualmente y profundiza en los componentes directamente desde la vista previa.
- Edita Múltiples Elementos Simultáneamente (Función Pro): Selecciona múltiples elementos con `CMD/CTRL + Clic` o un rango con `SHIFT + Clic`, luego estílalos colectivamente usando controles visuales y el inspector.
- Navegación en Todo el Proyecto (Función Pro): Explora y navega por componentes en todo tu proyecto desde una sola interfaz.
- Importación de Tema Personalizado de Tailwind (Función Pro): Personaliza los controles visuales con tu propia configuración de Tailwind, incluyendo colores, fuentes y espaciado.
Valor Principal y Soluciones para el Usuario:
Piny aborda los desafíos comunes que enfrentan los desarrolladores al estilizar y navegar por proyectos complejos al integrar capacidades de edición visual directamente en el entorno de desarrollo. Esta integración reduce la necesidad de ajustes de código repetitivos y cambios de contexto, acelerando así el proceso de desarrollo. Al ofrecer tanto funciones gratuitas como pro, Piny satisface una amplia gama de necesidades de desarrollo, desde el estilo básico hasta la navegación avanzada del proyecto y la personalización. Sus herramientas potenciadas por IA mejoran aún más la productividad, permitiendo a los desarrolladores construir y refinar interfaces de usuario con mayor rapidez y precisión.
