Creatore di prompt per interfacce
Costruire una direzione visiva con la tipografia live, il colore, la spaziatura e i controlli del raggio. Copiare un'interfaccia utente precisa prompt o scarica il CSS variabili.
Regolare i dettagli. Li vedi dal vivo.
Anteprima dell'interfaccia
PREVIAFare spazio per
qualcosa di nuovo.
Un laboratorio di ceramica a mani in mano. Buona compagnia, un po' di argilla e un sabato piu' lento.
Sessione studio
2 ore · 8 posti
Anteprima illustrativa. Il tuo costruttore implementa l'interfaccia finale.
La vostra direzione di design
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.
Il testo esportato resta in inglese; i tuoi dati vengono mantenuti come inseriti.
Non c'e' segnale. Niente crediti per l'IA. Questo strumento assembla l'output nel tuo browser.
Da un'idea a qualcosa di utile.
- 01
Iniziare con una preimpostazione, quindi regolare i dettagli.
- 02
Controlla le tue scelte sull'anteprima dell'interfaccia live.
- 03
Copia il brief di progettazione o scarica il tuo CSS variabili.
Un po' di contesto.
Trasformare le preferenze visive in un pratico handoff per Lovable, Bolt, v0o il tuo agente di codifica. L'anteprima e prompt utilizzare le stesse impostazioni, quindi la spaziatura scelta, il tipo e i colori rimangono coerenti. Questo strumento assembla le istruzioni dalle tue scelte; non analizza o genera disegni con AI.
Buone domande.
Posso usare prompt in qualsiasi app builder?
Si'. L'output descrive le proprietà dell'interfaccia standard e funziona come direzione di progettazione per Lovable, Bolt, v0, e assistenti di codifica. Il tuo costruttore decide ancora come implementarli.
Che cosa è incluso nel CSS scarica?
Un piccolo insieme di CSS proprietà personalizzate per il tuo colore accento, sfondo, testo, carattere, spaziatura, raggio e ombra. Pianificali sui token di progettazione esistenti prima di utilizzarli in un progetto.
L'anteprima controlla l'accessibilità?
Lo strumento riporta il contrasto tra il tuo accento e il suo testo del pulsante. Questo è un controllo a colori stretto, non un controllo completo dell'accessibilità. Testare l'interfaccia finale con la tastiera e la tecnologia assistiva anche.