Zum Inhalt springen
inlu
Neu Verbinde deinen KI-Agenten aus dem Dev Mode

Schluss mit dem Abtippen von Mockups.
Baue auf dem echten Design auf.

Inlu gibt Entwicklern den freigegebenen Frame selbst: Inspiziere ihn im Dev Mode, kopiere Snippets für Web und Native, exportiere ein React-, HTML/CSS- oder Vue-Projekt und lass deinen KI-Agenten das Design direkt lesen.

Kostenlos startenOutput-Unterstützung ansehen
  • Kostenlos während Early Access
  • React-, HTML/CSS- und Vue-Projekte
  • Snippets für SwiftUI, Jetpack Compose und mehr
acme-ds / Billing / PlanCard● Ready for dev
Inspizieren
Breite
320 Fill
Innenabstand
24
Abstand
16
Radius
16
Füllung
#FFFFFF
Snippet-Sprache
.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") }
}

Wechsle die Snippet-Sprache — dieselbe ausgewählte Ebene, für jede Plattform generiert.

Code-Export
  • React
  • HTML/CSS
  • Vue
  • Next.js
Dev-Mode-Snippets
  • SwiftUI
  • UIKit
  • Jetpack Compose
  • Android XML
Gebaut für die, die es ausliefern

Das Design als Daten, die du wirklich nutzen kannst.

Keine Screenshots und Redlines. Entwickler arbeiten in derselben Datei, die die Designer freigegeben haben — jeder Wert, Zustand und jedes Asset nur einen Klick entfernt.

Dev Mode am echten Frame

Miss Abstände, lies Variablen aus und kopiere Snippets pro Ebene. Ready-for-dev-Status, Annotationen und Änderungsvergleich zeigen, was als Nächstes zu bauen ist.

Projekte, nicht nur Snippets

Exportiere einen freigegebenen Frame als React-Projekt (TypeScript + CSS Modules), HTML/CSS- oder Vue-Projekt und lade ihn als ZIP herunter.

Deine Komponenten, zugeordnet

Code Connect ordnet Design-Komponenten den Komponenten in deiner Codebasis zu, sodass Dev Mode die Komponente zeigt, die dein Team bereits verwendet.

KI-Agenten

Verbinde deinen KI-Agenten aus dem Dev Mode.

Inlu betreibt einen MCP-Server, sodass Coding-Agenten wie Claude Code oder Cursor die Datei lesen können, an der du arbeitest, statt anhand eines Screenshots zu raten.

  1. Dev Mode öffnenWähle den Frame oder die Komponente aus, die du als Nächstes baust.
  2. Agenten verbindenNutze im Dev Mode „Connect AI agent“ und folge der Einrichtung für dein Tool.
  3. Mit Kontext fragenDer Agent liest Struktur, Variablen, Annotationen und generierten Code für diese Auswahl.

Was der Agent lesen kann

  • Datei- und Frame-Struktur
  • Ein ausgewählter Node und seine Eigenschaften
  • Generierter Code für einen Node
  • Variablen
  • Annotationen und Ready-for-dev-Status
  • Gerenderte Bilder eines Nodes

Verfügbar während Early Access. Details zur Einrichtung findest du im Dev Mode.

API & Webhooks

Binde das Design in dein Tooling ein.

Eine REST API für Dateien, Kommentare, Komponenten, Stile, Variablen und Bilder, mit OAuth. Webhooks informieren deine Systeme, sobald sich etwas ändert.

REST-Ressourcen

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

Webhook-Events

  • FILE_UPDATE
  • FILE_VERSION_UPDATE
  • FILE_DELETE
  • LIBRARY_PUBLISH
  • FILE_COMMENT
  • DEV_MODE_STATUS_UPDATE
Dieselbe Datei, derselbe Raum

Reviews mit Designern, wo die Arbeit liegt.

Kommentare am Objekt

Frage zu einem Zustand oder Wert direkt an der Ebene, um die es geht.

Voice-Räume und Follow-Modus

Geht einen Flow gemeinsam durch — ohne separaten Call oder Screen-Sharing.

Live-Cursor

Sieh, wer sich was ansieht, während ein Frame finalisiert wird.

Kostenlos während Early Access.

Die Tarife für Entwickler findest du auf der Preisseite. Die Preise stehen noch nicht fest, und während Early Access wird nichts berechnet.

Entwickler-Tarife ansehen
FAQ

Fragen, die Entwickler zuerst stellen

Schreibt Inlu in unser Repository?

Nein. Du kopierst Snippets oder lädst ein exportiertes Projekt herunter und entscheidest selbst, was in deine Codebasis kommt. Inlu pusht nicht in deine Repositories.

Können wir den exportierten Code bearbeiten?

Ja. Exportierte Dateien sind reiner Quellcode ohne Inlu-Runtime. Behandle sie wie einen Pull Request von einem Teammitglied: prüfen, echte Daten anbinden und anpassen.

Welche Sprachen und Frameworks werden unterstützt?

Der Code-Export erzeugt React-Projekte (TypeScript + CSS Modules), HTML/CSS- und Vue-Projekte. Dev-Mode-Snippets decken CSS, HTML, React, Vue, SwiftUI, UIKit, Jetpack Compose und Android XML ab.

Wie unterscheidet sich das von Figma Dev Mode?

Beide zeigen Snippets für die inspizierte Ebene. Inlu kann zusätzlich einen ganzen Frame als herunterladbares Projekt exportieren und öffnet deine vorhandenen .fig-Dateien. Siehe den vollständigen Vergleich. Vollständiger Vergleich →

Brauchen Entwickler einen kostenpflichtigen Seat?

Nicht während Early Access — alles ist kostenlos. Die endgültigen Tarife und Preise geben wir bekannt, bevor Kosten entstehen.

Baue deinen nächsten Screen auf dem echten Design auf.

Öffne eine .fig-Datei, inspiziere einen Frame im Dev Mode und exportiere ihn. Kostenlos während Early Access.

Kostenlos startenPrüfe zuerst eine .fig-Datei