Visual UI Prompt Builder
Build a visual direction with live typography, color, spacing, and radius controls. Copy a precise UI prompt or download the CSS variables.
Adjust the details. See them live.
Interface preview
PREVIEWMake room for
something new.
A hands-on ceramics workshop. Good company, a little clay, and a slower Saturday.
Studio session
2 hours · 8 places
Illustrative preview. Your builder implements the final interface.
Your design direction
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.
Export text stays in English; your input is kept as entered.
No signup. No AI credits. This tool assembles your output in your browser.
From an idea to something useful.
- 01
Start with a preset, then adjust the details.
- 02
Check your choices on the live interface preview.
- 03
Copy the design brief or download your CSS variables.
A little context.
Turn visual preferences into a practical handoff for Lovable, Bolt, v0, or your coding agent. The preview and prompt use the same settings, so your chosen spacing, type, and colors stay consistent. This tool assembles instructions from your choices; it does not analyze or generate designs with AI.
Good questions.
Can I use the prompt in any app builder?
Yes. The output describes standard interface properties and works as design direction for Lovable, Bolt, v0, and coding assistants. Your builder still decides how to implement them.
What is included in the CSS download?
A small set of CSS custom properties for your accent color, background, text, font, spacing, radius, and shadow. Map them to your existing design tokens before using them in a project.
Does the preview check accessibility?
The tool reports the contrast between your accent and its button text. This is a narrow color check, not a complete accessibility audit. Test the final interface with keyboard and assistive technology too.