Kreator promptów interfejsu
Build a wizual direction with live typography, color, spacing, and radius controls. Kopiuj dokładny interfejs użytkownika prompt lub pobrać CSS zmienne.
Dostosuj szczegóły. Zobaczyć ich na żywo.
Podgląd interfejsu
PRZEGLĄDZrób miejsce dla
Coś nowego.
Rękodzieło na warsztacie ceramicznym. Dobre towarzystwo, trochę gliny i wolniejsza sobota.
Sesja studyjna
2 godziny · 8 miejsc
Ilustracyjny podgląd. Twój budowniczy wdraża końcowy interfejs.
Twój kierunek projektowania
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.
Tekst eksportu pozostaje po angielsku; wpisane dane nie są zmieniane.
Nie ma rejestracji. Żadnych kredytów na sztuczną inteligencję. Narzędzie to przypomina wyjście w przeglądarce.
Od pomysłu do czegoś pożytecznego.
- 01
Zacznij od ustawienia, a potem dostosuj szczegóły.
- 02
Sprawdź swoje wybory na podglądzie interfejsu na żywo.
- 03
Kopiuj projekt lub pobierz swój CSS zmienne.
Trochę kontekstu.
Zmienić preferencje wizualne w praktyczne przekazanie dla Lovable, Bolt, v0albo twój kod. Podgląd i prompt używać tych samych ustawień, więc wybrany odstępy, typ i kolory pozostają spójne. Narzędzie to składa się z instrukcji z wyboru; nie analizuje i nie generuje projektów za pomocą AI.
Dobre pytania.
Mogę użyć prompt w jakimś budowniczym aplikacji?
Tak. Wyjście opisuje standardowe właściwości interfejsu i działa jako kierunek projektowania dla Lovable, Bolt, v0i asystentów kodujących. Twój budowniczy nadal decyduje, jak je wdrożyć.
Co zawiera CSS Pobieranie?
Mały zestaw CSS niestandardowe właściwości dla koloru akcentu, tła, tekstu, czcionki, odstępów, promienia i cienia. Przed ich użyciem w projekcie zapisz je do istniejących żetonów projektowych.
Czy podgląd sprawdza dostępność?
Narzędzie przedstawia kontrast pomiędzy akcentem a tekstem przycisku. Jest to wąski test kolorów, a nie kompletny audyt dostępności. Przetestuj końcowy interfejs z klawiaturą i technologią wspomagającą.