Redesign

¿Qué es Redesign?

Redesign es una herramienta local gratuita y open-source con licencia MIT que permite a Claude crear carruseles de LinkedIn e Instagram usando tu propia base de código como guía de estilo. Describes lo que quieres, y Claude construye los slides en un editor de lienzo que puedes previsualizar y editar.

La idea principal es evitar empezar desde un lienzo en blanco: Redesign extrae componentes reales (como tarjetas, botones, iconos y elecciones de tipografía) de tu repositorio y los coloca en la publicación, para que el resultado se alinee con tu sistema de diseño existente.

Características principales

• Flujo de diseño local y open-source (licencia MIT): La herramienta se ejecuta en tu máquina y tiene licencia MIT.
• Estilos basados en la base de código: Apunta Redesign a tu repositorio para que Claude use tus iconos, botones, colores, fuentes y estructura de componentes existentes como base para nuevas publicaciones.
• Editor de lienzo con previsualización en vivo: Claude genera capas y valida cambios antes de guardarlos, y puedes ver la construcción en la interfaz de usuario.
• Activos reutilizables de capas compuestas: Puedes guardar capas o composiciones como activos para reutilizar en publicaciones futuras.
• Integración MCP para Claude Code: Redesign es un MCP que se integra en flujos de trabajo de Claude Code sin requerir una clave API para Redesign en sí.
• Sin servidor controlado por Redesign: La página indica que Redesign no tiene backend propio; las publicaciones, imágenes y cualquier clave API permanecen en tu máquina.

Cómo usar Redesign

1. Instala con un comando: Ejecuta npx @nodewave-io/redesign en una terminal para configurar la app de lienzo y registrar automáticamente el MCP con Claude Code.
2. Inicia el lienzo local: El flujo hace referencia a abrir http://localhost:3000 para ver la interfaz de construcción.
3. Conecta si las herramientas no aparecen: Si no ves las herramientas en Claude Code después de reiniciar, ejecuta npx @nodewave-io/redesign connect.
4. Proporciona una instrucción: Describe la publicación que quieres. La página indica que Claude crea entonces capas, alineación y validaciones, y guarda los slides resultantes en el editor.
5. Edita y exporta: Usa el editor de lienzo para ajustar el contenido de los slides y el código de componentes, luego exporta el carrusel para la plataforma prevista.

Casos de uso

• Carruseles de lanzamiento con marca para LinkedIn/Instagram: Genera un carrusel de múltiples slides cuyos elementos visuales (iconos, estilos de tarjetas, formas de botones y tipografía) provienen de los componentes de tu sitio existentes.
• Iteración rápida en publicaciones promocionales: Cambia el texto, diseño o espaciado con prompts, manteniendo las mismas definiciones de componentes subyacentes de tu repositorio.
• Convertir secciones de slides de alto rendimiento en plantillas: Guarda un conjunto de capas o composiciones (p. ej., una sección CTA o diseño de slide) como activos reutilizables para las publicaciones de la próxima semana.
• Diseñar con la biblioteca de componentes existente del equipo: Para equipos que ya mantienen componentes UI en código, Redesign los usa como fuente de verdad compartida en lugar de recrear diseños manualmente.
• Flujos de trabajo locales primero sin subir activos: Si prefieres una configuración donde Redesign no ejecute un backend propio, puedes mantener la generación y tus activos en tu máquina.

Preguntas frecuentes

• ¿Qué es Redesign? Redesign es una herramienta local gratuita y open-source que permite a Claude diseñar carruseles de LinkedIn e Instagram en un editor de lienzo controlado.

• ¿Es Redesign realmente gratuito? Sí. El sitio indica que tiene licencia MIT y se ejecuta en tu máquina. Pagas a Anthropic por tu uso de Claude, mientras que la herramienta Redesign en sí es gratuita.

• ¿Qué necesito para ejecutarlo? La página especifica Node.js 20+ y Claude Code. También nota que un comando de terminal configura el resto.

• ¿Sube Redesign algo a un servidor? No. La página indica que Redesign no tiene backend controlado por el proyecto, y que las publicaciones, imágenes y cualquier clave API permanecen en tu máquina.

• ¿Cómo hago que las herramientas aparezcan en Claude Code? Reinicia Claude Code (lee la config MCP al inicio). Si las herramientas aún no aparecen, ejecuta npx @nodewave-io/redesign connect para registrar el MCP.

Alternativas

• Herramientas de publicaciones sociales basadas en plantillas: Servicios que te permiten diseñar carruseles usando plantillas. Estas típicamente no se integran con tu base de código existente como guía de estilo, por lo que puedes pasar más tiempo ajustando manualmente tu marca.
• Herramientas de diseño con recreación manual de componentes: Herramientas donde construyes o recreas componentes UI a mano (p. ej., en un editor visual). Puede ser flexible para el diseño, pero no reutiliza automáticamente componentes de tu repositorio.
• Flujos de previsualización UI primero en código: Enfoques que renderizan el diseño en código y lo previsualizan localmente. Pueden adaptarse a equipos que ya trabajan en bases de código UI, pero no necesariamente proporcionan el mismo flujo de generación y validación de slides impulsado por Claude descrito para Redesign.