Dokumentacja narzędzi MCP

Po pomyślnym wykonaniu każde narzędzie, z wyjątkiem get-screen-image, zwraca wynik dwukrotnie: jako structuredContent (zwalidowany względem opublikowanego schematu wyjścia narzędzia) oraz jako ten sam obiekt zserializowany w bloku tekstowym { type: "text", text: "<json-string>" }, dla klientów, które nie odczytują structured content. get-screen-image zwraca wyłącznie blok obrazu MCP: { type: "image", data: "<base64>", mimeType: "image/png" }. W przypadku błędu ustawiane jest isError: true, a blok tekstowy zawiera krótki komunikat. Błędy, które możesz naprawić (niezgodność nazwy przy usuwaniu, nieprawidłowy link Figma, nieprawidłowe wytyczne projektowe, problem z załącznikiem lub przekroczenie czasu generowania), wyjaśniają, co trzeba poprawić. Pozostałe błędy zwracają ogólny komunikat, na przykład Failed to list files.

Cennik: trzy narzędzia projektowania AI, czyli ai-design-screens, ai-generate-screen-variant i ai-edit-screen-variant, korzystają z tego samego limitu wiadomości co aplikacja Flowstep. Wszystkie pozostałe narzędzia są bezpłatne. Zobacz Limity użycia.

Każde narzędzie publikuje też adnotacje MCP, które informują klienta, co robi. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens i ai-edit-screen-variant są oznaczone jako destrukcyjne, ponieważ usuwają lub nadpisują istniejącą treść.

Narzędzia plików

`list-files`

Wyświetla metadane Twoich plików Flowstep. Wywołaj to narzędzie najpierw, aby sprawdzić, czy istnieje już odpowiedni plik. Nie zwraca treści ekranów. Do tego użyj get-screen-image lub get-screen-jsx. Wejście

Parametr	Typ	Domyślnie	Opis
`orderByCreation`	`boolean`	`true`	Sortuje od najnowszych według `created_at` (`true`) lub według `updated_at` (`false`). Użyj `false`, aby znaleźć ostatnio edytowane pliki
`limit`	`integer` (1–100)	`20`	Maksymalna liczba zwróconych plików. Pełna strona może oznaczać, że istnieje więcej plików
`offset`	`integer` (≥0)	`0`	Liczba plików do pominięcia. Następna strona to `offset + limit`

Wyjście: { files }.

{
  "files": [
    {
      "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
      "name": "Dashboard redesign",
      "created_at": "2026-04-30T15:02:13.120152+00:00",
      "updated_at": "2026-04-30T15:02:13.120152+00:00",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner: true, jeśli utworzyłeś plik.
shared_with_me: true, jeśli plik został udostępniony Ci bezpośrednio, a nie tylko przez organizację.
url: otwiera plik w edytorze Flowstep.

`get-file`

Pobiera metadane pojedynczego pliku. Zawartość pliku jest celowo pomijana. Aby sprawdzić ekrany, użyj get-screen-image lub get-screen-jsx, a aby pobrać przypisane wytyczne, użyj get-design-guidelines. Jeśli masz oczekujące zaproszenie do pliku, wywołanie get-file je akceptuje. Wejście

Parametr	Typ	Opis
`id`	`uuid`	ID pliku

Wyjście: { file, user_access_level }.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level: private, read lub write.
visibility: private, member lub public.
user_access_level: Twój dostęp do pliku: read lub write.

`create-file`

Tworzy pusty plik Flowstep bez ekranów. Aby w jednym kroku utworzyć plik i wygenerować ekrany, wywołaj zamiast tego ai-design-screens bez fileId. Użyj create-file w przepływach pracy zaczynających się od kodu, a następnie wywołaj add-screen-jsx. Wejście

Parametr	Typ	Opis
`name`	`string` (min. 1)	Nazwa wyświetlana nowego pliku

Wyjście: { file, user_access_level }, w tym samym formacie co get-file. owner ma zawsze wartość true, a user_access_level zawsze wartość write. Zwrócone file.id użyj jako fileId w kolejnych wywołaniach narzędzi.

`update-file`

Zmienia nazwę pliku. Wejście

Parametr	Typ	Opis
`id`	`uuid`	ID pliku
`name`	`string` (min. 1)	Nowa nazwa wyświetlana

Wyjście: { file, user_access_level }, w tym samym formacie co get-file.

`delete-file`

Trwale usuwa plik. Przekazana przez Ciebie name jest sprawdzana względem aktualnej nazwy wyświetlanej pliku przed usunięciem. Jeśli nie pasuje, usuwanie zostaje przerwane. Dzięki temu nie usuniesz przypadkowo niewłaściwego pliku. Agenty są instruowane, aby najpierw potwierdzić to z Tobą. Wejście

Parametr	Typ	Opis
`id`	`uuid`	ID pliku
`name`	`string`	Aktualna nazwa wyświetlana pliku. Musi pasować, w przeciwnym razie usuwanie zostaje przerwane

Wyjście: { "deleted": true }

Tej operacji nie można cofnąć. Wszystkie ekrany w pliku zostaną usunięte.

Narzędzia ekranów

`list-screens`

Wyświetla listę ekranów w pliku w kolejności na płótnie. Wywołaj to narzędzie po list-files, aby zobaczyć, co znajduje się w pliku. Zwrócone wartości screenId używaj w pozostałych narzędziach ekranów oraz w narzędziach projektowania AI. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku

Wyjście: { screens }.

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt: ostatni prompt generowania dla ekranu lub pusty ciąg znaków, jeśli ekran nigdy nie został wygenerowany (na przykład ekran dodany przez add-screen-jsx).
fidelity: lofi, hifi lub ui.

`get-screen-image`

Renderuje ekran do PNG i zwraca go jako obraz w rozmowie. Wymaga klienta obsługującego bloki obrazów. Wywołaj je raz dla każdego screenId zwróconego przez narzędzie projektowania AI, add-screen-jsx, replace-screen-jsx lub import-figma. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku
`screenId`	`uuid`	`screenId` z `list-screens` lub z tablicy `screenIds` zwróconej przez narzędzie projektowania

Wyjście: blok obrazu MCP (image/png). data to standardowy base64 bajtów PNG, a nie URI danych. To narzędzie nie zwraca structuredContent.

`get-screen-jsx`

Pobiera ekran jako JSX wraz z jego metadanymi. Dzięki temu możesz zbudować na jego podstawie w swojej bazie kodu albo go edytować i zapisać z powrotem za pomocą replace-screen-jsx. Aby uzyskać wizualny podgląd, użyj zamiast tego get-screen-image. Wejście

Parametr	Typ	Domyślnie	Opis
`fileId`	`uuid`	—	ID pliku
`screenId`	`uuid`	—	`screenId` z `list-screens` lub z tablicy `screenIds` zwróconej przez narzędzie projektowania
`includeIds`	`boolean`	`false`	Dodaje atrybut `data-id` do elementów w `jsx`. Użyj tej opcji, gdy potrzebujesz identyfikatorów elementów do przekazania jako `elementIds` do `ai-design-screens`, czy to do edycji w miejscu, czy jako odniesienia wizualnego

Wyjście: { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx: wyłącznie znaczniki. Atrybuty data-id są dołączane tylko wtedy, gdy includeIds ma wartość true.
prompt: ostatni prompt generowania lub pusty ciąg znaków, jeśli ekran nigdy nie został wygenerowany.
fragments: wspólne elementy interfejsu zapisane na ekranie, takie jak pasek nawigacji, nagłówek lub logo, jako obiekty { purpose, markup }. Pusta, jeśli ich nie ma. Przekaż je z powrotem do replace-screen-jsx, aby je zachować lub zaktualizować.

Wartości fidelity, screenType i colorTheme znajdziesz w sekcji Wartości pól ekranu.

`add-screen-jsx`

Dodaje do pliku nowy ekran na podstawie napisanego przez Ciebie JSX. To ścieżka dla podejścia od kodu i jest bezpłatna. Użyj ai-design-screens, gdy chcesz, aby AI Flowstep zaprojektowało ekran. add-screen-jsx zawsze tworzy nowy ekran. Aby nadpisać istniejący, użyj replace-screen-jsx. Aby pokazać przesłany obraz, zobacz Obrazy w JSX. Jeśli nowy ekran ma być oparty na istniejącym, zacznij od get-screen-jsx (bez includeIds), aby pobrać name, fidelity, screenType, colorTheme i jsx, a następnie zmień to, co ma się różnić. Wejście

Parametr	Typ	Domyślnie	Opis
`fileId`	`uuid`	—	ID pliku
`name`	`string` (1–100 znaków)	—	Opcjonalna nazwa wyświetlana. Pomiń ją, aby ekran otrzymał automatyczną nazwę `Screen N`
`fidelity`	`string`	`"ui"`	Poziom szczegółowości ekranu
`screenType`	`string`	—	Wymagane: urządzenie lub obszar widoku, dla którego zaprojektowano ekran
`colorTheme`	`string`	`"default"`	Motyw kolorystyczny
`jsx`	`string`	—	Wyłącznie znaczniki JSX. Atrybuty `data-id` są ignorowane, a nowy ekran otrzymuje nowe identyfikatory elementów

Wyjście: { fileId, screenId }. Wywołaj get-screen-image z screenId, aby zobaczyć wynik.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

Nadpisuje istniejący ekran napisanym przez Ciebie JSX. Ekran zachowuje swój screenId i pozycję na płótnie, a zagnieżdżone elementy otrzymują nowe identyfikatory. To ścieżka dla podejścia od kodu i jest bezpłatna. Do zmian wykonywanych przez AI użyj ai-design-screens lub ai-edit-screen-variant, a aby utworzyć nowy ekran, użyj add-screen-jsx. Zacznij od get-screen-jsx (bez includeIds), a następnie zmień to, co ma się różnić. Aby pokazać przesłany obraz, zobacz Obrazy w JSX. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku
`screenId`	`uuid`	Ekran do nadpisania
`jsx`	`string`	Wyłącznie znaczniki JSX. Atrybuty `data-id` są ignorowane
`name`	`string` (1–100 znaków)	Opcjonalne. Pomiń, aby zachować aktualną nazwę
`fidelity`	`string`	Opcjonalne. Pomiń, aby zachować aktualny poziom szczegółowości
`screenType`	`string`	Opcjonalne. Pomiń, aby zachować aktualny typ ekranu
`colorTheme`	`string`	Opcjonalne. Pomiń, aby zachować aktualny motyw kolorystyczny
`fragments`	`{ purpose, markup }[]`	Opcjonalne wspólne elementy interfejsu z `get-screen-jsx`. Pomiń, aby zachować aktualne fragmenty, lub przekaż `[]`, aby je wyczyścić

Wyjście: { fileId, screenId }. Wywołaj get-screen-image z screenId, aby zobaczyć wynik.

To zastępuje zawartość ekranu w miejscu.

`rename-screen`

Zmienia etykietę ekranu na płótnie, czyli nazwę pokazywaną w list-screens i w edytorze. Zmienia tylko etykietę, a nie układ, rozmiar ani zawartość ekranu. Do tego użyj ai-design-screens. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku
`screenId`	`uuid`	`screenId` zwrócony przez `list-screens`
`name`	`string` (1–100 znaków)	Nowa nazwa ekranu. Białe znaki na początku i na końcu są usuwane

Wyjście: { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

Trwale usuwa ekran z pliku. Przekazana przez Ciebie name jest sprawdzana względem aktualnej nazwy wyświetlanej ekranu. Jeśli nie pasuje, usuwanie zostaje przerwane. Agenty są instruowane, aby najpierw potwierdzić to z Tobą. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku
`screenId`	`uuid`	Ekran do usunięcia
`name`	`string`	Aktualna nazwa wyświetlana ekranu. Musi pasować, w przeciwnym razie usuwanie zostaje przerwane

Wyjście: { "deleted": true }

Obrazy w JSX

add-screen-jsx i replace-screen-jsx akceptują obrazy w src elementu img albo jako tło w className z użyciem bg-[url(...)]. Napisz tekst alt i dopasuj rozmiar każdego obrazu do jego zastosowania. Aby umieścić własny obraz:

Prześlij go za pomocą upload-attachment w trybie A (mimeType + fileName) i uruchom zwrócone uploadCommand.
Jeśli type w odpowiedzi ma wartość "image", wklej assetUrl dokładnie tak, jak zwrócono, do img src albo bg-[url(assetUrl)].

Każdy inny adres URL obrazu pozostaw dokładnie tak, jak zwrócił go get-screen-jsx. Nie wstawiaj path, signedUrl ani uploadCommand do src.

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

Wartości pól ekranu

get-screen-jsx zwraca, a add-screen-jsx i replace-screen-jsx przyjmują następujące wartości:

Pole	Wartości
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

Narzędzia wytycznych projektowych

Wytyczne projektowe to tekst DESIGN.md zapisany w pliku. Gdy są ustawione, są wstrzykiwane do każdej generacji AI dla tego pliku. Zobacz Wytyczne projektowe.

`get-design-guidelines`

Pobiera wytyczne projektowe przypisane do pliku. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku

Wyjście: { guidelines }.

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

guidelines ma wartość null, jeśli wytyczne nie zostały ustawione.

`update-design-guidelines`

Ustawia lub zastępuje wytyczne projektowe pliku. Przekaż wytyczne jako zwykły ciąg znaków w formacie DESIGN.md Google, a nie jako obiekt ani JSON. Jeśli czytasz je z pliku, przekaż tekst tego pliku. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku
`designGuidelines`	`string` (min. 1)	Surowy tekst wytycznych. Musi być zwykłym ciągiem znaków, a nie zakodowanym JSON

Reguły walidacji

Frontmatter musi być poprawnie otwarty i zamknięty
Linie frontmatter muszą być poprawnym YAML w stylu blokowym
Treść Markdown nie może zawierać zduplikowanych nagłówków sekcji ##

Jeśli walidacja się nie powiedzie, wywołanie zwraca błąd zaczynający się od Invalid design guidelines:. Wyjście: { updated, warnings? }.

{ "updated": true, "warnings": ["…"] }

warnings zawiera miękkie problemy walidacji (nieznane klucze, kolory niebędące w formacie szesnastkowym), które zostały zaakceptowane, ale AI może je zignorować. Pole jest pomijane, gdy nie ma ostrzeżeń. Przekaż je użytkownikowi.

`delete-design-guidelines`

Czyści wytyczne projektowe pliku. Usunięcie nieistniejących wytycznych nie wykonuje żadnej operacji. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku

Wyjście: { "deleted": true }

Narzędzia czatu

`get-chat-history`

Pobiera rozmowę projektową powiązaną z plikiem, czyli czat Flowstep tego pliku, a nie rozmowę w Twoim kliencie MCP. Użyj go, aby wznowić wcześniejszą pracę nad plikiem. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	ID pliku

Wyjście: { messages }. Lista messages jest pusta, jeśli w pliku nie ma rozmowy projektowej. Każda wiadomość ma type ("request" lub "response"), author ("human" lub "ai") oraz content_type. Wiadomości odpowiedzi używają wartości "text", "summary" lub "followup".

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }]
    }
  ]
}

Narzędzia załączników

`upload-attachment`

Przesyła plik referencyjny, który ma zostać użyty jako załącznik w ai-design-screens, albo obraz do umieszczenia we własnym JSX za pomocą add-screen-jsx lub replace-screen-jsx. ai-generate-screen-variant i ai-edit-screen-variant nie przyjmują załączników. Bajty pliku nigdy nie przechodzą przez model, a serwer nigdy nie pobiera adresów URL w Twoim imieniu. Aby odwołać się do strony internetowej, dołącz jej adres URL do message w ai-design-screens. Dostępne są dwa tryby. Użyj dokładnie jednego i nie łącz ich. Tryb A: pliki i obrazy (mimeType + fileName) Wymagany trzyetapowy przepływ dla każdego obrazu, pliku PDF lub większego pliku tekstowego:

Wywołaj upload-attachment tylko z mimeType i fileName (na przykład image/png i dog.png). Odpowiedź to przygotowane przesłanie, a nie zapisany plik:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Zastąp LOCAL_FILE_PATH w uploadCommand bezwzględną ścieżką do swojego pliku i uruchom to dokładne polecenie w powłoce. Musi zakończyć się kodem 0. Token w signedUrl autoryzuje tylko to jedno przesłanie. Pominięcie tego kroku zostawia magazyn pusty, a narzędzie projektowe kończy się niepowodzeniem w kontroli wstępnej.
Przekaż do tablicy attachments w ai-design-screens tylko { id, path, type }, bez signedUrl, uploadCommand i nextStep. Aby zamiast tego umieścić obraz we własnym JSX, wstaw assetUrl do img src lub bg-[url(...)] w JSX, który przekazujesz do add-screen-jsx lub replace-screen-jsx. Zobacz Obrazy w JSX.

Aby dołączyć zdalny plik, najpierw sam pobierz go na ścieżkę lokalną (na przykład za pomocą curl), a następnie wykonaj te same trzy kroki. Nigdy nie przekazuj adresu URL do upload-attachment.

Parametr	Typ	Opis
`mimeType`	enum	Typ MIME pliku. Jedna z wartości: `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Użyj `text/javascript` dla plików `.jsx`, `.tsx`, `.js` i `.ts`
`fileName`	`string` (min. 1)	Oryginalna nazwa pliku z rozszerzeniem, na przykład `cat.png` lub `design.md`

Tryb B: krótki tekst (text + mimeType) Przesyła tekst, który jest już w kontekście. Nie jest potrzebne żadne polecenie powłoki. Odpowiedź jest gotowa do użycia od razu:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "document",
  "mimeType": "text/plain"
}

Parametr	Typ	Opis
`text`	`string` (maks. 64 000 znaków)	Surowa zawartość tekstowa. Tylko pliki tekstowe. Nie używaj dla obrazów ani plików PDF. Jeśli tekst jest dłuższy niż 64 000 znaków, użyj trybu A
`mimeType`	enum	Jedna z wartości: `text/markdown`, `text/plain`, `text/javascript`

Przekaż wynikowe { id, path, type } do tablicy attachments w ai-design-screens. Maksymalny rozmiar pliku wynosi 3 MB w obu trybach, a pliki PDF są ograniczone do 100 stron. Wyjście: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" dla plików graficznych i "document" dla plików PDF i plików tekstowych.
assetUrl: adres URL przesłanego pliku, zwracany w obu trybach. Użyj go w JSX dla add-screen-jsx lub replace-screen-jsx tylko wtedy, gdy type ma wartość "image" i dopiero po uruchomieniu uploadCommand z trybu A.
signedUrl, uploadCommand, nextStep: ustawiane tylko w trybie A. Nie przekazuj ich do narzędzi projektowych.

Narzędzia Figma

`import-figma`

Importuje ramkę Figma do pliku Flowstep jako edytowalne elementy na jego płótnie. Każdy import dodaje nowy ekran. Zaimportowanie tej samej ramki dwa razy daje dwa ekrany, więc jeśli chcesz ją zastąpić, usuń starą za pomocą delete-screen. Organizacja, do której należy plik, musi mieć połączoną Figmę w ustawieniach Flowstep. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	Plik Flowstep, do którego ma zostać zaimportowana ramka. To nie jest klucz pliku Figma z `figmaUrl`
`figmaUrl`	`string`	Link do konkretnej ramki Figma z `node-id`. W Figma kliknij ramkę prawym przyciskiem myszy i wybierz Copy/Paste as → Copy link to selection. Link do strony importuje wszystkie ramki najwyższego poziomu na tej stronie (przez MCP maksymalnie 20 ramek)

Wyjście: { fileId, screenId, frameCount? }. screenId to zaimportowany ekran. Przekaż go do get-screen-image, aby zobaczyć wynik. Gdy adres URL strony importuje wiele ramek, screenId ma wartość null, a zamiast niego zwracane jest frameCount. Wywołaj wtedy list-screens, a następnie get-screen-image dla każdego nowego ekranu.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Narzędzia planu i rozliczeń

`get-plan-details`

Pobiera plan Flowstep Twojej organizacji, status subskrypcji, zużycie i pozostały limit. Nie przyjmuje żadnych danych wejściowych, a organizacja jest ustalana na podstawie zalogowanego użytkownika. Użyj go, aby sprawdzić swój limit przed wywołaniem narzędzi projektowania AI. Wyjście: { plan, subscription, limits, usage, remaining }.

Pole	Opis
`plan`	`{ name, code, type }`. `type` ma wartość `"free"` lub `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Limity dla każdej funkcji, kluczowane według funkcji (na przykład `messages`). Każdy zawiera opcjonalne obiekty `daily` i `monthly` z wartościami `max` i `warn` oraz flagę `unlimited`
`usage`	Zużycie dla każdej funkcji do tej pory, jako `{ daily, monthly }`
`remaining`	Pozostały limit dla każdej funkcji, jako `{ daily, monthly }`. Pomijane dla funkcji bez limitu

Limity zależą od planu. Zobacz Cennik oraz Limity użycia.

Narzędzia projektowania AI

Te trzy narzędzia projektują na podstawie opisu lub presetu. Nigdy nie przyjmują ani nie wykorzystują ponownie JSX. Każde wywołanie korzysta z tego samego limitu wiadomości co aplikacja Flowstep i blokuje się do zakończenia generacji lub przekroczenia limitu czasu (180 sekund).

Narzędzie	Użyj go, aby
`ai-design-screens`	Generować nowe ekrany, zmieniać istniejące ekrany w miejscu albo jedno i drugie, na podstawie opisu w dowolnej formie
`ai-generate-screen-variant`	Dodać następny krok, stan błędu lub pustego stanu albo wariant platformy dla jednego istniejącego ekranu
`ai-edit-screen-variant`	Zastosować preset edycji lub przeprojektowania do jednego całego istniejącego ekranu

Wszystkie trzy zwracają { status, fileId, screenIds, designGuidelinesUpdated }. Wywołaj get-screen-image raz dla każdego screenId, aby zobaczyć wynik.

designGuidelinesUpdated: krótkie podsumowanie zmiany, gdy wytyczne DESIGN.md pliku zostały automatycznie zaktualizowane podczas tej tury. W przeciwnym razie wartość null.

`ai-design-screens`

Generuje jeden lub więcej nowych ekranów, zmienia istniejące ekrany w miejscu albo wykonuje jedno i drugie w jednym wywołaniu, na podstawie opisu tekstowego. Dotyczy to nowych przepływów, motywów, treści, układu lub skoordynowanych zmian w kilku ekranach. To ten sam agent projektowy co czat w edytorze Flowstep. Na podstawie message i elementIds decyduje, co zbudować, a co zmienić. Pomiń fileId, aby rozpocząć nowy plik. Przekaż fileId, aby pracować w istniejącym pliku. Jeśli żądanie może dotyczyć pliku, który już masz, Twój agent powinien najpierw sprawdzić list-files i list-screens. Dla następnego kroku, stanu błędu lub pustego stanu albo wariantu platformy dla jednego ekranu użyj ai-generate-screen-variant. Dla gotowego presetu edycji lub przeprojektowania jednego ekranu użyj ai-edit-screen-variant. Jeśli masz już JSX, użyj zamiast tego add-screen-jsx lub replace-screen-jsx. Wejście

Parametr	Typ	Domyślnie	Opis
`fileId`	`uuid`	—	Plik docelowy. Pomiń, aby utworzyć nowy plik. Wymagany, gdy ustawiono `elementIds`
`message`	`string`	—	Opis ekranów do wygenerowania lub zmian do wprowadzenia. Gdy przekazujesz `elementIds`, napisz, czy mają zostać edytowane, czy użyte jako odniesienie. Adresy URL stron internetowych, do których chcesz, aby Flowstep się odwołało, podaj tutaj
`elementIds`	`uuid[]`	`[]`	Opcjonalne `screenId` z `list-screens` i/lub `data-id` elementów z `get-screen-jsx` (z `includeIds`), jak zaznaczenie w edytorze. Mogą zostać edytowane w miejscu albo użyte jako odniesienie wizualne dla nowych ekranów. `screenId` wskazuje cały ekran
`attachments`	`{ id, path, type }[]` (maks. 5)	`[]`	Pliki z `upload-attachment`: obrazy, pliki PDF lub pliki kodu i tekstowe. Nie wstawiaj zawartości plików do wiadomości

Przykład: edycja jednego ekranu i dodanie drugiego w jednym wywołaniu:

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

Wyjście: { status, fileId, screenIds, designGuidelinesUpdated, reply? }.

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status: "generated", gdy zbudowano lub zmieniono ekrany. "chat", gdy Flowstep odpowiedziało bez budowania. Wtedy reply zawiera odpowiedź, a screenIds jest puste. Jeśli Twoje zadanie jest niejednoznaczne, Twój agent powinien poprosić Cię o doprecyzowanie i ponownie wywołać narzędzie.
screenIds: każdy ekran zbudowany lub zmieniony podczas wywołania, w tym ekrany edytowane w miejscu. Jeśli wywołanie przekroczy limit czasu po zbudowaniu części ekranów, zwraca te ekrany zamiast błędu.

Ekrany, które poprosisz o edycję, są nadpisywane w miejscu.

`ai-generate-screen-variant`

Dodaje nowy ekran wyprowadzony z dokładnie jednego istniejącego ekranu: następny krok w przepływie, stan błędu lub pusty stan albo wersję dla innej platformy. Oryginalny ekran pozostaje bez zmian. Aby dodać ekran, który nie jest wariantem istniejącego (na przykład ekran ustawień), użyj ai-design-screens z fileId. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	Plik docelowy
`screenId`	`uuid`	Istniejący ekran, z którego ma powstać wariant
`operationVariant`	enum	Wymagane: sposób, w jaki nowy ekran odnosi się do istniejącego

`operationVariant`	Dodaje
`next_screen`	Następny ekran w przepływie użytkownika
`error_state`	Stan błędu ekranu
`empty_state`	Pusty stan ekranu
`web_version`	Wersję webową
`mobile_version`	Wersję mobilną
`tablet_version`	Wersję na tablet
`mobile_ios_version`	Wersję na iOS
`mobile_android_version`	Wersję na Androida

Wyjście: { status, fileId, screenIds, designGuidelinesUpdated }. status ma zawsze wartość "generated".

`ai-edit-screen-variant`

Zmienia dokładnie jeden istniejący ekran w miejscu, używając presetu: nadaje mu motyw lub je dopracowuje, wypróbowuje inny układ lub styl wizualny albo przeprojektowuje go od zera. Dla nowych ekranów, instrukcji w dowolnej formie lub precyzyjnej edycji poszczególnych elementów użyj ai-design-screens. Wejście

Parametr	Typ	Opis
`fileId`	`uuid`	Plik docelowy
`screenId`	`uuid`	Istniejący ekran do zmiany
`operationVariant`	enum	Wymagane: preset edycji lub przeprojektowania do zastosowania

`operationVariant`	Typ	Efekt
`dark_theme`	Edycja	Przełącza ekran na ciemny motyw
`light_theme`	Edycja	Przełącza ekran na jasny motyw
`make_pretty`	Edycja	Dopracowuje wizualny projekt ekranu
`different_layout`	Przeprojektowanie	Wypróbowuje inny układ
`different_style`	Przeprojektowanie	Wypróbowuje inny styl wizualny
`from_scratch`	Przeprojektowanie	Przeprojektowuje ekran od zera

Wyjście: { status, fileId, screenIds, designGuidelinesUpdated }. status ma zawsze wartość "generated".

To nadpisuje zawartość ekranu w miejscu.

Zmienione nazwy narzędzi

Nazwy narzędzi zmieniły się we wrześniu i październiku 2026 roku. Jeśli masz prompty, skrypty lub instrukcje dla agentów, które używają starych nazw, zaktualizuj je:

Stara nazwa	Nowa nazwa
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (instrukcje w dowolnej formie)	`ai-design-screens`
`edit-design` (z presetem `operationVariant`)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Zmieniły się także dane wejściowe: narzędzia projektowania AI przyjmują elementIds (lub pojedyncze screenId dla narzędzi wariantów) zamiast targets, add-screen-jsx przyjmuje jsx i jawne pola metadanych zamiast jsxContent z komentarzem metadanych, create-file przyjmuje name zamiast title, a narzędzia wytycznych projektowych przyjmują fileId zamiast resourceId i linkedTo.

​Narzędzia plików

​list-files

​get-file

​create-file

​update-file

​delete-file

​Narzędzia ekranów

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Obrazy w JSX

​Wartości pól ekranu

​Narzędzia wytycznych projektowych

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Narzędzia czatu

​get-chat-history

​Narzędzia załączników

​upload-attachment

​Narzędzia Figma

​import-figma

​Narzędzia planu i rozliczeń

​get-plan-details

​Narzędzia projektowania AI

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Zmienione nazwy narzędzi

Narzędzia plików

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Narzędzia ekranów

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Obrazy w JSX

Wartości pól ekranu

Narzędzia wytycznych projektowych

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Narzędzia czatu

`get-chat-history`

Narzędzia załączników

`upload-attachment`

Narzędzia Figma

`import-figma`

Narzędzia planu i rozliczeń

`get-plan-details`

Narzędzia projektowania AI

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Zmienione nazwy narzędzi