Redesign

什么是 Redesign？

Redesign 是一个免费开源的本地工具，让 Claude 使用你的代码库作为风格指南，创建 LinkedIn 和 Instagram 轮播。你描述需求，Claude 就在画布编辑器中构建幻灯片，你可以预览和编辑。

核心理念是避免从空白画布开始：Redesign 从你的代码库中提取真实组件（如卡片、按钮、图标和字体选择），并将其置入帖子中，确保输出符合你现有的设计系统。

主要功能

• 本地开源设计工作流（MIT 授权）：工具在你的机器上运行，并采用 MIT 授权。
• 代码库驱动的样式：将 Redesign 指向你的代码库，让 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 驱动幻灯片生成和验证工作流。