Criador de prompts de interface
Construa uma direção visual com tipografia ao vivo, cor, espaçamento e controles de raio. Copia uma UI precisa. prompt ou baixar o CSS Variáveis.
Ajustar os detalhes. Veja-os vivos.
Visualização da interface
PREVISÃOAbram espaço para
Algo novo.
Uma oficina de cerâmica prática. Boa companhia, um pouco de argila, e um sábado mais lento.
Sessão de estúdio
2 horas, 8 lugares.
Visualização ilustrativa. Seu construtor implementa a interface final.
Sua direção de projeto.
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.
O texto exportado permanece em inglês; seus dados são mantidos como foram digitados.
Sem registro. Nenhum crédito de IA. Esta ferramenta monta sua saída no seu navegador.
De uma ideia para algo útil.
- 01
Comece com uma predefinição e ajuste os detalhes.
- 02
Verifique suas escolhas na visualização da interface ao vivo.
- 03
Copie o resumo do projeto ou baixe o seu CSS Variáveis.
Um pouco de contexto.
Transforme preferências visuais em uma entrega prática para Lovable, Bolt, v0Ou seu agente codificador. A prévia e prompt Use as mesmas configurações, para que seu espaçamento, tipo e cores sejam consistentes. Esta ferramenta reúne instruções de suas escolhas, não analisa ou gera projetos com IA.
Boas perguntas.
Posso usar o... prompt Em algum construtor de aplicativos?
Sim. A saída descreve as propriedades da interface padrão e funciona como direção de projeto para Lovable, Bolt, v0, e assistentes de codificação. Seu construtor ainda decide como implementá-los.
O que está incluído no CSS Baixar?
Um pequeno conjunto de CSS Propriedades personalizadas para seu sotaque cor, fundo, texto, fonte, espaçamento, raio e sombra. Mapeá-los para suas fichas de design existentes antes de usá-los em um projeto.
A prévia verifica a acessibilidade?
A ferramenta relata o contraste entre seu sotaque e seu texto de botão. Esta é uma verificação de cores estreita, não uma auditoria de acessibilidade completa. Teste a interface final com teclado e tecnologia assistiva também.