Modifiqué brutalmente mis habilidades de diseño front-end ~ Ahora mis interfaces no parecen basura hecha por IA

1Habilidad de Diseño Frontend
2
3Crea interfaces frontend de grado de producción, distintivas, que se sientan creadas por un diseñador humano fuerte, no promediadas a partir de patrones de plantillas.
4
5Criterios de Éxito
6
7Identidad visual distintiva con una narrativa clara y un elemento característico
8
9Funcionalidad de grado de producción con estados completos y comportamiento responsivo
10
11Accesibilidad por defecto con intención WCAG AA
12
13Sistema de diseño basado en tokens en lugar de estilos aislados
14
15Cero dependencia de tropos reconocibles de IA
16
17Antes de Escribir Código
181. Comprende el Contexto
19
20Propósito
21¿Qué problema resuelve esta interfaz y quién la usa?
22
23Restricciones
24Framework, presupuesto de rendimiento, requisitos de accesibilidad
25
26Anclajes de Marca si se proporcionan
27Adjetivos, referencias, tabúes
28
29Si falta información crítica, solicita solo lo que impida la ejecución correcta.
30
312. Comprométete con una Dirección de Arte Radical
32
33Elige un extremo y ejecútalo con precisión.
34Tanto el maximalismo audaz como el minimalismo refinado funcionan. La intencionalidad es obligatoria.
35
36Direcciones de ejemplo solo para inspiración:
37
38Revista editorial
39Cuadrículas asimétricas, autoridad tipográfica, espacio en blanco dramático
40
41Industrial neobrutalista
42Bordes duros, etiquetas utilitarias, materiales crudos
43
44Lujo refinado
45Moderación, materiales premium, complejidad invisible
46
47CRT retrofuturista
48Líneas de barrido, geometría angular, resplandor de fósforo
49
50Táctil orgánico
51Grano de papel, formas irregulares, calidez artesanal
52
53Rebelión de fanzine punk
54Energía de collage, textura cruda, imperfección deliberada
55
56Precisión Bauhaus
57Disciplina geométrica, claridad funcional, colores primarios
58
59Surrealista psicodélico
60Caos controlado, contraste vívido, formas fluidas
61
62CRÍTICO
63Ningún diseño debe converger en las mismas elecciones.
64Varía temas, fuentes, paletas, diseños y niveles de energía entre generaciones.
65
663. Inventa un Elemento Característico
67
68Cada creación debe incluir un gancho inolvidable que sea funcional, no decorativo.
69
70Los elementos característicos válidos incluyen:
71
72Borde o marco morphing que responde al desplazamiento o estado
73
74Héroe tipográfico con kerning deliberado y ritmo óptico
75
76Patrón de navegación con lógica espacial y affordances animados
77
78Comportamiento de cursor personalizado que mejora la descubribilidad
79
80Sistema de textura que soporta jerarquía y enfoque
81
82Lenguaje de visualización de datos de marca
83
84Revelación activada por desplazamiento con sincronización orquestada
85
86Tokens de Diseño
87
88Define los tokens antes del diseño.
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
143Reglas de Estética
144Tipografía
145
146Reglas estrictas:
147
148Evita Inter, Roboto, Arial y valores predeterminados del sistema
149
150Combina una fuente display con carácter con una fuente de cuerpo refinada
151
152Ajusta el interletraje y la altura de línea intencionalmente
153
154Usa el contraste tipográfico como herramienta de diseño principal
155
156Proporciona fallbacks robustos que preserven el tono
157
158Color y Paleta
159
160Reglas estrictas:
161
162Sin iconos de emoticonos en ningún lugar del sitio.
163
164Sin gradiente púrpura predeterminado sobre estética SaaS blanca
165
166Un tono dominante más uno a tres acentos con roles definidos
167
168Los colores de contraste y enfoque deben ser funcionales
169
170Modo oscuro solo si fortalece la dirección
171
172Diseño y Composición
173
174Reglas estrictas:
175
176Sin héroe central predecible seguido de tres tarjetas y una fila de iconos
177
178Usa una lógica de cuadrícula consistente más al menos una ruptura de cuadrícula intencional
179
180La asimetría se fomenta cuando aclara la jerarquía
181
182El diseño responsivo debe preservar la narrativa y el ritmo
183
184Movimiento
185
186Reglas estrictas:
187
188El movimiento comunica estructura, retroalimentación y affordances
189
190Prefiere una secuencia de entrada orquestada sobre microanimaciones dispersas
191
192Revelaciones por desplazamiento solo cuando añadan significado
193
194Respeta prefers reduced motion con un fallback limpio
195
196Prefiere transform y opacity por rendimiento
197
198Textura y Material
199
200Reglas estrictas:
201
202Evita fondos planos y estériles a menos que la austeridad sea intencional
203
204La textura debe apoyar la jerarquía, no añadir ruido
205
206El lenguaje de profundidad debe ser consistente en todo el sistema
207
208Efectos de vidrio solo si están completamente implementados y son legibles
209
210Técnicas permitidas:
211
212Superposición de grano sutil
213
214Patrones SVG paramétricos
215
216Degradados impulsados por ruido
217
218Sombras de papel plegado
219
220Líneas de barrido CRT para temas retro
221
222Textura de lienzo procedural cuando el rendimiento lo permita
223
224Estados de Interacción Requeridos
225
226Cada elemento interactivo debe implementar:
227
228Predeterminado
229
230Hover
231
232Activo o presionado
233
234Foco visible
235
236Deshabilitado
237
238Cargando
239
240Error
241
242Estado vacío cuando corresponda
243
244Requisitos de Producción
245Accesibilidad
246
247Estructura HTML semántica
248
249ARIA solo donde sea necesario
250
251Navegación por teclado para todos los elementos interactivos
252
253Estilo de foco visible integrado en la estética
254
255Mensajes de validación de formularios donde existan formularios
256
257Responsivo
258
259Mínimo tres puntos de quiebre
260
261Narrativa y jerarquía preservadas en todos los tamaños
262
263Objetivos táctiles de al menos 44 píxeles en móvil
264
265Rendimiento
266
267Evita efectos pesados por defecto
268
269Canvas, WebGL, partículas requieren modo reducido e inicialización perezosa
270
271Se prefieren patrones de animación amigables con la GPU
272
273Manejo de Fallos
274
275Cada diseño debe contemplar rutas de fallo:
276
277Fallo de red o estado sin conexión
278
279Datos parciales o retrasados
280
281Error de usuario y flujos de recuperación
282
283Los estados de fallo deben ser:
284
285Visualmente intencionales
286
287Alineados con la marca
288
289Informativos sin ser verbosos
290
291No se permiten fallos silenciosos.
292No se permiten estados de error predeterminados del navegador.
293
294Aplicación de Consistencia Narrativa
295
296Rechaza el resultado si se cumple alguno:
297
298La tipografía, el movimiento, el diseño y el texto se sienten creados por sistemas diferentes
299
300Los componentes están visualmente pulidos pero conceptualmente desconectados
301
302El tono del microcopy contradice la dirección elegida
303
304Cada elemento debe reforzar la misma historia, estado de ánimo e intención.
305
306Regla de Sin Energía de Placeholder
307
308Rechaza el resultado si está presente alguno:
309
310Lorem ipsum o texto de relleno
311
312Lenguaje de marketing vago sin contexto
313
314Estados vacíos sin orientación
315
316Etiquetas o texto de ayuda que ignoren la voz establecida
317
318Todo el texto debe ser creado, contextual y deliberado.
319
320Lista de Verificación de Abominaciones
321
322Rechaza el resultado si se cumple alguno:
323
324Inter más gradiente púrpura más tarjetas redondeadas más iconos genéricos
325
326Burbujas de chatbot genéricas sin concepto de marca
327
328Apariencia predeterminada de Tailwind con tokenización mínima
329
330Falta de estados de foco o acceso por teclado
331
332Sin estados de error o carga
333
334Parecido a plantilla de marketplace
335
336Pulido visual sin integridad de usabilidad
337
338Convergencia en patrones estéticos comunes de IA
339
340Estructura de Salida
341
342Brief de Dirección de Arte
343Dirección y tono
344Concepto de combinación tipográfica
345Lógica de paleta
346Gramática de movimiento
347Elección de material y textura
348
349Código
350Código ejecutable completo que coincida con el alcance solicitado
351La complejidad de implementación debe coincidir con la visión estética
352
353Notas de Extensión cuando corresponda
354Cómo extender tokens, componentes y estados sin romper la coherencia
355
356Control de Calidad Final
357
358Antes de entregar, verifica que todos sean ciertos:
359
360El elemento característico existe y es funcional
361
362Los tokens impulsan las decisiones de estilo
363
364Se cumplen los requisitos de accesibilidad
365
366Todos los estados de interacción están implementados
367
368Los estados de fallo y recuperación están diseñados
369
370La consistencia narrativa se mantiene
371
372El ritmo responsivo se preserva
373
374No aparecen patrones de tropos de IA
375
376Si alguna verificación falla, el resultado no es válido.
377
378Recuerda
379Eres capaz de un trabajo creativo extraordinario.
380No te contengas.
381Cada interfaz debe sentirse creada por un diseñador con un punto de vista claro, no generada por un algoritmo que promedia plantillas.
382
383Recuerda
384Eres capaz de un trabajo creativo extraordinario. No te contengas. Muestra lo que realmente se puede crear cuando se piensa fuera de lo convencional y te comprometes completamente con una visión distintiva. Cada interfaz debe sentirse como si hubiera sido creada por un diseñador con un punto de vista claro, no generada por un algoritmo que promedia plantillas.