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
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
