Redesign

Redesign 是什麼？

Redesign 是免費開源的本地工具，讓 Claude 以你的程式碼庫作為風格指南，設計 LinkedIn 和 Instagram 輪播。你描述想要的內容，Claude 就在畫布編輯器中建立投影片，你可以預覽和編輯。

核心理念是避免從空白畫布開始：Redesign 從你的儲存庫拉取真實元件（例如卡片、按鈕、圖示和排版選擇），並置入貼文中，讓輸出符合你現有的設計系統。

主要功能

• 本地開源設計工作流程（MIT 授權）：工具在你的機器上運行，並採用 MIT 授權。
• 程式碼庫驅動的樣式：指向你的儲存庫，讓 Claude 使用你現有的圖示、按鈕、顏色、字型和元件結構，作為新貼文基礎。
• 畫布編輯器與即時預覽：Claude 產生圖層並驗證變更後才儲存，你可以在 UI 中觀看建置過程。
• 可重複使用的資產來自組合圖層：你可以儲存圖層或組合作為資產，用於未來貼文重複使用。
• Claude Code 的 MCP 整合：Redesign 是 MCP，可整合 Claude Code 工作流程，Redesign 本身無需 API 金鑰。
• 無 Redesign 控制的伺服器：頁面說明 Redesign 無其控制的後端；貼文、圖片和任何 API 金鑰均留在你的機器上。

如何使用 Redesign

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 元件的團隊，Redesign 以其作為共享真相來源，而非手動重製設計。
• 無需上傳資產的本地優先工作流程：若偏好 Redesign 無後端設定，你可將產生內容和資產留在機器上。

常見問題

• Redesign 是什麼？ Redesign 是免費開源的本地工具，讓 Claude 在受控畫布編輯器中設計 LinkedIn 和 Instagram 輪播。

• Redesign 真的免費嗎？ 是的。網站說明其採用 MIT 授權並在你的機器上運行。你支付 Anthropic 的 Claude 使用費用，而 Redesign 工具本身免費。

• 運行它需要什麼？ 頁面指定 Node.js 20+ 和 Claude Code。另註明一終端指令即可設定其餘。

• Redesign 會上傳任何東西到伺服器嗎？ 否。頁面說明 Redesign 無專案控制的後端，且貼文、圖片和任何 API 金鑰均留在你的機器上。

• 如何讓工具出現在 Claude Code 中？ 重啟 Claude Code（啟動時讀取 MCP 設定）。若工具仍未出現，執行 npx @nodewave-io/redesign connect 註冊 MCP。

替代方案

• 基於範本的社群貼文工具：讓你使用範本設計輪播的服務。這些通常不整合你現有程式碼庫作為風格指南，因此你可能需花更多時間手動匹配品牌。
• 需手動重製元件的設計工具：你在視覺編輯器中手動建置或重製 UI 元件的工具。這對版面靈活，但不會自動重用儲存庫中的元件。
• 程式碼優先的 UI 預覽工作流程：在程式碼中渲染設計並本地預覽的方法。它適合已使用 UI 程式碼庫的團隊，但不一定提供 Redesign 所述的 Claude 驅動投影片產生和驗證工作流程。