Product Introduction
1. Definition
Redesign by Nodewave is a free, open-source, MIT-licensed Model Context Protocol (MCP) tool and local canvas environment designed to integrate with Claude Code. Technically, it functions as a local MCP server that exposes a project's codebase as structured data to Claude, enabling the AI to generate high-fidelity social media assets—specifically for LinkedIn, Instagram, and Reddit—directly from a user's existing UI components and style guides.
2. Core Value Proposition
The primary value proposition of Redesign is the elimination of the "blank canvas" problem in marketing design for developers. By using the Model Context Protocol (MCP), it bridges the gap between software development and content creation. It allows Claude to leverage a brand's actual production code (React components, CSS variables, and design tokens) to ensure that every social media post is a 1:1 reflection of the product’s identity. This "design-in-code" approach ensures brand consistency without the need for manual design tools like Figma or Photoshop.
Main Features
1. Model Context Protocol (MCP) for Claude
Redesign operates as an MCP server that auto-registers with Claude Code. This allows the AI to execute specific tools such as scan_codebase, import_component, and media_apply_batch. By running a simple terminal command (npx @nodewave-io/redesign), users establish a bridge where Claude can read local files, understand styling logic, and manipulate a visual canvas in real-time without requiring a separate cloud-based API key.
2. Live Preview and Local Canvas UI
The tool launches a local development server (typically at http://localhost:3000) that provides a real-time visual interface for the designs Claude is building. As the AI generates layers, adjusts alignments, or swaps component props, the changes are instantly rendered in the browser. This allows for an iterative, "human-in-the-loop" workflow where developers can manually edit the component code or prompt Claude to make micro-adjustments.
3. Codebase-to-Asset Translation
Unlike generic AI image generators, Redesign uses the actual logic of your codebase. It can pull complex UI elements—such as pricing cards, interactive charts, or custom buttons—and drop them directly into a social media slide. It supports various aspect ratios, including square (1:1) and portrait (4:5), ensuring that exports are optimized for specific platform algorithms like the LinkedIn feed or Instagram Carousels.
4. Compounding Asset Library
Redesign features an asset management system where successful compositions or specific layers can be saved as reusable assets. By using the save_as_asset command, users can build a proprietary library of design elements that Claude can reference in future sessions. This creates a compounding efficiency where the AI requires less instruction over time to produce high-quality, branded content.
Problems Solved
1. Brand Inconsistency in Marketing
Developers often struggle to replicate the exact look and feel of their web applications in marketing materials. Redesign solves this by using the codebase as the "source of truth." Since it uses the actual site’s CSS and components, there is zero drift between the product UI and the promotional assets.
2. High Cost of Professional Design Resources
For small teams, startups, or solo developers, hiring a full-time designer or purchasing expensive software suites for social media posts is often prohibitive. Redesign provides a professional-grade design workflow for free, leveraging the user's existing investment in their codebase to generate marketing collateral.
3. Target Audience
- Software Engineers and Indie Hackers: Who want to market their products on social media without leaving their development environment.
- Technical Marketing Managers: Who need to create accurate product screenshots and carousels that reflect the latest UI updates.
- Open Source Maintainers: Who require a fast way to generate branded announcements or release notes for platforms like Reddit and LinkedIn.
4. Use Cases
- Product Launch Carousels: Generating a multi-slide LinkedIn post that explains new features using actual UI components.
- Feature Spotlights: Creating high-quality Instagram posts that highlight a specific Pricing Card or Dashboard widget.
- Visual Documentation: Exporting clean, branded snippets of a UI for use in technical blog posts or community updates.
Unique Advantages
1. Zero-Cloud Privacy Architecture
Redesign is built with a local-first philosophy. There is no account creation, no cloud storage, and no third-party servers handling the codebase. All processing happens between the local Claude Code instance and the Redesign MCP server on the user's machine. This is critical for enterprise users or developers working with proprietary IP who cannot upload their codebase to external design platforms.
2. Elimination of Manual Design Steps
Traditional design tools require manual exporting of SVG/PNG assets from a site to a design tool. Redesign automates this by pointing Claude at the repository. The AI "reads" the icons, buttons, colors, and border-radii directly from the source code, effectively turning the codebase into a programmatic style guide.
3. No Subscription Fees or API Overheads
As an MIT-licensed tool, Redesign is entirely free. While users pay Anthropic for their Claude usage, there are no additional monthly subscriptions or "credits" required to use the design interface itself. It is a utility designed to empower the existing Claude ecosystem.
Frequently Asked Questions (FAQ)
1. How do I install Redesign by Nodewave?
To install Redesign, you need Node.js 20 or later and Claude Code installed. Run the command npx @nodewave-io/redesign in your terminal. This command sets up the canvas app and automatically registers the MCP with your Claude Code configuration. If tools do not appear after a restart, you can force the connection using npx @nodewave-io/redesign connect.
2. Can Redesign export posts for both LinkedIn and Instagram?
Yes. The Redesign canvas supports multiple aspect ratios, including square and portrait formats. This makes it suitable for generating LinkedIn carousels, Instagram posts, and Reddit image galleries. Once Claude finishes the design in the canvas, you can save and export the final slides for upload to your chosen platform.
3. Is my codebase safe when using Redesign?
Yes. Redesign is a local-only tool with no backend controlled by Nodewave. Your codebase, images, and API keys stay on your local machine. The tool operates as a bridge between your local files and your local Claude session, ensuring that your data is never uploaded to a third-party design cloud.
4. Does Redesign require an Anthropic API key?
Redesign itself does not require a separate API key. It hooks into your existing Claude Code setup. You use your own Claude subscription/usage through the terminal or VSCode, and Redesign simply provides the visual canvas and MCP tools to facilitate the design process.
5. Can I edit the code Claude generates in Redesign?
Absolutely. One of the core strengths of Redesign is that it generates actual code. You can view the live preview at localhost:3000 and manually edit the component code if you want to fine-tune a specific element. This hybrid approach combines AI speed with developer precision.
