SketchXFlow MCP
Diseña sitios web, aplicaciones, logotipos, correos electrónicos y creativos publicitarios desde Claude Code, Cursor o Codex — diseños coherentes con la marca y código exportable — y contacta al equipo de desarrollo de SketchXFlow desde tu agente. Instalación: npx @sketchxflow/mcp install
Documentación
Instalación en tres pasos.
Hazlo en este orden. El instalador maneja todas las aplicaciones a la vez, así que solo lo haces una vez por computadora.
- 1
Obtén tu clave de API
Tu clave conecta la aplicación a tu cuenta, para que los diseños lleguen a tus proyectos. Abre Cuenta → Claves de API y haz clic en Generar clave. Genera una clave de API Solo se muestra una vez: cópiala en un lugar seguro. - 2
Ejecuta el instalador
Abre una terminal (cualquier carpeta está bien), pega este comando y presiona Enter.
Qué pregunta el instalador$ npx @sketchxflow/mcp install- a Encuentra tus aplicaciones Enumera las aplicaciones de IA que encontró en esta computadora.
- b Tú eliges Selecciona cuáles conectar.
- c Pega tu clave Del paso 1. Escribe la configuración de cada aplicación por ti.
- 3
Reinicia tu aplicación y pruébala
Cierra y vuelve a abrir por completo las aplicaciones que conectaste. Luego pide a tu agente un diseño, por ejemplo: “Usa SketchXFlow para diseñar una página de precios para mi aplicación y luego dame el código.” Estás listo cuando tu agente comience a llamar a las herramientas desketchxflow_….
Opcional
¿Prefieres configurarlo a mano?
Omite esto si el instalador funcionó. De lo contrario, elige tu aplicación a continuación y sigue sus tres pasos.
Claude Code agrega servidores desde la terminal. Ejecuta esto, reemplazando sk_live_… con tu clave:
$ claude mcp add sketchxflow -s user -e SKETCHXFLOW_API_KEY=sk_live_… -- npx -y @sketchxflow/mcp
Luego inicia una nueva sesión de Claude Code.
Lo que obtienes
Qué puede hacer tu agente.
Una vez conectado, tu agente obtiene estas herramientas. Un flujo típico es preguntar → diseñar → obtener el código → editar. Cada diseño es un proyecto normal de SketchXFlow, así que también puedes abrirlo en la web.
Hace preguntasGratis
Te entrevista para armar el brief y luego te devuelve un prompt de diseño listo.
sketchxflow_clarify
Diseña una página
Un proyecto nuevo, o una página coherente con la marca añadida a uno existente.
sketchxflow_design_page
Edita una sección
Cambia una sección por frase, con bloqueo de marca, para que nada más se desvíe.
sketchxflow_edit
Te entrega el código
El HTML completo + Tailwind de una página, para que tu agente lo implemente en tu stack.
sketchxflow_get_code
Revisa un proyecto
Estado, enlace de vista previa y lista de páginas de un proyecto.
sketchxflow_get_project
Enumera tus proyectos
Todo lo que hay en tu cuenta de SketchXFlow.
sketchxflow_list_projects
Servicios de desarrollo — SketchXFlow lo construye por ti
El mismo paquete también se comunica con nuestro equipo de desarrollo: tu agente realiza la entrevista de requisitos, obtiene la propuesta a precio fijo y los enlaces para aceptar y pagar. Todo gratis de llamar.
Inicia un proyecto con nuestro equipoGratis
Abre la entrevista de requisitos con el consultor de IA y devuelve su primera pregunta.
sketchxflow_services_start
Habla con el consultorGratis
Un turno a la vez: responde, siguiente pregunta con opciones y el presupuesto en vivo de la lista de precios pública.
sketchxflow_services_say
Lee los requisitosGratis
El documento de requisitos tal como está y si está listo para finalizar.
sketchxflow_services_requirements
Finaliza y lo cotizaGratis
Congela los requisitos y devuelve el enlace de la propuesta. Aceptar y pagar ocurren en el sitio web, con sesión iniciada.
sketchxflow_services_finalise
Enumera tus facturasGratis
Cada factura de un proyecto con su estado y la página para pagarla: UPI, tarjetas, EMI, banca neta, transferencia bancaria.
sketchxflow_services_invoices
Enumera tus proyectos de servicioGratis
Tus proyectos de servicios de desarrollo y sus enlaces.
sketchxflow_services_projects