Redesign

Redesign이란?

Redesign은 무료 오픈소스 로컬 도구로, 내 코드베이스를 스타일 가이드로 Claude가 LinkedIn·Instagram 카루셀을 제작합니다. 원하는 내용을 설명하면 Claude가 캔버스 에디터에서 슬라이드를 생성하며, 미리보기와 편집이 가능합니다.

핵심 아이디어는 빈 캔버스에서 시작하지 않는 것입니다: Redesign은 리포지토리에서 실제 컴포넌트(카드, 버튼, 아이콘, 타이포그래피 선택 등)를 가져와 포스트에 배치하여 기존 디자인 시스템과 일치합니다.

로컬 오픈소스 디자인 워크플로(MIT 라이선스): 기기에서 실행되며 MIT 라이선스입니다.
코드베이스 기반 스타일링: 리포지토리를 지정하면 Claude가 기존 아이콘, 버튼, 색상, 폰트, 컴포넌트 구조를 새 포스트의 기반으로 사용합니다.
라이브 미리보기 캔버스 에디터: Claude가 레이어를 생성하고 변경을 검증한 후 저장하며, UI에서 빌드 과정을 확인할 수 있습니다.
컴포지션 레이어에서 재사용 가능한 에셋: 레이어 또는 컴포지션을 미래 포스트에서 재사용할 에셋으로 저장할 수 있습니다.
Claude Code용 MCP 통합: Redesign은 Redesign 자체 API 키 없이 Claude Code 워크플로에 연결되는 MCP입니다.
Redesign이 제어하지 않는 서버 없음: Redesign은 제어하는 백엔드가 없으며, 포스트, 이미지, API 키는 기기에 남습니다.

한 명령어로 설치: 터미널에서 npx @nodewave-io/redesign을 실행해 캔버스 앱을 설정하고 Claude Code에 MCP를 자동 등록합니다.
로컬 캔버스 시작: 워크플로에서 http://localhost:3000을 열어 빌드 인터페이스를 확인합니다.
도구가 나타나지 않으면 연결: Claude Code 재시작 후 도구가 보이지 않으면 npx @nodewave-io/redesign connect를 실행합니다.
지시 제공: 원하는 포스트를 설명합니다. Claude가 레이어, 정렬, 검증을 생성하고 에디터에 슬라이드를 저장합니다.
편집 및 내보내기: 캔버스 에디터에서 슬라이드 콘텐츠와 컴포넌트 코드를 조정하고 대상 플랫폼용 카루셀을 내보냅니다.

LinkedIn/Instagram 브랜드 런치 카루셀: 기존 사이트 컴포넌트에서 아이콘, 카드 스타일, 버튼 모양, 타이포그래피를 가져온 멀티 슬라이드 카루셀 생성.
프로모션 포스트 빠른 반복: 프롬프트로 카피, 레이아웃, 간격 변경하면서 리포지토리의 동일한 컴포넌트 정의 유지.
고성능 슬라이드 섹션을 템플릿으로: 레이어 또는 컴포지션 세트(예: CTA 섹션 또는 슬라이드 레이아웃)를 다음 주 포스트용 재사용 에셋으로 저장.
팀의 기존 컴포넌트 라이브러리 사용 디자인: 코드로 UI 컴포넌트를 유지하는 팀에서 이를 공유 소스 오브 트루스로 사용하며 수동 재생성 피함.
에셋 업로드 없는 로컬 우선 워크플로: Redesign 자체 백엔드 없이 생성과 에셋을 기기에 유지.

Redesign이란? Redesign은 Claude가 제어된 캔버스 에디터에서 LinkedIn·Instagram 카루셀을 디자인하는 무료 오픈소스 로컬 도구입니다.
Redesign이 정말 무료인가요? 네. MIT 라이선스이며 기기에서 실행됩니다. Claude 사용은 Anthropic에 지불하며 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 기반 슬라이드 생성·검증 워크플로와 동일하지 않음.