Creador de prompts de interfaz
Construye una dirección visual con controles de tipografía en vivo, color, espaciamiento y radio. Copiar un UI preciso prompt o descargar el CSS variables.
Ajusta los detalles. Míralos vivir.
Previsto de interfaz
PREVISTAHacer espacio para
algo nuevo.
Un taller de cerámica práctica. Buena compañía, un poco de arcilla, y un sábado más lento.
Sesión de estudio
2 horas · 8 plazas
Previsualización ilustrativa. Su constructor implementa la interfaz final.
Su dirección de diseño
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.
El texto exportado sigue en inglés; tus datos se conservan tal como los escribiste.
No hay señalización. No hay créditos de inteligencia artificial. Esta herramienta monta su salida en su navegador.
De una idea a algo útil.
- 01
Comience con un preset, luego ajuste los detalles.
- 02
Compruebe sus opciones en la vista previa de la interfaz en vivo.
- 03
Copiar el resumen del diseño o descargar su CSS variables.
Un pequeño contexto.
Convierta las preferencias visuales en un margen práctico para Lovable, Bolt, v0, o su agente de codificación. La vista previa y prompt utilizar la misma configuración, por lo que su espaciamiento elegido, tipo y colores permanecen consistentes. Esta herramienta reúne instrucciones de sus opciones; no analiza ni genera diseños con AI.
Buenas preguntas.
¿Puedo usar el prompt ¿En cualquier constructor de aplicaciones?
Sí. La salida describe las propiedades de interfaz estándar y funciona como dirección de diseño Lovable, Bolt, v0, y ayudantes de codificación. Su constructor todavía decide cómo implementarlos.
Lo que se incluye en el CSS ¿Descargar?
Un pequeño conjunto de CSS propiedades personalizadas para tu color de acento, fondo, texto, fuente, espaciamiento, radio y sombra. Envíelas a sus fichas de diseño existentes antes de utilizarlas en un proyecto.
¿La accesibilidad de la vista previa?
La herramienta reporta el contraste entre su acento y su botón de texto. Este es un cheque de color estrecho, no una auditoría completa de accesibilidad. Prueba la interfaz final con teclado y tecnología de asistencia también.