Redesign

O que é Redesign?

Redesign é uma ferramenta local, gratuita e open-source que permite ao Claude criar carrosséis do LinkedIn e Instagram usando seu próprio codebase como guia de estilo. Você descreve o que quer, e o Claude constrói os slides em um editor de canvas que você pode visualizar e editar.

A ideia central é evitar começar do zero: o Redesign extrai componentes reais (como cards, botões, ícones e escolhas de tipografia) do seu repositório e os coloca no post, para que o resultado esteja alinhado com seu sistema de design existente.

Principais Recursos

• Fluxo de design local e open-source (licença MIT): A ferramenta roda na sua máquina e é licenciada sob MIT.
• Estilização baseada no codebase: Aponte o Redesign para o seu repositório para que o Claude use seus ícones, botões, cores, fontes e estrutura de componentes existentes como base para novos posts.
• Editor de canvas com preview ao vivo: O Claude gera camadas e valida mudanças antes de salvá-las, e você pode acompanhar a construção na interface.
• Ativos reutilizáveis de camadas compostas: Você pode salvar camadas ou composições como ativos para reutilização em posts futuros.
• Integração MCP para Claude Code: O Redesign é um MCP que se conecta aos fluxos de trabalho do Claude Code sem exigir chave de API para o próprio Redesign.
• Sem servidor controlado pelo Redesign: A página afirma que o Redesign não tem backend sob seu controle; posts, imagens e qualquer chave de API ficam na sua máquina.

Como Usar o Redesign

1. Instale com um comando: Execute npx @nodewave-io/redesign em um terminal para configurar o app de canvas e registrar automaticamente o MCP no Claude Code.
2. Inicie o canvas local: O fluxo menciona abrir http://localhost:3000 para visualizar a interface de construção.
3. Conecte se as ferramentas não aparecerem: Se as ferramentas não aparecerem no Claude Code após reiniciar, execute npx @nodewave-io/redesign connect.
4. Forneça uma instrução: Descreva o post desejado. A página indica que o Claude então cria camadas, alinhamento e validações, e salva os slides resultantes no editor.
5. Edite e exporte: Use o editor de canvas para ajustar o conteúdo dos slides e o código dos componentes, depois exporte o carrossel para a plataforma pretendida.

Casos de Uso

• Carrosséis de lançamento com marca para LinkedIn/Instagram: Gere um carrossel de múltiplos slides cujos elementos visuais (ícones, estilos de cards, formas de botões e tipografia) venham dos componentes do seu site existente.
• Iteração rápida em posts promocionais: Altere copy, layout ou espaçamento com prompts, mantendo as mesmas definições de componentes subjacentes do seu repositório.
• Transformar seções de slides de alto desempenho em templates: Salve um conjunto de camadas ou composições (ex.: seção de CTA ou layout de slide) como ativos reutilizáveis para posts da próxima semana.
• Design com a biblioteca de componentes existente da equipe: Para equipes que já mantêm componentes de UI em código, o Redesign usa esses como fonte de verdade compartilhada em vez de recriar designs manualmente.
• Fluxos de trabalho local-first sem upload de ativos: Se você prefere uma configuração onde o Redesign em si não roda um backend, pode manter a geração e seus ativos na sua máquina.

FAQ

• O que é Redesign? Redesign é uma ferramenta local, gratuita e open-source que permite ao Claude criar carrosséis do LinkedIn e Instagram em um editor de canvas controlado.

• Redesign é realmente gratuito? Sim. O site afirma que é licenciado sob MIT e roda na sua máquina. Você paga à Anthropic pelo uso do Claude, enquanto a ferramenta Redesign em si é gratuita.

• O que preciso para rodá-lo? A página especifica Node.js 20+ e Claude Code. Também menciona que um comando de terminal configura o resto.

• O Redesign envia algo para um servidor? Não. A página afirma que o Redesign não tem backend sob controle do projeto, e que posts, imagens e qualquer chave de API ficam na sua máquina.

• Como faço as ferramentas aparecerem no Claude Code? Reinicie o Claude Code (ele lê a config MCP na inicialização). Se as ferramentas ainda não aparecerem, execute npx @nodewave-io/redesign connect para registrar o MCP.

Alternativas

• Ferramentas de posts sociais baseadas em templates: Serviços que permitem criar carrosséis usando templates. Essas geralmente não se integram ao seu codebase existente como guia de estilo, então você pode gastar mais tempo ajustando manualmente à sua marca.
• Ferramentas de design com recriação manual de componentes: Ferramentas onde você constrói ou recria componentes de UI manualmente (ex.: em um editor visual). Isso pode ser flexível para layout, mas não reutiliza automaticamente componentes do seu repositório.
• Fluxos de preview de UI code-first: Abordagens que renderizam design em código e fazem preview local. Elas podem se adequar a equipes que já trabalham em codebases de UI, mas não necessariamente fornecem o mesmo fluxo de geração e validação de slides impulsionado pelo Claude descrito para o Redesign.