Erstelle und veröffentliche deine erste Atoms-App – von deinem ersten Prompt bis zu einer Live-Version, die du teilen kannst.

Du musst nicht jeden Agent, Modus oder technischen Begriff lernen, bevor du anfängst. Der grundlegende Ablauf ist viel einfacher: Sage Atoms, was du möchtest, prüfe, was es erstellt hat, nimm Änderungen vor, teste es und veröffentliche es, wenn es bereit ist.

Diese Anleitung verwendet als Beispiel eine einfache Café-Website, aber derselbe Ablauf funktioniert auch für eine Landingpage, ein Dashboard, ein internes Tool oder deine eigene App-Idee.

Diese Schritte beziehen sich auf ein Desktop-Webprojekt, bei dem du angemeldet bist. Mobile Projekte verwenden einen separaten Ablauf für mobilen Build und Verteilung.

Warte vor der Veröffentlichung, bis der aktuelle Build abgeschlossen ist, stelle sicher, dass du Veröffentlichungszugriff hast, bestätige, dass das Projekt inaktiv ist, und prüfe, dass erforderliche Projektressourcen wie Guthaben oder Speicher verfügbar sind. Wenn Publish nicht verfügbar ist, prüfe vor einem erneuten Versuch die Projektversion, den Zugriff und die Ressourcenbedingungen. Projekte, die Daten, Secrets, E-Mails, KI, Zahlungen oder andere verbundene Dienste verwenden, benötigen vor dem Teilen außerdem ihre Produktionsprüfungen.

Beschreibe, was du möchtest

Beginne im Prompt-Feld und beschreibe das gewünschte Ergebnis in normaler Sprache. Du musst keine technischen Spezifikationen schreiben oder Atoms sagen, wie es das programmieren soll.

Ein nützlicher erster Prompt beschreibt normalerweise, was du erstellst, die wichtigsten Bereiche oder Funktionen, die visuelle Richtung und alles, was für Mobilgeräte wichtig ist.

Wenn du in App-Welt bereits etwas gefunden hast, das dem nahekommt, was du möchtest, kannst du auch damit beginnen, dieses Projekt zu remixen, statt bei null anzufangen.

Prüfe das erste Ergebnis

Atoms erstellt das Projekt und baut eine erste Version. Wenn sie bereit ist, öffne den App-Viewer und sieh dir das Ergebnis an, bevor du weitere Änderungen anforderst.

Mache zuerst eine schnelle Prüfung. Du versuchst noch nicht, jedes kleine Problem zu finden. Prüfe, ob Atoms die Hauptidee verstanden hat.

• Sind die wichtigsten Bereiche und Funktionen vorhanden?
• Entspricht das Gesamtlayout dem, worum du gebeten hast?
• Reagieren die wichtigen Schaltflächen, Links, Filter oder anderen Interaktionen?
• Fehlt offensichtlich etwas, ist etwas kaputt oder anders als von dir gemeint?

Du kannst eine Vorschau der App sowohl im PC- als auch im mobilen Modus ansehen, also prüfe das Erlebnis auf mehr als einer Bildschirmgröße, bevor du weitermachst.

Nimm Änderungen vor

Betrachte die erste Version als Ausgangspunkt. Sage dem Agent in einfacher Sprache, was du ändern möchtest, und prüfe dann das Ergebnis erneut.

Kleine, konkrete Anfragen sind in der Regel leichter zu prüfen, als alles auf einmal zu ändern.

Für visuelle Änderungen kannst du Elemente direkt im App-Viewer bearbeiten oder dem Agent die Änderung beschreiben. Wenn du einen Screenshot, ein Design, eine Datei oder eine andere Referenz hast, an der sich Atoms orientieren soll, lade sie hoch und weise den Agent darauf hin.

Wenn etwas kaputtgeht: Wenn etwas tatsächlich kaputt ist und nicht nur von deiner Präferenz abweicht, verwende Fix Bug oder sage dem Agent genau, was falsch ist und wo es passiert.

Wenn es weiterhin fehlschlägt: Wiederhole dieselbe Anfrage nach einem gezielten erneuten Versuch nicht weiter. Halte den betroffenen Schritt fest, was du erwartet hast, was passiert ist, was du bereits versucht hast und einen teilbaren Projektlink oder Screenshot. Wenn du ein zahlender Nutzer mit einem Konto-, Abrechnungs- oder Atoms-Plattformproblem bist, öffne das Atoms Help Center, wähle unter Explore resources die Option Atoms Support und dann Contact us. Für Nutzer des Kostenloser Plan oder für allgemeine Produktanleitungen und Fehlerbehebung beginne mit dem Help Center, Ask Assistant oder der Atoms-Community.

Teste, bevor du veröffentlichst

Bevor du die App an irgendjemanden sendest, nimm dir ein paar Minuten Zeit und verwende sie wie ein echter Besucher. Ein kurzer Test jetzt ist viel einfacher, als nach dem Teilen einen defekten Link erklären zu müssen.

• Klicke auf jede wichtige Schaltfläche und jeden wichtigen Link.
• Probiere die interaktiven Teile aus, zum Beispiel Filter, Formulare, Menüs oder Navigation.
• Prüfe sowohl die PC- als auch die mobile Ansicht.
• Achte auf Text, der abgeschnitten ist, sich überlappt, fehlt oder schwer zu lesen ist.
• Stelle sicher, dass die wichtigste Nutzerreise von Anfang bis Ende funktioniert.

Wenn deine App von gespeicherten Daten oder Backend-Aktionen abhängt, teste auch diese. Atoms kann Atoms Cloud verwenden oder sich mit Supabase verbinden für Fähigkeiten wie Datenspeicherung, Secrets, E-Mails, KI-Aufrufe und Zahlungen.

Entferne vor der Veröffentlichung Secrets, Passwörter, Tokens, persönliche Informationen und private Testdaten aus allem, was Besucher sehen können. Bestätige, ob das Projekt Public oder Private sein soll, und teste den Live-Link mit dem vorgesehenen Konto. Wenn die App echte Zahlungen, E-Mails, gespeicherte Daten oder verbundene Dienste verwendet, überprüfe diese Produktionsaktionen vor dem Teilen separat.

Veröffentlichen

Wenn die Vorschau richtig aussieht und die wichtigsten Interaktionen funktionieren, klicke oben rechts im Editor auf Publish.

Durch die Veröffentlichung wird ein Live-Link erstellt, dessen Zugriff von der gewählten Sichtbarkeit abhängt. Public kann per Link geöffnet werden und kann in Discover erscheinen. Private ist nur für den Eigentümer sichtbar und kann durch den Plan eingeschränkt sein. Wähle vor dem Teilen die gewünschte Sichtbarkeit aus und teste den Link mit dem vorgesehenen Konto.

Die Veröffentlichung ist der Punkt, an dem dein Projekt zu etwas wird, das andere Menschen tatsächlich öffnen können. Entwickle im Projekt weiter, aber prüfe nach der Veröffentlichung immer separat die Live-Version.

Überprüfe die Live-App

Öffne den veröffentlichten Link selbst, bevor du ihn teilst. Bestätige, dass die ausgewählte Sichtbarkeit Public oder Private der vorgesehenen Zielgruppe Zugriff gibt; verwende zum Testen ein privates Fenster oder das vorgesehene Konto.

• Öffne den Link in einem neuen Tab oder privaten Fenster mit dem Konto oder Zugriffskontext, der zur vorgesehenen Zielgruppe passt.
• Bestätige, dass die Seite lädt und die Version anzeigt, die du erwartet hast.
• Wiederhole die wichtigsten Klicks oder Interaktionen.
• Prüfe die Seite auf einem Smartphone, wenn mobile Besucher für deine App wichtig sind.

Wenn du ein Problem findest, gehe zurück zum Projekt, nimm die Änderung vor, teste die Vorschau erneut und aktualisiere dann die Live-Version.

Aktualisieren, nachdem du Änderungen vorgenommen hast

Deine App hört nicht auf, sich zu verändern, nur weil du sie einmal veröffentlicht hast. Verfeinere sie im Projekt weiter, wann immer du es brauchst.

Nach der ersten Veröffentlichung wird die Schaltfläche Publish zu Update. Klicke auf Update, wenn du neue Änderungen in die Live-Version übernehmen möchtest.

Öffne nach einem Update den veröffentlichten Link noch einmal und überprüfe ihn. So erhältst du einen einfachen wiederholbaren Ablauf:

Beschreiben → Prüfen → Ändern → Testen → Veröffentlichen → Verifizieren → Aktualisieren

Das ist der zentrale Atoms-Ablauf. Komplexere Apps können Daten, Authentifizierung, Integrationen, benutzerdefinierte Domains oder mehrere Agents hinzufügen, aber der Build-Ablauf bleibt derselbe.