Prompt AI für Pro UI Design: bolt.new Anleitung zum Erstellen von Apps
Hallo du 👋 Du versuchst, eine saubere, professionell aussehende Benutzeroberfläche aus der KI herauszuholen... aber denkst nach, während du dich mit einer leeren Wand unterhältst?
Du bist nicht der Einzige. Eigentlich braucht die allerbeste KI eine gute Leitung — genau wie ein Designer, der wirklich schnell ist, aber ein Briefing benötigt.
Hier ist die gute Nachricht: Eine hervorragende UI-Eingabeaufforderung zu schreiben ist kein Hexenwerk. Sie benötigen lediglich fünf Schritte.
Und rate mal was? Sie können sie sofort testen in bolt.neu - es ist genau wegen dieser Art von Dingen gebaut.
Lassen Sie uns gemeinsam eine Übungs-App erstellen, eine Phase nach der anderen. Registriere dich und los geht's!
Was genau generieren wir?
Beginnen Sie mit einem Satz darüber, was Sie entwerfen. Praktisch eine Zeile.
„Entwerfen Sie eine moderne Gesundheits-Tracking-App mit einem mobilen First-Layout.“
Das bietet der KI einen Weg — nicht wirklich eine Struktur von Schwingungen.
Wie muss es sich wirklich anfühlen?
Das ist dein Vibe Check. Was ist die Macht? Was ist, wenn der Nutzer fühlt, wann immer er die App startet?
Für Leistungsträger geschaffen. Muss sich selbstbewusst, minimalistisch und schnell anfühlen — wie etwas, das Sie vor dem Fitnessstudio überprüfen möchten.
Verwenden Sie Begriffe wie: mutig, bissig, ästhetisch, kinetisch, minimal, hochwertig, ruhig, verspielt.
Wirklich, Buzzwords sind hier dein Freund.
Was ist das Unternehmen?
Lass uns dafür sorgen, dass es so ist wie du. Geben Sie Ihre Farbcodes, Schritideen, Modus (dunkel/hell), Abstandsstimmung usw. ein.
„Verwenden Sie die Schrift Inter. Regelmäßige Kühnheit.
Hauptfarbe: #0D0D0D (tiefschwarz)
Akzent: #22BFFD (frisches Aquablau)
Sekundär: #00374C (dark ocean teal) Nur im Dunkelmodus erfolgreich sein. Halte es glatt.“
Muss nicht ideal sein. Nur ausreichend, um der KI einen Typ zu geben, mit dem sie sich anfühlen kann.
Welche UI-Komponenten wünschen wir uns?
Sie können eine UI-Bibliothek vollständig benennen und löschen, falls Sie einen Dev-Stack im Sinn haben. Oder erkläre einfach den Stil.
„Benutzen Shadcn-Benutzeroberfläche für diese Komponenten - modern, frisch, ohne Flaum.“
Dies kann hilfreich sein, wenn Sie mit Entwicklern Prototypen erstellen oder sich etwas wünschen, das später gebaut werden kann.
Was ist auf dem Bildschirm?
Welches Essen wünschen wir uns eigentlich in der App?
„Unteres Navigationsmenü mit vier Tabs: Startseite, Fortschritt, Aktivität, Profil. Startbildschirm: Zeigt moderne Übungen, verbrannte Kalorien und Flüssigkeits-Tracker an. Fortschrittsbildschirm: Zeigt Monatsstatistiken, aktive Serien und Diagramme an.“
Halte es ruhig, aber offensichtlich. Genau wie du einen intelligenten Designer-Kumpel informierst.
Die letzte Aufforderung - Copy Paste in bolt.new
Hier ist alles in einer echten Aufforderung zusammengefasst, die Sie in bolt.new einfügen können:
„Entwerfen Sie eine moderne Gesundheits-Tracking-App mit einem mobilen First-Layout.
Die App sollte sich flüssig, fokussiert und lebendig anfühlen. Sie wurde für Benutzer entwickelt, die Leistung und Klarheit wünschen.
Verwenden Sie die Schrift Inter, reguläre Kühnheit.
Primär: #0D0D0D
Akzent: #22BFFD
Sekundär: Nur #00374C Dunkler Modus.
Verwenden Sie die Shadcn-UI-Bibliothek für diese Teile.
Unteres Navigationsmenü mit Startseite, Fortschritt, Aktivität und Profil.
Startbildschirm: Zeigt moderne Übungen, verbrannte Kalorien und den Fortschritt der Flüssigkeitszufuhr.
Fortschrittsbildschirm: Zusammenfassung der Charts und Serien.“
Füge das ein. Schau dir die Magie an. Passen Sie es bei Bedarf an. Tun Sie dies, bis es sich perfekt anfühlt.
Sie können die Anwendung unter dem Link einsehen: https://eclectic-naiad-81702e.netlify.app/
Letzter Gedanke
Und dann geh spielen.
Passen Sie Ihren Ton an. Probiere frische Farbschemata aus. Verwirklichen Sie das Traum-UI.
Einfach, weil Sie jetzt wissen, wie Sie Ihren KI-Designer konsultieren können.
Du hast das
