> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep란 무엇인가요?

> Flowstep는 텍스트 프롬프트로부터 세련된 UI 화면을 생성하는 AI 디자인 도구입니다. Flowstep의 기능, 누가 사용하는지, 어떤 것을 만들 수 있는지 알아보세요.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

원하는 화면을 설명하면 몇 초 안에 디자인된 인터페이스를 받을 수 있습니다.

개발자에게는 코드를 작성하기 전에 UI를 지정하는 가장 빠른 방법입니다. PM과 창업자에게는 제품 아이디어를 모호함 없이 전달하는 방법입니다. 디자이너에게는 빈 캔버스를 건너뛰는 시작점입니다.

## Flowstep으로 할 수 있는 것

* **텍스트로부터 화면 생성** — 원하는 것을 설명하면 몇 초 안에 디자인된 UI를 받을 수 있습니다
* **프롬프트 또는 직접 편집으로 반복** — 캔버스를 떠나지 않고 레이아웃, 텍스트 및 스타일을 개선합니다
* **대화형 프로토타입으로 미리보기** — Flowstep은 자동으로 화면을 클릭 가능한 흐름으로 연결합니다. [프로토타입](/ko/prototypes)을 참조하세요.
* **MCP를 통해 IDE에 연결** — Cursor, Claude Code, Windsurf 또는 Claude Desktop에서 화면을 생성하고 편집합니다. [MCP 서버](/ko/mcp/overview)를 참조하세요.
* **Figma, 코드 또는 이미지 파일로 내보내기** — 기존 Figma 파일에 바로 붙여넣거나, 코드로 내보내거나, 화면을 PNG/JPG로 다운로드합니다
* **한 개의 링크로 공유** — 검토자가 보거나 댓글을 달기 위해 Flowstep 계정이 필요하지 않습니다

## Flowstep의 대상

* **개발자** — 디자이너가 없이 제품 UI를 만들거나 구현하기 전에 화면을 시각적으로 지정하려는 경우
* **제품 관리자와 창업자** — 아이디어를 시각적으로 전달하거나 아이디어를 검증하려는 경우
* **디자이너** — 빈 캔버스를 건너뛰고 생성된 레이아웃에서 시작하여 편집합니다

<Note>
  디자인 경험이 필요하지 않습니다. 간단한 텍스트로 화면을 설명할 수 있으면 Flowstep이 생성할 수 있습니다.
</Note>

## 다음 단계

<CardGroup cols={2}>
  <Card title="빠른 시작" icon="rocket" href="/ko/getting-started">
    5분 이내에 첫 번째 화면을 생성합니다.
  </Card>

  <Card title="MCP 서버" icon="terminal" href="/ko/mcp/overview">
    Cursor, Claude Code 또는 MCP 호환 클라이언트에서 Flowstep을 사용합니다.
  </Card>

  <Card title="디자인 생성" icon="wand-magic-sparkles" href="/ko/generating-designs">
    실제로 원하는 화면을 생성하는 프롬프트를 작성하는 방법입니다.
  </Card>

  <Card title="Figma 통합" icon="figma" href="/ko/figma-integration">
    한 개의 단축키로 Flowstep 디자인을 기존 Figma 파일에 붙여넣습니다.
  </Card>
</CardGroup>