Pular para o conteúdo
inlu
Novo Conecte seu agente de IA pelo Dev Mode

Pare de redigitar mockups.
Construa a partir do design real.

O Inlu entrega aos desenvolvedores o próprio frame aprovado: inspecione-o no Dev Mode, copie snippets para web e nativo, exporte um projeto React, HTML/CSS ou Vue e deixe seu agente de IA ler o design diretamente.

Comece grátisVer o suporte de saída
  • Grátis durante o acesso antecipado
  • Projetos React, HTML/CSS e Vue
  • Snippets para SwiftUI, Jetpack Compose e mais
acme-ds / Billing / PlanCard● Ready for dev
Inspecionar
Largura
320 Fill
Padding
24
Espaçamento
16
Raio
16
Preenchimento
#FFFFFF
Linguagem do snippet
.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") }
}

Troque a linguagem do snippet — a mesma camada selecionada, gerada para cada plataforma.

Exportação de código
  • React
  • HTML/CSS
  • Vue
  • Next.js
Snippets do Dev Mode
  • SwiftUI
  • UIKit
  • Jetpack Compose
  • Android XML
Feito para quem entrega

O design, como dados que você realmente pode usar.

Sem screenshots nem redlines. Os desenvolvedores trabalham a partir do mesmo arquivo que os designers aprovaram — com cada valor, estado e asset a um clique.

Dev Mode no frame real

Meça espaçamentos, leia variáveis e copie snippets por camada. Os status Ready for dev, as anotações e a comparação de alterações mostram o que construir a seguir.

Projetos, não só snippets

Exporte um frame aprovado como projeto React (TypeScript + CSS Modules), HTML/CSS ou Vue e baixe-o como ZIP.

Seus componentes, mapeados

O Code Connect mapeia componentes de design para componentes da sua base de código, assim o Dev Mode mostra o componente que seu time já usa.

Agentes de IA

Conecte seu agente de IA pelo Dev Mode.

O Inlu roda um servidor MCP, então agentes de código como Claude Code ou Cursor podem ler o arquivo em que você está trabalhando, em vez de adivinhar a partir de um screenshot.

  1. Abra o Dev ModeSelecione o frame ou componente que você vai construir.
  2. Conecte seu agenteUse “Connect AI agent” no Dev Mode e siga a configuração da sua ferramenta.
  3. Pergunte com contextoO agente lê a estrutura, as variáveis, as anotações e o código gerado dessa seleção.

O que o agente pode ler

  • Estrutura do arquivo e dos frames
  • Um nó selecionado e suas propriedades
  • Código gerado para um nó
  • Variáveis
  • Anotações e status Ready for dev
  • Imagens renderizadas de um nó

Disponível durante o acesso antecipado. Os detalhes de configuração estão dentro do Dev Mode.

API e webhooks

Conecte o design às suas ferramentas.

Uma REST API para arquivos, comentários, componentes, estilos, variáveis e imagens, com OAuth. Os webhooks avisam seus sistemas quando algo muda.

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
Mesmo arquivo, mesma sala

Faça a revisão com os designers onde o trabalho acontece.

Comentários no objeto

Pergunte sobre um estado ou valor direto na camada a que ele se refere.

Salas de voz e modo de acompanhamento

Percorram um fluxo juntos, sem uma chamada separada nem compartilhamento de tela.

Cursores ao vivo

Veja quem está olhando o quê enquanto um frame é finalizado.

Grátis durante o acesso antecipado.

Os planos para desenvolvedores estão na página de preços. Os preços ainda não são definitivos e nada é cobrado durante o acesso antecipado.

Ver planos para desenvolvedores
Perguntas frequentes

As perguntas que engenheiros fazem primeiro

O Inlu escreve no nosso repositório?

Não. Você copia snippets ou baixa um projeto exportado e decide o que entra na sua base de código. O Inlu não faz push nos seus repositórios.

Podemos editar o código exportado?

Sim. Os arquivos exportados são código-fonte puro, sem runtime do Inlu. Trate-os como o pull request de um colega: revise, conecte dados reais e adapte.

Quais linguagens e frameworks são suportados?

A exportação de código gera projetos React (TypeScript + CSS Modules), HTML/CSS e Vue. Os snippets do Dev Mode cobrem CSS, HTML, React, Vue, SwiftUI, UIKit, Jetpack Compose e Android XML.

Qual é a diferença para o Figma Dev Mode?

Os dois mostram snippets da camada que você inspeciona. O Inlu também pode exportar um frame inteiro como projeto para download e abre seus arquivos .fig existentes. Veja a comparação completa. Comparação completa →

Os desenvolvedores precisam de um assento pago?

Não durante o acesso antecipado — tudo é grátis. Os planos e preços finais serão anunciados antes de qualquer cobrança.

Construa sua próxima tela a partir do design real.

Abra um arquivo .fig, inspecione um frame no Dev Mode e exporte-o. Grátis durante o acesso antecipado.

Comece grátisVerifique um arquivo .fig primeiro