Saltar al contenido
inlu
Nuevo Conecta tu agente de IA desde Dev Mode

Deja de reescribir maquetas.
Construye desde el diseño real.

Inlu pone en manos de los desarrolladores el propio frame aprobado: inspecciónalo en Dev Mode, copia fragmentos de código para web y nativo, exporta un proyecto de React, HTML/CSS o Vue y deja que tu agente de IA lea el diseño directamente.

Empieza gratisVer la compatibilidad de salida
  • Gratis durante el acceso anticipado
  • Proyectos de React, HTML/CSS y Vue
  • Fragmentos de código para SwiftUI, Jetpack Compose y más
acme-ds / Billing / PlanCard● Ready for dev
Inspeccionar
Ancho
320 Fill
Espaciado interno
24
Separación
16
Radio
16
Relleno
#FFFFFF
Lenguaje del fragmento
.plan-card {
display: flex;
flex-direction: column;
gap: 16px;
width: 320px;
padding: 24px;
border-radius: 16px;
background: #ffffff;
}
<div className="plan-card">
<div className="plan-card__top">
<span>Pro plan</span>
<span className="badge">Popular</span>
</div>
<p className="price">$24 <small>/ month</small></p>
<button>Choose plan</button>
</div>
VStack(alignment: .leading, spacing: 16) {
HStack {
Text("Pro plan")
Spacer()
Text("Popular")
}
Text("$24 / month")
Button("Choose plan") {}
}
.padding(24)
.frame(width: 320)
.background(Color.white, in: .rect(cornerRadius: 16))
Column(
modifier = Modifier
.width(320.dp)
.background(Color.White, RoundedCornerShape(16.dp))
.padding(24.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text("Pro plan")
Text("$24 / month")
Button(onClick = {}) { Text("Choose plan") }
}

Cambia el lenguaje del fragmento: la misma capa seleccionada, generada para cada plataforma.

Exportación de código
  • React
  • HTML/CSS
  • Vue
  • Next.js
Fragmentos de código de Dev Mode
  • SwiftUI
  • UIKit
  • Jetpack Compose
  • Android XML
Hecho para quienes lo entregan

El diseño, como datos que sí puedes usar.

Sin capturas ni anotaciones de medidas. Los desarrolladores trabajan desde el mismo archivo que aprobaron los diseñadores, con cada valor, estado y recurso a un clic.

Dev Mode sobre el frame real

Mide espaciados, lee variables y copia fragmentos por capa. Los estados Ready for dev, las anotaciones y la comparación de cambios muestran qué construir a continuación.

Proyectos, no solo fragmentos

Exporta un frame aprobado como proyecto de React (TypeScript + CSS Modules), HTML/CSS o Vue y descárgalo como ZIP.

Tus componentes, vinculados

Code Connect vincula los componentes de diseño con los componentes de tu código, de modo que Dev Mode muestra el componente que tu equipo ya usa.

Agentes de IA

Conecta tu agente de IA desde Dev Mode.

Inlu ejecuta un servidor MCP, así que agentes de programación como Claude Code o Cursor pueden leer el archivo en el que trabajas en lugar de adivinar a partir de una captura.

  1. Abre Dev ModeSelecciona el frame o componente que vas a construir.
  2. Conecta tu agenteUsa «Connect AI agent» en Dev Mode y sigue la configuración de tu herramienta.
  3. Pregunta con contextoEl agente lee la estructura, las variables, las anotaciones y el código generado de esa selección.

Qué puede leer el agente

  • Estructura del archivo y de los frames
  • Un nodo seleccionado y sus propiedades
  • Código generado para un nodo
  • Variables
  • Anotaciones y estado Ready for dev
  • Imágenes renderizadas de un nodo

Disponible durante el acceso anticipado. Los detalles de configuración están dentro de Dev Mode.

API y webhooks

Conecta el diseño a tus herramientas.

Una REST API para archivos, comentarios, componentes, estilos, variables e imágenes, con OAuth. Los webhooks avisan a tus sistemas cuando algo cambia.

Recursos REST

  • /v1/files
  • /v1/comments
  • /v1/components
  • /v1/styles
  • /v1/variables
  • /v1/versions
  • /v1/images
  • /v1/dev_resources

Eventos de webhook

  • FILE_UPDATE
  • FILE_VERSION_UPDATE
  • FILE_DELETE
  • LIBRARY_PUBLISH
  • FILE_COMMENT
  • DEV_MODE_STATUS_UPDATE
Mismo archivo, misma sala

Revisa con los diseñadores donde vive el trabajo.

Comentarios sobre el objeto

Pregunta por un estado o un valor justo en la capa a la que se refiere.

Salas de voz y modo de seguimiento

Recorran un flujo juntos sin una llamada aparte ni compartir pantalla.

Cursores en vivo

Mira quién está viendo qué mientras se ultima un frame.

Gratis durante el acceso anticipado.

Los planes para desarrolladores están en la página de precios. Los precios aún no son definitivos y no se cobra nada durante el acceso anticipado.

Ver planes para desarrolladores
Preguntas frecuentes

Las preguntas que los ingenieros hacen primero

¿Inlu escribe en nuestro repositorio?

No. Tú copias fragmentos o descargas un proyecto exportado y decides qué entra en tu código. Inlu no hace push a tus repositorios.

¿Podemos editar el código exportado?

Sí. Los archivos exportados son código fuente simple, sin runtime de Inlu. Trátalos como un pull request de un compañero: revísalos, conecta datos reales y adáptalos.

¿Qué lenguajes y frameworks se admiten?

La exportación de código genera proyectos de React (TypeScript + CSS Modules), HTML/CSS y Vue. Los fragmentos de Dev Mode cubren CSS, HTML, React, Vue, SwiftUI, UIKit, Jetpack Compose y Android XML.

¿En qué se diferencia de Figma Dev Mode?

Ambos muestran fragmentos de código de la capa que inspeccionas. Además, Inlu puede exportar un frame completo como proyecto descargable y abre tus archivos .fig existentes. Consulta la comparación completa. Comparación completa →

¿Los desarrolladores necesitan un puesto de pago?

No durante el acceso anticipado: todo es gratis. Anunciaremos los planes y precios definitivos antes de aplicar ningún cobro.

Construye tu próxima pantalla desde el diseño real.

Abre un archivo .fig, inspecciona un frame en Dev Mode y expórtalo. Gratis durante el acceso anticipado.

Empieza gratisRevisa primero un archivo .fig