Transformar Telas Aleatórias em um Guia de Estilo de UI Limpo
Crie um guia de estilo de UI inicial simples a partir de telas desorganizadas de aplicativos móveis.

Visão geral do prompt
Parceiro de IA em destaque
Dicas para você
Um guia de estilo inicial deve reduzir as escolhas, não adicionar mais. O objetivo é tornar a próxima tela mais fácil de desenhar e mais difícil de ficar inconsistente.
Da equipe de operaçõesNexusAi TechnologyProblema que resolve
Muitos designers e fundadores criam várias telas antes de definir as regras visuais básicas. O resultado é um aplicativo móvel que parece aleatório, mesmo quando cada tela individual parece aceitável. Este prompt transforma telas existentes em um guia de estilo simples que pode orientar a próxima etapa de design.
Guia de Estilo Inicial
Transforma uma direção de UI desorganizada em regras visuais simples.
Regras Amigáveis para Componentes
Define botões, inputs, cartões e tipografia de forma reutilizável.
Lista de Verificação do Figma para Iniciantes
Mostra o que criar primeiro no Figma para maior consistência rápida.
Instruções do prompt de IA
Atue como um designer de UI de aplicativos móveis que ajuda fundadores em estágio inicial e designers a criar guias de estilo visual limpos a partir de telas existentes.
Eu descreverei ou farei o upload das telas do meu aplicativo móvel. Sua tarefa é criar um guia de estilo de UI leve que torne o aplicativo mais consistente sem se tornar complexo demais.
Contexto do aplicativo:
- Nome do aplicativo: [inserir nome do aplicativo]
- Tipo de aplicativo: [inserir tipo de aplicativo]
- Usuários-alvo: [inserir usuários]
- Telas disponíveis: [inserir lista de telas]
- Estilo atual: [descrever estilo atual]
- Sensação desejada: [premium / limpo / amigável / ousado / calmo / lúdico / profissional]
- Cores da marca, se disponíveis: [inserir cores]
Crie um guia de estilo de UI simples com as seguintes seções:
1. Direção Visual
Descreva a aparência e a sensação geral que o aplicativo deve seguir.
2. Regras de Cores
Sugira o uso de cores primárias, secundárias, de fundo, de superfície, de borda, de sucesso, de aviso e de erro. Mantenha as coisas simples e evite o excesso de cores.
3. Regras de Tipografia
Defina o uso de títulos, corpo de texto, rótulos, botões e legendas.
4. Regras de Botões e Inputs
Defina botão primário, botão secundário, estado desativado, campo de entrada (input) e regras de espaçamento de formulário.
5. Regras de Cartões e Layout
Defina o raio do cartão (border radius), uso de sombras, ritmo de espaçamento, preenchimento de seção (padding) e consistência do layout da tela.
6. Regras de Ícones e Ilustrações
Explique como os ícones ou ilustrações devem ser usados de forma consistente.
7. Lista de Verificação de Configuração no Figma
Dê-me uma lista de verificação para criar o guia de estilo no Figma usando estilos e componentes reutilizáveis.
Mantenha o guia simples, prático e fácil de ser aplicado por um iniciante.
Resultado esperado
Un guia de estilo de UI móvel leve com direção visual, regras de cores, regras de tipografia, regras de botões/inputs, regras de cartões/layout, orientação de ícones e lista de verificação de configuração no Figma.
Jornada de implementação
Gere o guia inicial no ChatGPT, Claude ou Gemini
Cole o promptText com o tipo do seu aplicativo, capturas de tela ou descrições de tela, estilo atual e sensação desejada. Espere um guia de estilo de UI simples que você possa aplicar imediatamente.
6–10 minutosCrie estilos e componentes no Figma
Transforme o resultado em estilos de cores do Figma, estilos de texto, componentes de botões, componentes de input, componentes de cartão e regras de espaçamento de layout.
30–60 minutosUse o guia em uma tela primeiro
Aplique o guia de estilo a uma tela existente antes de atualizar o aplicativo inteiro. Em seguida, compare a tela atualizada com a original para confirmar se o estilo parece mais limpo e mais replicável.
20–30 minutos
