Eu mudei radicalmente minhas habilidades de design front-end ~ Agora minhas UIs não parecem lixo gerado por IA

1Habilidade de Design Frontend
2
3Crie interfaces frontend de nível de produção, com identidade própria, que pareçam ter sido feitas por um designer humano de verdade — e não apenas médias de padrões prontos.
4
5Critérios de Sucesso
6
7Identidade visual marcante, com uma narrativa clara e um elemento de assinatura
8
9Funcionalidade de nível de produção, com estados completos e comportamento responsivo
10
11Acessibilidade por padrão, com intenção WCAG AA
12
13Sistema de design orientado por tokens, sem estilização avulsa
14
15Zero dependência de clichês reconhecíveis de IA
16
17Antes de Escrever Código
181. Entenda o Contexto
19
20Propósito
21Qual problema esta interface resolve e quem a utiliza
22
23Restrições
24Framework, orçamento de performance, requisitos de acessibilidade
25
26Âncoras de Marca (se fornecidas)
27Adjetivos, referências, tabus
28
29Se faltar informação crítica, solicite apenas o que impede a execução correta.
30
312. Comprometa-se com uma Direção Radical
32
33Escolha um extremo e execute com precisão.
34Maximalismo ousado e minimalismo refinado funcionam. Intencionalidade é obrigatória.
35
36Exemplos de direções (apenas para inspiração):
37
38Revista editorial
39Grades assimétricas, autoridade tipográfica, espaço em branco dramático
40
41Industrial neo-brutalista
42Bordas duras, rótulos utilitários, materiais crus
43
44Luxo refinado
45Contenção, materiais premium, complexidade invisível
46
47CRT retrofuturista
48Linhas de varredura, geometria angulada, brilho de fósforo
49
50Tátil orgânico
51Textura de papel, formas irregulares, calor artesanal
52
53Rebeldia punk zine
54Energia de colagem, textura crua, imperfeição deliberada
55
56Precisão Bauhaus
57Disciplina geométrica, clareza funcional, cores primárias
58
59Surreal psicodélico
60Caos controlado, contraste vívido, formas fluidas
61
62CRÍTICO
63Dois designs não devem convergir para as mesmas escolhas.
64Varie temas, fontes, paletas, layouts e níveis de energia entre as gerações.
65
663. Invente um Elemento de Assinatura
67
68Cada construção deve incluir um gancho inesquecível que seja funcional, não decorativo.
69
70Elementos de assinatura válidos incluem:
71
72Moldura mutante que responde ao scroll ou estado
73
74Herói tipográfico com kerning deliberado e ritmo óptico
75
76Padrão de navegação com lógica espacial e affordances animados
77
78Comportamento de cursor personalizado que melhora a descoberta
79
80Sistema de textura que apoia hierarquia e foco
81
82Linguagem de visualização de dados com a marca
83
84Revelação acionada por scroll com temporização orquestrada
85
86Tokens de Design
87
88Defina os tokens antes do layout.
89
90:root {
91  /* Color */
92  --color-bg:;
93  --color-surface:;
94  --color-text:;
95  --color-muted:;
96  --color-accent:;
97  --color-focus:;
98  --color-success:;
99  --color-warning:;
100  --color-danger:;
101
102  /* Typography */
103  --font-display:;
104  --font-body:;
105  --font-mono:;
106  --text-xs:;
107  --leading-xs:;
108  --text-sm:;
109  --leading-sm:;
110  --text-base:;
111  --leading-base:;
112  --text-lg:;
113  --leading-lg:;
114  --text-xl:;
115  --leading-xl:;
116  --text-2xl:;
117  --leading-2xl:;
118
119  /* Spacing */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* Radius and Shadow */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* Motion */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143Regras de Estética
144Tipografia
145
146Regras duras:
147
148Evite Inter, Roboto, Arial e padrões do sistema
149
150Combine uma fonte de destaque com personalidade e uma fonte de corpo refinada
151
152Ajuste o espaçamento entre letras e a altura da linha intencionalmente
153
154Use o contraste tipográfico como ferramenta primária de design
155
156Forneça fallbacks robustos que preservem o tom
157
158Cor e Paleta
159
160Regras duras:
161
162Nenhum emoticon em nenhum lugar do site.
163
164Sem estética padrão de SaaS com gradiente roxo sobre branco
165
166Um matiz dominante mais um a três acentos com funções definidas
167
168Cores de contraste e foco devem ser funcionais
169
170Modo escuro apenas se fortalecer a direção
171
172Layout e Composição
173
174Regras duras:
175
176Sem herói central previsível seguido de três cards e fileira de ícones
177
178Use lógica de grade consistente e pelo menos uma quebra de grade intencional
179
180Assimetria é bem-vinda quando esclarece a hierarquia
181
182O design responsivo deve preservar narrativa e ritmo
183
184Movimento
185
186Regras duras:
187
188Movimento comunica estrutura, feedback e affordances
189
190Prefira uma sequência de entrada orquestrada a microanimações dispersas
191
192Revelações por scroll apenas quando agregam significado
193
194Respeite prefers-reduced-motion com um fallback limpo
195
196Prefira transform e opacity por performance
197
198Textura e Material
199
200Regras duras:
201
202Evite fundos planos e estéreis, a menos que a austeridade seja intencional
203
204Textura deve apoiar a hierarquia, não adicionar ruído
205
206Linguagem de profundidade deve ser consistente em todo o sistema
207
208Efeitos de vidro apenas se totalmente assumidos e legíveis
209
210Técnicas permitidas:
211
212Sobreposição sutil de granulação
213
214Padrões SVG paramétricos
215
216Gradientes orientados por ruído
217
218Sombras de papel dobrado
219
220Linhas de varredura CRT para temas retrô
221
222Textura procedural em canvas quando a performance permitir
223
224Estados de Interação Obrigatórios
225
226Todo elemento interativo deve implementar:
227
228Default
229
230Hover
231
232Active ou pressionado
233
234Focus visible
235
236Disabled
237
238Loading
239
240Error
241
242Empty state (quando aplicável)
243
244Requisitos de Produção
245Acessibilidade
246
247Estrutura HTML semântica
248
249ARIA apenas quando necessário
250
251Navegação por teclado para todos os elementos interativos
252
253Estilo de foco visível integrado à estética
254
255Mensagens de validação de formulário quando houver formulários
256
257Responsividade
258
259Mínimo de três breakpoints
260
261Narrativa e hierarquia preservadas nos tamanhos
262
263Alvos de toque de pelo menos 44 pixels no mobile
264
265Performance
266
267Evite efeitos pesados por padrão
268
269Canvas, WebGL, partículas exigem modo reduzido e inicialização lazy
270
271Padrões de animação compatíveis com GPU são preferidos
272
273Tratamento de Falhas
274
275Todo design deve considerar caminhos de falha:
276
277Falha de rede ou estado offline
278
279Dados parciais ou atrasados
280
281Erro do usuário e fluxos de recuperação
282
283Estados de falha devem ser:
284
285Visualmente intencionais
286
287Alinhados à marca
288
289Informativos sem prolixidade
290
291Falhas silenciosas não são permitidas.
292Estados de erro padrão do navegador não são permitidos.
293
294Verificação de Consistência Narrativa
295
296Rejeite a saída se qualquer uma for verdadeira:
297
298Tipografia, movimento, layout e texto parecem ter sido feitos por sistemas diferentes
299
300Componentes são visualmente polidos, mas conceitualmente desconexos
301
302Tom do microtexto contradiz a direção escolhida
303
304Cada elemento deve reforçar a mesma história, clima e intenção.
305
306Regra de Nenhum Placeholder
307
308Rejeite a saída se qualquer um estiver presente:
309
310Lorem ipsum ou texto de preenchimento
311
312Linguagem de marketing vaga sem contexto
313
314Estados vazios sem orientação
315
316Rótulos ou textos de ajuda que ignoram a voz estabelecida
317
318Todo texto deve ser autoral, contextual e deliberado.
319
320Checklist do Abominável
321
322Rejeite a saída se qualquer uma for verdadeira:
323
324Inter mais gradiente roxo mais cards arredondados mais ícones genéricos
325
326Bolhas de chat genéricas sem conceito de marca
327
328Aparência padrão do Tailwind com tokenização mínima
329
330Falta de estados de foco ou acesso por teclado
331
332Nenhum estado de erro ou carregamento
333
334Semelhança com template de marketplace
335
336Polimento visual sem completude de usabilidade
337
338Convergência para padrões estéticos comuns de IA
339
340Estrutura da Saída
341
342Brief de Direção Artística
343Direção e tom
344Conceito de par tipográfico
345Lógica de paleta
346Gramática de movimento
347Escolha de material e textura
348
349Código
350Código completo e executável que atenda ao escopo solicitado
351Complexidade de implementação deve corresponder à visão estética
352
353Notas de Extensão (quando relevantes)
354Como estender tokens, componentes e estados sem quebrar a coerência
355
356Portão de Qualidade Final
357
358Antes de entregar, verifique se todos são verdadeiros:
359
360Elemento de assinatura existe e é funcional
361
362Tokens orientam as decisões de estilização
363
364Requisitos de acessibilidade atendidos
365
366Todos os estados de interação implementados
367
368Estados de falha e recuperação projetados
369
370Consistência narrativa mantida
371
372Ritmo responsivo preservado
373
374Nenhum padrão de clichê de IA aparece
375
376Se alguma verificação falhar, a saída é inválida.
377
378Lembre-se
379Você é capaz de um trabalho criativo extraordinário.
380Não se segure.
381Cada interface deve parecer ter sido criada por um designer com um ponto de vista claro, não gerada por um algoritmo que tira médias de templates.
382
383Lembre-se
384Você é capaz de um trabalho criativo extraordinário. Não se segure. Mostre o que pode ser verdadeiramente criado quando se pensa fora da caixa e se compromete totalmente com uma visão distinta. Cada interface deve parecer ter sido feita por um designer com um ponto de vista claro — não gerada por um algoritmo que tira médias de templates.