MCP 예제

1. 화면 생성 및 미리보기

가장 흔한 워크플로입니다. 같은 단계에서 파일을 만들면서 화면을 생성한 다음 결과를 확인하세요.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

fileId를 생략하면 새 파일이 자동으로 만들어집니다. 기존 fileId를 전달하면 해당 파일에 화면을 추가합니다. AI 어시스턴트에 입력할 프롬프트:

Flowstep 디자인을 생성해 줘. 개발자 도구용 모바일 로그인 화면을 다크 테마로 만들고, 이메일/비밀번호 입력란과 Google SSO 버튼을 넣어줘. 그다음 이미지를 보여줘.

2. React 컴포넌트 시각화

.jsx 또는 .tsx 파일을 첨부 파일로 업로드하고, Flowstep에 맞는 디자인을 생성하도록 요청하세요. Flowstep이 소스를 읽고 화면을 생성합니다. 앱을 실행할 필요가 없습니다.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

소스 파일이 64,000자보다 길면 mimeType과 fileName을 함께 사용해 upload-attachment를 호출하고, 반환된 uploadCommand를 실행하세요. upload-attachment를 참고하세요. AI 어시스턴트에 입력할 프롬프트:

src/components/settings/ApiKeys.tsx를 읽고 첨부 파일로 업로드한 다음, 컴포넌트 레이아웃에 맞는 Flowstep 화면을 생성해 줘. 렌더링된 이미지를 보여줘.

3. 화면 반복 수정

자유 형식 지시로 기존 화면을 제자리에서 변경하고, 같은 호출에서 그 화면에 맞는 새 화면도 추가하세요.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds에는 호출에서 만들었거나 변경한 모든 화면이 나열되므로, 각 화면에 대해 get-screen-image를 한 번씩 호출하세요. 기존 화면만 편집하려면 메시지의 마지막 문장을 빼세요. 화면의 일부만 변경하려면 먼저 "includeIds": true를 사용해 get-screen-jsx를 호출하고, 바꾸려는 요소의 data-id를 elementIds에 전달하세요. 화면 전체에 원클릭 프리셋을 적용하려면 대신 ai-edit-screen-variant를 호출하세요. 예를 들어 "operationVariant": "light_theme" 또는 "different_layout"을 사용할 수 있습니다. AI 어시스턴트에 입력할 프롬프트:

“Login flow” Flowstep 파일에서 로그인 화면을 다크 모드로 바꾸고, 비밀번호 입력란 아래에 “Remember me” 체크박스를 추가해 줘. 그리고 이에 맞는 비밀번호 찾기 화면도 추가해 줘. 결과를 보여줘.

4. 화면을 전체 흐름으로 확장

기존 디자인에 후속 화면을 추가하세요.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

2단계를 operationVariant: "error_state" 또는 "empty_state"로 반복하면 예외 상황 화면을 추가할 수 있습니다. 다른 플랫폼용 화면은 "web_version" 또는 "tablet_version"으로 추가하세요.

operationVariant는 ai-generate-screen-variant에 필수이며, 이 도구는 정확히 하나의 screenId만 받습니다. 기존 화면의 변형이 아닌 화면을 추가하려면 fileId와 함께 ai-design-screens를 사용하세요.

5. 화면을 코드베이스로 넘기고 변경 사항 다시 쓰기

화면을 JSX로 읽고, 이를 바탕으로 구현한 다음 편집한 JSX를 캔버스에 다시 반영하세요. 이 과정에서는 메시지를 사용하지 않습니다.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

생략한 필드(name, fidelity, screenType, colorTheme, fragments)는 현재 값을 유지합니다. 원본을 유지하고 내 버전을 옆에 추가하려면 replace-screen-jsx 대신 screenType과 jsx를 사용해 add-screen-jsx를 호출하세요. 화면에 직접 만든 이미지를 넣으려면 upload-attachment로 업로드한 다음, 반환된 assetUrl을 JSX의 img src에 넣으세요. JSX의 이미지를 참고하세요.

6. 일괄 작업 전에 사용량 확인

여러 생성을 시작하기 전에 남은 용량을 확인하세요. get-plan-details는 무료로 호출할 수 있습니다.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

remaining.messages.daily가 적으면, 초기화되는 UTC 00:00 이후로 일괄 작업을 예약하세요.

시작하기

Flowstep 사용하기

팀 및 조직

내보내기 및 연동

MCP 서버

결제 및 요금제

보안 및 개인정보

1. 화면 생성 및 미리보기

2. React 컴포넌트 시각화

3. 화면 반복 수정

4. 화면을 전체 흐름으로 확장

5. 화면을 코드베이스로 넘기고 변경 사항 다시 쓰기

6. 일괄 작업 전에 사용량 확인

​1. 화면 생성 및 미리보기

​2. React 컴포넌트 시각화

​3. 화면 반복 수정

​4. 화면을 전체 흐름으로 확장

​5. 화면을 코드베이스로 넘기고 변경 사항 다시 쓰기

​6. 일괄 작업 전에 사용량 확인

1. 화면 생성 및 미리보기

2. React 컴포넌트 시각화

3. 화면 반복 수정

4. 화면을 전체 흐름으로 확장

5. 화면을 코드베이스로 넘기고 변경 사항 다시 쓰기

6. 일괄 작업 전에 사용량 확인