Referencia de herramientas de MCP

Al completarse correctamente, todas las herramientas excepto get-screen-image devuelven su resultado dos veces: como structuredContent (validado con el esquema de salida publicado de la herramienta) y como el mismo objeto serializado en un bloque de texto, { type: "text", text: "<json-string>" }, para los clientes que no leen contenido estructurado. get-screen-image devuelve solo un bloque de imagen de MCP: { type: "image", data: "<base64>", mimeType: "image/png" }. Al fallar, se establece isError: true y el bloque de texto contiene un mensaje de error breve. Los errores que puedes resolver (una falta de coincidencia al eliminar, un enlace de Figma no válido, directrices de diseño no válidas, un problema con un adjunto o un tiempo de espera de generación) explican qué corregir. Otros fallos devuelven un mensaje genérico, como Failed to list files.

Precios: las tres herramientas de diseño con IA (ai-design-screens, ai-generate-screen-variant y ai-edit-screen-variant) usan la misma asignación de mensajes que la app de Flowstep. Todas las demás herramientas son gratuitas. Consulta Límites de uso.

Cada herramienta también publica anotaciones de MCP para que tu cliente sepa qué hace. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens y ai-edit-screen-variant se marcan como destructivas porque eliminan o sobrescriben contenido existente.

Herramientas de archivos

`list-files`

Lista los metadatos de tus archivos de Flowstep. Llámala primero para comprobar si ya existe un archivo relevante. No devuelve contenido de pantallas: para eso usa get-screen-image o get-screen-jsx. Entrada

Parámetro	Tipo	Predeterminado	Descripción
`orderByCreation`	`boolean`	`true`	Ordena del más reciente al más antiguo por `created_at` (`true`) o por `updated_at` (`false`). Usa `false` para encontrar archivos editados recientemente
`limit`	`integer` (1–100)	`20`	Número máximo de archivos devueltos. Una página completa puede indicar que existen más archivos
`offset`	`integer` (≥0)	`0`	Archivos que se omiten. La siguiente página es `offset + limit`

Salida: { 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 si creaste el archivo.
shared_with_me: true si el archivo se compartió contigo directamente, no solo a través de tu organización.
url: abre el archivo en el editor de Flowstep.

`get-file`

Obtén los metadatos de un único archivo. El contenido del archivo se omite a propósito: usa get-screen-image o get-screen-jsx para inspeccionar pantallas, y get-design-guidelines para obtener las directrices adjuntas. Si tienes una invitación pendiente al archivo, llamar a get-file la acepta. Entrada

Parámetro	Tipo	Descripción
`id`	`uuid`	ID del archivo

Salida: { 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 o write.
visibility: private, member o public.
user_access_level: tu acceso al archivo: read o write.

`create-file`

Crea un archivo de Flowstep en blanco, sin pantallas. Para crear un archivo y generar pantallas en un solo paso, llama a ai-design-screens sin fileId. Usa create-file en flujos de trabajo que empiezan con código, seguido de add-screen-jsx. Entrada

Parámetro	Tipo	Descripción
`name`	`string` (mín. 1)	Nombre visible del nuevo archivo

Salida: { file, user_access_level }, con la misma forma que get-file. owner siempre es true y user_access_level siempre es write. Usa el file.id devuelto como fileId en las llamadas posteriores a las herramientas.

`update-file`

Cambia el nombre de un archivo. Entrada

Parámetro	Tipo	Descripción
`id`	`uuid`	ID del archivo
`name`	`string` (mín. 1)	Nuevo nombre visible

Salida: { file, user_access_level }, con la misma forma que get-file.

`delete-file`

Elimina un archivo de forma permanente. El name que pasas se compara con el nombre visible actual del archivo antes de eliminarlo; si no coincide, la eliminación se cancela. Así se evita borrar por error el archivo equivocado. A los agentes se les indica que te pidan confirmación primero. Entrada

Parámetro	Tipo	Descripción
`id`	`uuid`	ID del archivo
`name`	`string`	Nombre visible actual del archivo: debe coincidir o la eliminación se cancela

Salida: { "deleted": true }

Esta acción es irreversible. Se eliminan todas las pantallas del archivo.

Herramientas de pantallas

`list-screens`

Lista las pantallas de un archivo, en el orden del lienzo. Llámala después de list-files para ver qué hay en un archivo. Usa los valores screenId devueltos con las demás herramientas de pantallas y con las herramientas de diseño con IA. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo

Salida: { 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: el último prompt de generación de la pantalla, o una cadena vacía si nunca se generó (por ejemplo, una pantalla añadida con add-screen-jsx).
fidelity: lofi, hifi o ui.

`get-screen-image`

Renderiza una pantalla a PNG y la devuelve como imagen en línea. Requiere un cliente que admita bloques de contenido de imagen. Llámala una vez por cada screenId devuelto por una herramienta de diseño con IA, add-screen-jsx, replace-screen-jsx o import-figma. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo
`screenId`	`uuid`	Un `screenId` de `list-screens` o del arreglo `screenIds` devuelto por una herramienta de diseño

Salida: bloque de contenido de imagen de MCP (image/png). data es base64 estándar de los bytes del PNG, no una URI de datos. Esta herramienta no devuelve structuredContent.

`get-screen-jsx`

Obtén una pantalla como JSX, junto con sus metadatos, para que puedas construir a partir de ella en tu código, o editarla y escribirla de vuelta con replace-screen-jsx. Para una vista previa visual, usa get-screen-image. Entrada

Parámetro	Tipo	Predeterminado	Descripción
`fileId`	`uuid`	—	ID del archivo
`screenId`	`uuid`	—	Un `screenId` de `list-screens` o del arreglo `screenIds` devuelto por una herramienta de diseño
`includeIds`	`boolean`	`false`	Incluye un atributo `data-id` en los elementos de `jsx`. Úsalo cuando necesites ids de elementos para pasarlos como `elementIds` a `ai-design-screens`, ya sea para editar en su lugar o como referencia visual

Salida: { 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: solo marcado. Los atributos data-id se incluyen únicamente cuando includeIds es true.
prompt: el último prompt de generación, o una cadena vacía si la pantalla nunca se generó.
fragments: elementos compartidos guardados en la pantalla, como una barra de navegación, un encabezado o un logotipo, en forma de objetos { purpose, markup }. Está vacío cuando no hay ninguno. Pásalos de vuelta a replace-screen-jsx para conservarlos o actualizarlos.

Consulta Valores de los campos de pantalla para los valores de fidelity, screenType y colorTheme.

`add-screen-jsx`

Añade una pantalla nueva a un archivo a partir de JSX que hayas escrito. Es la ruta que empieza con código y es gratuita: usa ai-design-screens cuando quieras que la IA de Flowstep diseñe la pantalla. add-screen-jsx siempre crea una pantalla nueva: para sobrescribir una existente, usa replace-screen-jsx. Para mostrar una imagen que hayas subido, consulta Imágenes en JSX. Cuando la pantalla nueva se basa en una existente, parte de get-screen-jsx (sin includeIds) para name, fidelity, screenType, colorTheme y jsx, y luego cambia lo que deba ser distinto. Entrada

Parámetro	Tipo	Predeterminado	Descripción
`fileId`	`uuid`	—	ID del archivo
`name`	`string` (1–100 caracteres)	—	Nombre visible opcional. Omítelo para que la pantalla se nombre automáticamente `Screen N`
`fidelity`	`string`	`"ui"`	Fidelidad de la pantalla
`screenType`	`string`	—	Obligatorio: el dispositivo o viewport para el que está diseñada la pantalla
`colorTheme`	`string`	`"default"`	Tema de color
`jsx`	`string`	—	Solo marcado JSX. Los atributos `data-id` se ignoran: la pantalla nueva recibe ids de elementos nuevos

Salida: { fileId, screenId }. Llama a get-screen-image con screenId para ver el resultado.

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

`replace-screen-jsx`

Sobrescribe una pantalla existente con JSX que hayas escrito. La pantalla conserva su screenId y su posición en el lienzo; los elementos anidados reciben ids nuevos. Es la ruta que empieza con código y es gratuita: usa ai-design-screens o ai-edit-screen-variant para cambios con IA, y add-screen-jsx para crear una pantalla nueva en su lugar. Parte de get-screen-jsx (sin includeIds) y luego cambia lo que deba ser distinto. Para mostrar una imagen que hayas subido, consulta Imágenes en JSX. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo
`screenId`	`uuid`	La pantalla que se va a sobrescribir
`jsx`	`string`	Solo marcado JSX. Los atributos `data-id` se ignoran
`name`	`string` (1–100 caracteres)	Opcional. Omítelo para conservar el nombre actual
`fidelity`	`string`	Opcional. Omítelo para conservar la fidelidad actual
`screenType`	`string`	Opcional. Omítelo para conservar el tipo de pantalla actual
`colorTheme`	`string`	Opcional. Omítelo para conservar el tema de color actual
`fragments`	`{ purpose, markup }[]`	Opcional. Elementos compartidos de `get-screen-jsx`. Omítelo para conservar los fragmentos actuales, o pasa `[]` para borrarlos

Salida: { fileId, screenId }. Llama a get-screen-image con screenId para ver el resultado.

Esto reemplaza el contenido de la pantalla en su lugar.

`rename-screen`

Cambia el nombre de la etiqueta de una pantalla en el lienzo: el nombre que muestran list-screens y el editor. Esto cambia solo la etiqueta, no la disposición, el tamaño ni el contenido de la pantalla; para eso usa ai-design-screens. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo
`screenId`	`uuid`	El `screenId` devuelto por `list-screens`
`name`	`string` (1–100 caracteres)	Nuevo nombre de la pantalla. Se eliminan los espacios al principio y al final

Salida: { screenId, name }.

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

`delete-screen`

Elimina una pantalla de un archivo de forma permanente. El name que pasas se compara con el nombre visible actual de la pantalla; si no coincide, la eliminación se cancela. A los agentes se les indica que te pidan confirmación primero. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo
`screenId`	`uuid`	La pantalla que se va a eliminar
`name`	`string`	Nombre visible actual de la pantalla: debe coincidir o la eliminación se cancela

Salida: { "deleted": true }

Imágenes en JSX

add-screen-jsx y replace-screen-jsx aceptan imágenes en un src de img, o como fondo en className con bg-[url(...)]. Escribe texto alt y ajusta el tamaño de cada imagen según su uso. Para colocar una imagen propia:

Súbela con upload-attachment en el Modo A (mimeType + fileName) y ejecuta el uploadCommand devuelto.
Si el type de la respuesta es "image", pega su assetUrl exactamente como se devolvió en img src o en bg-[url(assetUrl)].

Deja cualquier otra URL de imagen exactamente como la devolvió get-screen-jsx. No pongas path, signedUrl ni uploadCommand en src.

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

Valores de los campos de pantalla

get-screen-jsx devuelve, y add-screen-jsx y replace-screen-jsx aceptan, estos valores:

Campo	Valores
`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`

Herramientas de directrices de diseño

Las directrices de diseño son texto DESIGN.md almacenado en un archivo. Cuando están definidas, se inyectan en cada generación de IA de ese archivo. Consulta Directrices de diseño.

`get-design-guidelines`

Obtén las directrices de diseño adjuntas a un archivo. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo

Salida: { guidelines }.

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

guidelines es null si no se han definido directrices.

`update-design-guidelines`

Define o reemplaza las directrices de diseño de un archivo. Pasa las directrices como una cadena de texto plano en el formato DESIGN.md de Google, no como un objeto ni como JSON. Si las lees de un archivo, pasa el texto de ese archivo. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo
`designGuidelines`	`string` (mín. 1)	Texto sin procesar de las directrices. Debe ser una cadena de texto plano, no codificada como JSON

Reglas de validación

El frontmatter debe abrirse y cerrarse correctamente
Las líneas del frontmatter deben ser YAML válido de estilo bloque
El cuerpo en Markdown no debe contener encabezados de sección ## duplicados

Si la validación falla, la llamada devuelve un error que empieza por Invalid design guidelines:. Salida: { updated, warnings? }.

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

warnings enumera los problemas de validación blanda (claves desconocidas, colores que no son hexadecimales) que se aceptaron pero que la IA podría ignorar. Se omite cuando no hay ninguno. Muéstralos al usuario.

`delete-design-guidelines`

Borra las directrices de diseño de un archivo. Eliminar directrices que no existen no tiene ningún efecto. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo

Salida: { "deleted": true }

Herramientas de chat

`get-chat-history`

Obtén la conversación de diseño asociada a un archivo: el chat de Flowstep del archivo, no la conversación de tu cliente de MCP. Úsala para retomar trabajo anterior en el archivo. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	ID del archivo

Salida: { messages }. messages está vacío cuando no tienes una conversación de diseño en el archivo. Cada mensaje tiene un type ("request" o "response"), un author ("human" o "ai") y un content_type. Los mensajes de respuesta usan "text", "summary" o "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" }]
    }
  ]
}

Herramientas de adjuntos

`upload-attachment`

Sube un archivo de referencia para usarlo como adjunto en ai-design-screens, o una imagen para colocarla en tu propio JSX con add-screen-jsx o replace-screen-jsx. ai-generate-screen-variant y ai-edit-screen-variant no aceptan adjuntos. Los bytes del archivo nunca pasan por el modelo, y el servidor nunca descarga URL en tu nombre. Para referenciar una página web, incluye su URL en el message de ai-design-screens. Hay dos modos: usa exactamente uno y no los combines. Modo A: archivos e imágenes (mimeType + fileName) Un flujo obligatorio de tres pasos para cualquier imagen, PDF o archivo de texto grande:

Llama a upload-attachment solo con mimeType y fileName (por ejemplo, image/png y dog.png). La respuesta es una subida preparada, no un archivo almacenado:

{
  "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": "…"
}

Reemplaza LOCAL_FILE_PATH en uploadCommand con la ruta absoluta de tu archivo y ejecuta ese comando exacto en tu terminal: debe terminar con código 0. El token de signedUrl autoriza solo esta subida. Omitir este paso deja el almacenamiento vacío y la herramienta de diseño falla su comprobación previa.
Pasa solo { id, path, type } al arreglo attachments de ai-design-screens: no signedUrl, uploadCommand ni nextStep. Para colocar una imagen en tu propio JSX, pon assetUrl en el img src o en el bg-[url(...)] del JSX que pases a add-screen-jsx o replace-screen-jsx. Consulta Imágenes en JSX.

Para adjuntar un archivo remoto, descárgalo primero a una ruta local (por ejemplo, con curl) y luego sigue los mismos tres pasos. Nunca pases una URL a upload-attachment.

Parámetro	Tipo	Descripción
`mimeType`	enum	Tipo MIME del archivo. Uno de `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Usa `text/javascript` para archivos `.jsx`, `.tsx`, `.js` o `.ts`
`fileName`	`string` (mín. 1)	Nombre original del archivo con extensión, por ejemplo `cat.png` o `design.md`

Modo B: texto corto (text + mimeType) Sube texto que ya está en contexto, sin necesidad de comando de terminal. La respuesta está lista para usarse directamente:

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

Parámetro	Tipo	Descripción
`text`	`string` (máx. 64.000 caracteres)	Contenido de texto sin procesar. Solo archivos de texto; no lo uses para imágenes ni PDF. ¿Más de 64.000 caracteres? Usa el Modo A
`mimeType`	enum	Uno de `text/markdown`, `text/plain`, `text/javascript`

Pasa el { id, path, type } resultante al arreglo attachments de ai-design-screens. La subida máxima es de 3 MB en ambos modos, y los PDF tienen un límite de 100 páginas. Salida: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" para archivos de imagen y "document" para PDF y archivos de texto.
assetUrl: la URL del archivo subido, devuelta en ambos modos. Úsala en el JSX de add-screen-jsx o replace-screen-jsx solo cuando type sea "image", y solo después de ejecutar el uploadCommand del Modo A.
signedUrl, uploadCommand, nextStep: se devuelven solo en el Modo A. No los pases a las herramientas de diseño.

Herramientas de Figma

`import-figma`

Importa un marco de Figma a un archivo de Flowstep como elementos editables en su lienzo. Cada importación añade una pantalla nueva: importar el mismo marco dos veces te da dos pantallas, así que elimina la anterior con delete-screen si querías reemplazarla. La organización del archivo debe tener Figma conectado en la configuración de Flowstep. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	El archivo de Flowstep en el que se importará el marco. No es la clave del archivo de Figma que aparece en `figmaUrl`
`figmaUrl`	`string`	Enlace a un marco específico de Figma, con un `node-id`. En Figma, haz clic derecho en el marco y elige Copy/Paste as → Copy link to selection. Un enlace a una página importa todos los marcos de nivel superior de esa página (limitado a 20 marcos a través de MCP)

Salida: { fileId, screenId, frameCount? }. screenId es la pantalla importada: pásala a get-screen-image para ver el resultado. Cuando una URL de página importa varios marcos, screenId es null y se devuelve frameCount en su lugar; llama a list-screens y luego a get-screen-image para cada pantalla nueva.

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

Herramientas de plan y facturación

`get-plan-details`

Obtén el plan de Flowstep de tu organización, el estado de la suscripción, el uso y la cuota restante. No requiere entrada: la organización se determina a partir del usuario que inició sesión. Úsala para revisar tu asignación antes de llamar a las herramientas de diseño con IA. Salida: { plan, subscription, limits, usage, remaining }.

Campo	Descripción
`plan`	`{ name, code, type }`. `type` es `"free"` o `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Límites por función, indexados por función (por ejemplo, `messages`). Cada uno tiene objetos opcionales `daily` y `monthly` con valores `max` y `warn`, además de una marca `unlimited`
`usage`	Uso por función hasta ahora, como `{ daily, monthly }`
`remaining`	Cuota restante por función, como `{ daily, monthly }`. Se omite en las funciones sin límite

Los límites varían según el plan: consulta Precios y Límites de uso.

Herramientas de diseño con IA

Estas tres herramientas diseñan a partir de una descripción o de un preajuste: nunca reciben ni reutilizan JSX. Cada llamada usa la misma asignación de mensajes que la app de Flowstep y se bloquea hasta que la generación termina o agota el tiempo de espera (180 segundos).

Herramienta	Úsala para
`ai-design-screens`	Generar pantallas nuevas, cambiar pantallas existentes en su lugar, o ambas cosas, a partir de una descripción libre
`ai-generate-screen-variant`	Añadir a una pantalla existente una variante del siguiente paso, de estado de error o vacío, o de plataforma
`ai-edit-screen-variant`	Aplicar un preajuste de edición o rediseño a una pantalla existente completa

Las tres devuelven { status, fileId, screenIds, designGuidelinesUpdated }. Llama a get-screen-image una vez por cada screenId para ver el resultado.

designGuidelinesUpdated: un resumen breve del cambio cuando las directrices DESIGN.md del archivo se actualizaron automáticamente durante este turno; de lo contrario, null.

`ai-design-screens`

Genera una o varias pantallas nuevas, cambia pantallas existentes en su lugar, o ambas cosas en una sola llamada, a partir de una descripción de texto: flujos nuevos, temas, textos, disposición o cambios coordinados en varias pantallas. Es el mismo agente de diseño que el chat del editor de Flowstep: decide, a partir de tu message y de elementIds, qué crear y qué cambiar. Omite fileId para empezar un archivo nuevo; pasa fileId para trabajar en uno existente. Si la solicitud podría aplicarse a un archivo que ya tienes, tu agente debe consultar antes list-files y list-screens. Para una variante de siguiente paso, de estado de error o vacío, o de plataforma de una pantalla, usa ai-generate-screen-variant. Para un preajuste de edición o rediseño de una pantalla, usa ai-edit-screen-variant. Si ya tienes JSX, usa add-screen-jsx o replace-screen-jsx. Entrada

Parámetro	Tipo	Predeterminado	Descripción
`fileId`	`uuid`	—	Archivo de destino. Omítelo para crear un archivo nuevo. Obligatorio cuando `elementIds` está definido
`message`	`string`	—	Descripción de las pantallas que se van a generar o de los cambios que hay que hacer. Cuando pasas `elementIds`, indica si debes editarlos o usarlos como referencia. Incluye aquí las URL de páginas web a las que quieras que Flowstep haga referencia
`elementIds`	`uuid[]`	`[]`	`screenId` opcionales de `list-screens` y/o `data-id` de elementos de `get-screen-jsx` (con `includeIds`), como una selección en el editor. Se pueden editar en su lugar o usar como referencia visual para pantallas nuevas. Un `screenId` apunta a la pantalla completa
`attachments`	`{ id, path, type }[]` (máx. 5)	`[]`	Archivos de `upload-attachment`: imágenes, PDF, o archivos de código y texto. No insertes el contenido de los archivos en el mensaje

Ejemplo: edita una pantalla y añade otra en una sola llamada:

{
  "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"]
}

Salida: { 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" cuando se crearon o cambiaron pantallas. "chat" cuando Flowstep respondió sin crear nada; en ese caso, reply contiene su respuesta y screenIds está vacío. Si tu encargo es ambiguo, tu agente debe pedirte que lo aclares y volver a llamar a la herramienta.
screenIds: cada pantalla creada o cambiada durante la llamada, incluidas las editadas en su lugar. Si la llamada agota el tiempo de espera después de crear algunas pantallas, devuelve esas pantallas en lugar de un error.

Las pantallas que le pidas editar se sobrescriben en su lugar.

`ai-generate-screen-variant`

Añade una pantalla nueva derivada de exactamente una pantalla existente: el siguiente paso del flujo, un estado de error o vacío, o una versión para otra plataforma. La pantalla original no cambia. Para añadir una pantalla que no sea variante de una existente (por ejemplo, una pantalla de ajustes), usa ai-design-screens con un fileId. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	Archivo de destino
`screenId`	`uuid`	La pantalla existente de la que derivar
`operationVariant`	enum	Obligatorio: cómo se relaciona la pantalla nueva con la existente

`operationVariant`	Añade
`next_screen`	La siguiente pantalla del flujo de usuario
`error_state`	Un estado de error de la pantalla
`empty_state`	Un estado vacío de la pantalla
`web_version`	Una versión web
`mobile_version`	Una versión móvil
`tablet_version`	Una versión para tablet
`mobile_ios_version`	Una versión para iOS
`mobile_android_version`	Una versión para Android

Salida: { status, fileId, screenIds, designGuidelinesUpdated }. status siempre es "generated".

`ai-edit-screen-variant`

Cambia exactamente una pantalla existente en su lugar usando un preajuste: ajústala o púlela, prueba una disposición o un estilo visual diferente, o rediséñala desde cero. Para instrucciones libres, nuevas pantallas o una edición precisa de elementos individuales, usa ai-design-screens. Entrada

Parámetro	Tipo	Descripción
`fileId`	`uuid`	Archivo de destino
`screenId`	`uuid`	La pantalla existente que se va a cambiar
`operationVariant`	enum	Obligatorio: el preajuste de edición o rediseño que se aplicará

`operationVariant`	Tipo	Efecto
`dark_theme`	Edición	Cambia la pantalla a un tema oscuro
`light_theme`	Edición	Cambia la pantalla a un tema claro
`make_pretty`	Edición	Pule el diseño visual de la pantalla
`different_layout`	Rediseño	Prueba una disposición diferente
`different_style`	Rediseño	Prueba un estilo visual diferente
`from_scratch`	Rediseño	Rediseña la pantalla desde cero

Salida: { status, fileId, screenIds, designGuidelinesUpdated }. status siempre es "generated".

Esto sobrescribe el contenido de la pantalla en su lugar.

Herramientas renombradas

Los nombres de las herramientas cambiaron en septiembre y octubre de 2026. Si tienes prompts, scripts o instrucciones de agente que usan los nombres antiguos, actualízalos:

Nombre anterior	Nombre nuevo
`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` (instrucciones libres)	`ai-design-screens`
`edit-design` (con un preajuste `operationVariant`)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

También cambiaron los parámetros: las herramientas de diseño con IA aceptan elementIds (o un único screenId para las herramientas de variantes) en lugar de targets; add-screen-jsx acepta jsx y campos de metadatos explícitos en lugar de jsxContent con un comentario de metadatos; create-file acepta name en lugar de title; y las herramientas de directrices de diseño aceptan fileId en lugar de resourceId y linkedTo.

​Herramientas de archivos

​list-files

​get-file

​create-file

​update-file

​delete-file

​Herramientas de pantallas

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Imágenes en JSX

​Valores de los campos de pantalla

​Herramientas de directrices de diseño

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Herramientas de chat

​get-chat-history

​Herramientas de adjuntos

​upload-attachment

​Herramientas de Figma

​import-figma

​Herramientas de plan y facturación

​get-plan-details

​Herramientas de diseño con IA

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Herramientas renombradas

Herramientas de archivos

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Herramientas de pantallas

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Imágenes en JSX

Valores de los campos de pantalla

Herramientas de directrices de diseño

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Herramientas de chat

`get-chat-history`

Herramientas de adjuntos

`upload-attachment`

Herramientas de Figma

`import-figma`

Herramientas de plan y facturación

`get-plan-details`

Herramientas de diseño con IA

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Herramientas renombradas