Redesign

Redesignとは？

Redesignは、無料・オープンソースのローカルツールです。自分のコードベースをスタイルガイドとしてClaudeがLinkedInおよびInstagramのカルーセルを作成します。やりたいことを記述するだけで、プレビュー・編集可能なキャンバスエディタでスライドを構築します。

核心のアイデアは、空白のキャンバスから始めないこと：Redesignはリポジトリから実際のコンポーネント（カード、ボタン、アイコン、タイポグラフィ選択など）を引き出し、投稿に配置するため、出力が既存のデザインシステムに適合します。

主な機能

• ローカル・オープンソースのデザイン workflow（MITライセンス）：自分のマシン上で動作し、MITライセンスです。
• コードベース駆動のスタイリング：リポジトリを指定して、Claudeが既存のアイコン、ボタン、カラー、フォント、コンポーネント構造を新しい投稿の基盤にします。
• ライブプレビューのキャンバスエディタ：Claudeがレイヤーを生成し、保存前に変更を検証。UIでビルドをリアルタイム確認できます。
• 合成レイヤーからの再利用可能アセット：レイヤーやコンポジションを保存し、将来の投稿で再利用。
• Claude Code向けMCP統合：Redesign自体にAPIキーが不要で、Claude Code workflowにフックするMCPです。
• Redesignが制御するサーバーなし：バックエンドを制御せず、投稿、画像、APIキーはすべて自分のマシンに留まります。

Redesignの使い方

1. 1コマンドでインストール：ターミナルでnpx @nodewave-io/redesignを実行し、キャンバスアプリをセットアップ、Claude CodeにMCPを自動登録。
2. ローカルキャンバスを起動：http://localhost:3000を開いてビルドインターフェースを表示。
3. ツールが表示されない場合の接続：Claude Code再起動後もツールが見えない時は、npx @nodewave-io/redesign connectを実行。
4. 指示を提供：作りたい投稿を記述。Claudeがレイヤー、配置、検証を作成し、エディタにスライドを保存。
5. 編集とエクスポート：キャンバスエディタでスライド内容やコンポーネントコードを調整し、対象プラットフォーム用にカルーセルをエクスポート。

ユースケース

• LinkedIn/Instagram向けブランドローンチカルーセル：既存サイトコンポーネントからアイコン、カードスタイル、ボタン形状、タイポグラフィを取り入れたマルチスライドカルーセルを生成。
• プロモーションポストの高速イテレーション：プロンプトでコピー、レイアウト、スペーシングを変更しつつ、リポジトリのコンポーネント定義を維持。
• 高パフォーマンススライドセクションをテンプレート化：レイヤーやコンポジション（例：CTAセクションやスライドレイアウト）を保存し、次週の投稿で再利用。
• チームの既存コンポーネントライブラリ活用：コードでUIコンポーネントを管理するチーム向けに、手動再現せず共有の真実の源として使用。
• アセットアップロードなしのローカルファーストworkflow：Redesignにバックエンドなしで生成とアセットをマシン内に保持。

FAQ

• Redesignとは？ Redesignは、Claudeが制御されたキャンバスエディタでLinkedInおよびInstagramのカルーセルをデザインする無料・オープンソースのローカルツールです。

• Redesignは本当に無料？ はい。MITライセンスで自分のマシン上で動作。Claude使用分はAnthropicに支払い、Redesignツール自体は無料です。

• 実行に必要なものは？ Node.js 20+とClaude Code。1つのターミナルコマンドで残りをセットアップ。

• Redesignはサーバーに何かをアップロードする？ いいえ。プロジェクトが制御するバックエンドがなく、投稿、画像、APIキーはマシン内に留まります。

• Claude Codeにツールを表示するには？ Claude Codeを再起動（起動時にMCP設定を読み込み）。表示されない場合、npx @nodewave-io/redesign connectでMCPを登録。

代替案

• テンプレートベースのソーシャル投稿ツール：テンプレートでカルーセルをデザインするサービス。コードベースをスタイルガイドに統合せず、ブランド一致を手動で調整する手間が増えます。
• 手動コンポーネント再現のデザインツール：ビジュアルエディタなどでUIコンポーネントを手作業で構築・再現。レイアウトは柔軟ですが、リポジトリのコンポーネントを自動再利用しません。
• コードファーストUIプレビューworkflow：コードでデザインをレンダリングしローカルプレビュー。UIコードベースのチームに適合しますが、RedesignのClaude駆動スライド生成・検証workflowとは異なります。