Visueller UI-Prompt-Builder
Erstellen Sie eine visuelle Richtung mit Live-Typografie, Farbe, Abstand und Radiussteuerung. Kopieren einer präzisen Benutzeroberfläche Prompt oder downloaden Sie die CSS Variablen.
Passen Sie die Details an. Sehen Sie sie live.
Schnittstellenvorschau
PRÜFUNGMachen Sie Platz für
Etwas Neues.
Ein Hands-on Keramik Workshop. Gute Gesellschaft, ein wenig Ton und ein langsamer Samstag.
Studio-Sitzung
2 Stunden · 8 Plätze
Illustrative Vorschau. Ihr Builder implementiert die endgültige Schnittstelle.
Ihre Design-Richtung
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
Exporttexte bleiben auf Englisch; deine Eingaben werden unverändert übernommen.
Keine Anmeldung. Keine AI Credits. Dieses Tool stellt Ihre Ausgabe in Ihrem Browser zusammen.
Von einer Idee zu etwas Nützlichem.
- 01
Beginnen Sie mit einem Preset und passen Sie dann die Details an.
- 02
Überprüfen sie ihre auswahl in der live-interface-vorschau.
- 03
Kopieren Sie das Design-Briefing oder laden Sie Ihre CSS Variablen.
Ein kleiner Kontext.
Verwandeln Sie visuelle Vorlieben in eine praktische Übergabe für Lovable, Bolt, v0oder Ihr Coding Agent. Die Preview und Prompt Verwenden Sie die gleichen Einstellungen, so dass der gewählte Abstand, Typ und Farben konsistent bleiben. Dieses Tool sammelt Anweisungen aus Ihren Entscheidungen; es analysiert oder generiert keine Designs mit AI.
Gute Fragen.
Kann ich die Prompt In einem App Builder?
Ja. Der Output beschreibt die Standard-Interface-Eigenschaften und funktioniert als Design-Richtung für Lovable, Bolt, v0und Codierassistenten. Ihr Builder entscheidet immer noch, wie er sie implementiert.
Was in der CSS Download?
Ein kleines Set von CSS Benutzerdefinierte Eigenschaften für Ihre Akzentfarbe, Hintergrund, Text, Schriftart, Abstand, Radius und Schatten. Weisen Sie sie Ihren vorhandenen Design-Token zu, bevor Sie sie in einem Projekt verwenden.
Prüft die Vorschau die Zugänglichkeit?
Das Tool meldet den Kontrast zwischen Ihrem Akzent und seinem Button-Text. Dies ist eine schmale Farbprüfung, keine vollständige Zugänglichkeitsprüfung. Testen Sie auch die letzte Schnittstelle mit Tastatur und assistierender Technologie.