UStackUStack
Redesign icon

Redesign

Redesign è uno strumento locale open-source MIT per far progettare da Claude caroselli LinkedIn e Instagram usando il tuo codebase come guida di stile.

Redesign

Cos'è Redesign?

Redesign è uno strumento locale gratuito e open-source che permette a Claude di creare caroselli per LinkedIn e Instagram usando il tuo codebase come guida di stile. Descrivi ciò che vuoi e Claude costruisce le slide in un editor canvas che puoi visualizzare e modificare.

L'idea principale è evitare di partire da zero: Redesign estrae componenti reali (come card, pulsanti, icone e scelte tipografiche) dal tuo repository e li posiziona nel post, così l'output è allineato al tuo sistema di design esistente.

Caratteristiche Principali

  • Flusso di lavoro di design locale e open-source (licenza MIT): Lo strumento gira sulla tua macchina ed è con licenza MIT.
  • Stile guidato dal codebase: Punta Redesign al tuo repo così Claude può usare le tue icone, pulsanti, colori, font e struttura dei componenti come base per i nuovi post.
  • Editor canvas con anteprima live: Claude genera layer e valida le modifiche prima del salvataggio, e puoi osservare la costruzione nell'interfaccia.
  • Asset riutilizzabili da layer compositi: Puoi salvare layer o composizioni come asset per il riutilizzo nei post futuri.
  • Integrazione MCP per Claude Code: Redesign è un MCP che si collega ai workflow di Claude Code senza richiedere una API key per Redesign stesso.
  • Nessun server controllato da Redesign: La pagina specifica che Redesign non ha un backend sotto il suo controllo; post, immagini e qualsiasi API key restano sulla tua macchina.

Come Usare Redesign

  1. Installa con un comando: Esegui npx @nodewave-io/redesign in un terminale per impostare l'app canvas e registrare automaticamente l'MCP con Claude Code.
  2. Avvia il canvas locale: Il workflow prevede di aprire http://localhost:3000 per visualizzare l'interfaccia di build.
  3. Collega se gli strumenti non appaiono: Se non vedi gli strumenti in Claude Code dopo il riavvio, esegui npx @nodewave-io/redesign connect.
  4. Fornisci un'istruzione: Descrivi il post che vuoi. La pagina indica che Claude crea poi layer, allineamenti e validazioni, e salva le slide risultanti nell'editor.
  5. Modifica ed esporta: Usa l'editor canvas per regolare il contenuto delle slide e il codice dei componenti, poi esporta il carosello per la piattaforma destinata.

Casi d'Uso

  • Caroselli di lancio brandizzati per LinkedIn/Instagram: Genera un carosello multi-slide i cui elementi visivi (icone, stili di card, forme dei pulsanti e tipografia) provengono dai componenti del tuo sito esistente.
  • Iterazione rapida su post promozionali: Cambia copy, layout o spaziatura con prompt, mantenendo le stesse definizioni di componenti sottostanti dal tuo repository.
  • Trasformare sezioni di slide performanti in template: Salva un set di layer o composizioni (es. una sezione CTA o layout di slide) come asset riutilizzabili per i post della prossima settimana.
  • Progettazione con la libreria di componenti esistente del team: Per team che mantengono già componenti UI in codice, Redesign li usa come fonte di verità condivisa invece di ricreare manualmente i design.
  • Workflow locali-first senza upload di asset: Se preferisci un setup in cui Redesign non gestisce un backend, puoi tenere la generazione e i tuoi asset sulla tua macchina.

FAQ

  • Cos'è Redesign? Redesign è uno strumento locale gratuito e open-source che permette a Claude di progettare caroselli LinkedIn e Instagram in un editor canvas controllato.

  • Redesign è davvero gratuito? Sì. Il sito specifica che è con licenza MIT e gira sulla tua macchina. Paghi Anthropic per l'uso di Claude, mentre lo strumento Redesign è gratuito.

  • Cosa mi serve per eseguirlo? La pagina specifica Node.js 20+ e Claude Code. Nota anche che un comando terminale imposta il resto.

  • Redesign carica qualcosa su un server? No. La pagina specifica che Redesign non ha un backend controllato dal progetto, e che post, immagini e qualsiasi API key restano sulla tua macchina.

  • Come faccio apparire gli strumenti in Claude Code? Riavvia Claude Code (legge la config MCP all'avvio). Se gli strumenti non appaiono ancora, esegui npx @nodewave-io/redesign connect per registrare l'MCP.

Alternative

  • Strumenti per post social basati su template: Servizi che ti permettono di progettare caroselli usando template. Tipicamente non si integrano con il tuo codebase esistente come guida di stile, quindi potresti passare più tempo a far combaciare manualmente il tuo brand.
  • Strumenti di design con ricreazione manuale dei componenti: Tool dove costruisci o ricrei componenti UI a mano (es. in un editor visivo). Possono essere flessibili per il layout, ma non riutilizzano automaticamente i componenti dal tuo repository.
  • Workflow di preview UI code-first: Approcci che rendono il design in codice e lo preview localmente. Possono adattarsi a team che lavorano già in codebase UI, ma non forniscono necessariamente lo stesso workflow di generazione e validazione delle slide guidato da Claude descritto per Redesign.