Piny está pensado para un flujo de trabajo hoy habitual: un agente de código con IA monta páginas y lógica, y luego una persona necesita afinar espaciados, tipografía y textos sin volver a escribir prompts píxel a píxel. Piny se instala como dependencia de desarrollo y plugin de Vite, abre un editor visual junto a tu aplicación y te permite hacer clic en cualquier elemento para seleccionar el JSX que lo renderiza. Desde ahí ajustas controles de Tailwind de espaciado, color, tipografía, flex y grid en distintos breakpoints y estados usando el tema propio del proyecto, editas texto, imágenes y enlaces, e inspeccionas el árbol de clases de un elemento y sus padres.
Como Piny edita el código y no genera capas superpuestas, los cambios son cambios de código normales: tu agente los detecta y nada se incluye en las compilaciones de producción. Si tu agente modifica un archivo mientras lo editas en Piny, Piny detecta el cambio y evita sobrescribirlo. La función "Target this element" copia el componente, archivo y línea de un elemento para que señales a tu agente el punto exacto en el siguiente prompt.
Piny proviene de los creadores de Pinegrow Web Editor, aunque es un producto independiente con su propia licencia. Tiene un nivel gratuito realmente utilizable, sin cuenta ni límite de tiempo: clic para seleccionar, árbol de componentes, edición de contenido, varias vistas de página, deshacer y rehacer. Pro añade los controles de Tailwind y Grid, inspector de clases, edición de estructura y props, un Content Workspace para textos y datos de la página, y una biblioteca de componentes que puedes registrar para que los tuyos aparezcan con previsualizaciones y preajustes. Los proyectos compatibles hoy son React renderizado en cliente sobre Vite 5.2 o superior; el soporte de Astro está en camino y Next.js todavía no está disponible.
