Flowstep 디자인을 JPG 또는 PNG 이미지 파일로 다운로드

디자인을 공유하거나 인수인계할 준비가 되었을 때, Flowstep은 이를 정적 이미지(JPG 또는 PNG)로 내보낼 수 있게 해줍니다. 두 형식 모두 디자인 도구, 프레젠테이션 소프트웨어, 브라우저에서 널리 지원되므로 AI로 생성된 디자인을 필요한 어디든지 가져갈 수 있습니다.

​

디자인을 내보내는 방법

​

JPG와 PNG: 어떤 형식을 사용해야 할까요?

​

코드 내보내기

이미지 외에도 Code 버튼을 사용하면 디자인을 React + Tailwind 코드로 내보낼 수 있습니다. 스니펫을 복사하거나 전체 번들을 ZIP으로 다운로드할 수 있습니다. 단일 화면, 여러 선택된 화면 또는 전체 파일을 한 번에 내보낼 수 있습니다. 둘 이상의 화면을 내보낼 때, 각 화면은 자체 컴포넌트 파일이 되고 화면 간에 설정한 모든 네비게이션이 생성된 코드에 연결되므로 내보낸 앱은 처음부터 끝까지 클릭 가능합니다. 번들은 자체 포함됩니다. 디자인에 사용되는 이미지(채팅 패널에 첨부한 이미지 포함)는 public/assets/ 폴더에 포함되며 코드는 로컬 경로로 참조하므로 내보내기가 있는 그대로 실행됩니다. 다운로드된 파일(이미지와 코드 번들 모두)은 속한 화면의 이름으로 지정됩니다(화면 이름이 없으면 파일 이름으로 대체됨). 이렇게 하면 많은 화면으로 작업할 때 내보내기를 쉽게 식별할 수 있습니다.

​

코딩 에이전트로 디자인 전송

파일을 다운로드하는 대신 디자인을 AI 코딩 어시스턴트에게 바로 전달할 수 있습니다. 도구 모음에서 Send to your coding agent를 클릭하거나 내보내기 대화상자를 열고 동일한 옵션을 선택하여 에이전트에 붙여넣을 준비가 된 프롬프트를 복사합니다.

에이전트가 MCP를 통해 이러한 화면을 읽고 저장소에서 빌드합니다. 이 프롬프트를 Claude, Cursor 또는 선호하는 에이전트에 붙여넣습니다.

프롬프트는 에이전트에게 Flowstep MCP 서버를 통해 화면을 가져와서 코드베이스에서 다시 빌드하도록 지시합니다. 단일 화면, 여러 선택된 화면 또는 전체 파일을 한 번에 인수인계할 수 있으며, 프롬프트는 선택한 내용에 맞게 조정됩니다. 이는 Flowstep MCP 서버를 사용하므로 먼저 MCP 클라이언트를 연결합니다. 지원되는 클라이언트는 MCP 서버 개요를 참조하고 클라이언트를 연결하려면 빠른 시작을 참조합니다.