Piny

Trabajar con frameworks web modernos y CSS de primera utilidad como Tailwind CSS es potente, pero cambiar constantemente entre el código, la documentación y las vistas previas del navegador para ajustar los estilos puede interrumpir tu flujo de trabajo. Piny trae los beneficios de un editor visual directamente a tu entorno de desarrollo familiar, permitiéndote dar estilo a tus componentes y navegar por tu proyecto sin salir de tu IDE. Funciona editando tu código directamente, manteniendo un flujo de trabajo transparente y no abstracto.

Características principales

• 🖱️ Estiliza elementos visualmente: Haz clic en cualquier elemento de la vista previa de tu código y ajusta sus clases de Tailwind utilizando controles visuales intuitivos. Observa los cambios reflejados instantáneamente tanto en la vista previa como en tu código.

• 🔍 Inspecciona y gestiona clases de Tailwind: Visualiza y edita estilos complejos de Tailwind para cualquier elemento, organizados de forma clara en una estructura de árbol editable que muestra clases y estados.

• ✏️ Edita clases de Tailwind en cualquier lugar: Modifica las clases de Tailwind directamente dentro de literales de cadena, variables e incluso en código fuera de las estructuras de componentes estándar de React o Astro.

• ↔️ Navega entre componentes: Salta rápidamente desde la vista previa al componente correspondiente en tu código. Puedes asociar rutas con componentes para asegurar que la vista previa siempre muestre contenido relevante.

• 🤖 Construye UI con arrastrar y soltar asistido por IA: Ensambla visualmente tu UI más rápido utilizando la funcionalidad inteligente de arrastrar y soltar. Piny se integra con tu propia clave de proveedor de API de IA y funciona junto con tu asistente de codificación de IA preferido.

• 👁️ Selecciona elementos visualmente (Pro): Selecciona directamente elementos en la vista previa en vivo para resaltarlos en tu código y acceder a sus controles de estilo visual.

• 🛠️ Edita múltiples elementos (Pro): Selecciona varios elementos simultáneamente utilizando las teclas modificadoras estándar (CMD/CTRL, SHIFT) y aplica estilos o inspecciona clases a través de la selección.

• 🧭 Explora todo tu proyecto (Pro): Obtén una vista panorámica y navega fácilmente por los componentes de todo tu proyecto directamente desde la interfaz de Piny.

• 🎨 Importa tema Tailwind personalizado (Pro): Personaliza los controles visuales de Piny para que coincidan con el sistema de diseño específico de tu proyecto importando tu configuración de Tailwind, incluyendo colores, fuentes y espaciado personalizados.

Casos de uso

1. Refinando la apariencia de los componentes: Estás construyendo un nuevo componente de botón y necesitas perfeccionar su relleno, radio de borde y estados de hover. En lugar de añadir manualmente px-4 py-2 rounded-md hover:bg-blue-700 y revisar constantemente el navegador, utilizas los controles visuales de Piny para ajustar estas propiedades directamente en el botón en la vista previa. Piny actualiza el código instantáneamente, y la recarga en caliente muestra el resultado, ahorrándote escritura repetitiva y cambio de contexto.

2. Depurando diseños complejos: Has encontrado un problema con el espaciado en una estructura de diseño anidada utilizando clases complejas de flexbox y grid. Utilizando el Inspector de Clases de Tailwind, seleccionas el elemento problemático en la vista previa (con la función Pro) o el código, examinas el árbol de clases aplicadas, identificas rápidamente las utilidades de margen o relleno en conflicto y las editas directamente en el inspector para resolver el problema de diseño.

3. Prototipado rápido y ensamblaje: Necesitas crear rápidamente una nueva sección de página utilizando componentes existentes y añadiendo algunos elementos nuevos. Utilizando el arrastrar y soltar asistido por IA, arrastras los componentes relevantes, los organizas visualmente y luego utilizas los controles visuales de Piny para afinar el espaciado y la alineación sin escribir clases de utilidad repetitivas a mano. También puedes utilizar la Navegación de Componentes para saltar rápidamente a uno de los componentes arrastrados si necesita ajustes estructurales menores.

Conclusión

Piny integra la edición visual de forma impecable en tu flujo de trabajo de desarrollo, ejecutándose directamente dentro de tu IDE. Al permitirte estilizar y navegar por tus proyectos visualmente mientras mantienes las ediciones vinculadas directamente a tu código, Piny te ayuda a trabajar más rápido e intuitivamente con Tailwind CSS, React, Next.js y Astro. Elimina la necesidad de herramientas separadas o servicios en la nube, asegurando que mantengas el control total sobre tu proyecto. Comienza con las potentes funciones gratuitas y actualiza a Pro si necesitas capacidades avanzadas de navegación y edición de múltiples elementos.

Preguntas frecuentes

• ¿Piny Free es realmente gratuito? Sí, Piny Free es una versión genuinamente gratuita sin límites de tiempo, que no requiere cuenta ni recopilación de datos. Proporciona funciones básicas de edición visual para tareas comunes. La versión Pro añade capacidades avanzadas.

• ¿Por qué un descuento de acceso anticipado? El descuento de acceso anticipado se ofrece para recompensar a los primeros usuarios por su confianza y para recopilar valiosos comentarios que ayuden a mejorar Piny basándose en el uso en el mundo real.

• ¿El precio con descuento dura? Sí, si compras durante el período de acceso anticipado, aseguras ese precio con descuento durante la duración de tu suscripción, incluso después de que se introduzca el precio regular.

• ¿Cómo funciona Visual Select? Visual Select mapea los elementos en la vista previa en vivo de vuelta a sus ubicaciones de código correspondientes utilizando técnicas avanzadas de mapeo de DOM a JSX. Requiere un pequeño script en el diseño de tu proyecto, que solo está activo en el modo de desarrollo.