Modifiqué drásticamente mis habilidades de diseño front-end: ahora mis interfaces no parecen basura generada por IA

1Habilidad de Diseño Frontend
2
3Crea interfaces frontend distintivas y de calidad de producción que se sientan creadas por un diseñador humano con criterio, 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 nivel 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, no en estilos aislados
14
15Cero dependencia de clichés 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 aquello que bloquee la ejecución correcta.
30
312. Apuesta por una Dirección Artística 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 como inspiración:
37
38Revista editorial
39Cuadrículas asimétricas, autoridad tipográfica, espacios en blanco dramáticos
40
41Industrial neobrutalista
42Bordes duros, etiquetas utilitarias, materiales en bruto
43
44Lujo refinado
45Contención, materiales premium, complejidad invisible
46
47CRT retro futurista
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 punk fanzine
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 construcción debe incluir un gancho inolvidable que sea funcional, no decorativo.
69
70Los elementos característicos válidos incluyen:
71
72Borde o marco que se transforma respondiendo al scroll o al estado
73
74Hero 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 respalda la jerarquía y el enfoque
81
82Lenguaje de visualización de datos con marca
83
84Revelación activada por scroll 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 Estéticas
144Tipografía
145
146Reglas estrictas:
147
148Evita Inter, Roboto, Arial y los valores por defecto del sistema
149
150Combina una fuente display con carácter con una fuente de cuerpo refinada
151
152Ajusta el espaciado entre letras y la altura de línea intencionadamente
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
162No uses iconos de emoticonos en ningún lugar del sitio.
163
164Ningún gradiente púrpura por defecto con estética SaaS blanca
165
166Un tono dominante más de 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 hero central predecible seguido de tres tarjetas y fila de iconos
177
178Usa una lógica de cuadrícula consistente más al menos una ruptura intencional
179
180La asimetría es bienvenida 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
192Las revelaciones con scroll solo cuando añaden 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 aplicados y son legibles
209
210Técnicas permitidas:
211
212Sutil superposición de grano
213
214Patrones SVG paramétricos
215
216Gradientes 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
228Default
229
230Hover
231
232Activo o presionado
233
234Focus 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 enfoque visible integrado en la estética
254
255Mensajes de validación de formularios donde existan
256
257Responsive
258
259Mínimo tres puntos de ruptura
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 diferida
270
271Patrones de animación favorables a GPU preferidos
272
273Manejo de Fallos
274
275Cada diseño debe contemplar los caminos de fallo:
276
277Fallo de red o estado offline
278
279Datos parciales o retrasados
280
281Error del usuario y flujos de recuperación
282
283Los estados de fallo deben ser:
284
285Visualmente intencionales
286
287Acordes a la marca
288
289Informativos sin verbosidad
290
291No se permiten fallos silenciosos.
292No se permiten estados de error por defecto del navegador.
293
294Aplicación de Coherencia Narrativa
295
296Rechaza la salida si se cumple alguna de estas:
297
298La tipografía, el movimiento, el diseño y el texto parecen 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 Contenido de Relleno
307
308Rechaza la salida 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 ignoran la voz establecida
317
318Todo el texto debe ser escrito, contextual y deliberado.
319
320Lista de Abominaciones
321
322Rechaza la salida si se cumple alguna de estas:
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 Tailwind por defecto 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 plantillas de marketplace
335
336Pulido visual sin completitud de usabilidad
337
338Convergencia en patrones estéticos comunes de IA
339
340Estructura de Salida
341
342Brief de Dirección Artística
343Dirección y tono
344Concepto de emparejamiento tipográfico
345Lógica de paleta
346Gramática de movimiento
347Elección de material y textura
348
349Código
350Código completo ejecutable 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 sea relevante
354Cómo extender tokens, componentes y estados sin romper la coherencia
355
356Control de Calidad Final
357
358Antes de entregar, verifica que todo sea cierto:
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 coherencia narrativa se mantiene
371
372El ritmo responsivo se preserva
373
374No aparecen patrones de clichés de IA
375
376Si alguna verificación falla, la salida no es válida.
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 se apuesta completamente por una visión distintiva. Cada interfaz debe sentirse como si la hubiera creado un diseñador con un punto de vista claro, no generada por un algoritmo que promedia plantillas.