Visuele UI-promptbouwer
Bouw een visuele richting met live typografie, kleur, afstand, en radius controles. Kopiëren van een exacte UI prompt of download de CSS variabelen.
Pas de details aan. Zie ze live.
Interfacevoorbeeld
VOORUITZICHTMaak plaats voor
Iets nieuws.
Een hands-on keramiek werkplaats. Goed gezelschap, wat klei en een tragere zaterdag.
Studiosessie
2 uur · 8 plaatsen
Een illustratief voorbeeld. Uw bouwer implementeert de laatste interface.
Uw ontwerprichting
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.
De exporttekst blijft in het Engels; je invoer blijft ongewijzigd.
Geen aanmelding. Geen AI credits. Deze tool assembleert uw uitvoer in uw browser.
Van een idee tot iets nuttigs.
- 01
Begin met een voorinstelling en pas de details aan.
- 02
Controleer uw keuzes op de live interface preview.
- 03
Kopieer de ontwerpbeschrijving of download uw CSS variabelen.
Een beetje context.
Visuele voorkeuren veranderen in een praktische overdracht voor Lovable, Bolt, v0, of uw codering agent. Het voorbeeld en prompt Gebruik dezelfde instellingen, zodat uw gekozen afstand, type en kleuren consistent blijven. Deze tool assembleert instructies uit uw keuzes; het analyseert of genereert geen ontwerpen met AI.
Goede vragen.
Mag ik de prompt in een app builder?
Ja. De output beschrijft standaard interface eigenschappen en werkt als ontwerp richting voor Lovable, Bolt, v0, en codering assistenten. Je bouwer beslist nog steeds hoe hij ze moet implementeren.
Wat is er opgenomen in de CSS downloaden?
Een kleine set van CSS aangepaste eigenschappen voor uw accentkleur, achtergrond, tekst, lettertype, afstand, radius en schaduw. Map ze op uw bestaande ontwerp tokens voordat u ze gebruikt in een project.
Controleert de preview de toegankelijkheid?
Het gereedschap rapporteert het contrast tussen uw accent en de knoptekst. Dit is een smalle kleur controle, niet een volledige toegankelijkheid audit. Test ook de laatste interface met toetsenbord en ondersteunende technologie.