Construí una página de aterrizaje sin abrir Figma ni una vez. Las herramientas que usé fueron principalmente Claude Design y Claude Code. El período de producción fue de una semana, con un total de más de 300 intercambios de ida y vuelta con la IA.
Lo que aprendí de esos 300 intercambios es que, si bien el acto de crear se ha vuelto significativamente más fácil gracias a la IA, el límite superior de la calidad final sigue estando determinado por el criterio humano. La IA se encarga de todo hasta proporcionar candidatos. A partir de ahí, elevarlo al tono deseado fue trabajo de la persona que juzga la calidad y lo envía de vuelta para revisiones.
Construí el sitio de documentación para Design Harness, un framework que maneja el diseño en cuatro capas: restricciones, contexto, verificación y evaluación. Como es un sitio sobre diseño, también tuve un subtema de ver hasta dónde podía llegar con los detalles superficiales y las interacciones.
https://x.com/kgsi/status/2072829167285207077
Voy a repasar los pasos que seguí y en qué gasté esos 300 intercambios, incluyendo capturas de pantalla reales.
Cómo usé Claude Design y Claude Code de manera diferente
Construí esta página de aterrizaje dividiendo los roles entre dos herramientas principales. Claude Design es una herramienta conversacional de generación de diseño donde das instrucciones mediante chat y aparece un prototipo HTML en vivo al instante. Claude Code es un agente de codificación que se ejecuta en la terminal e implementa directamente la base de código.
La división del trabajo era clara: Claude Design es excelente para dar forma a prototipos desde el principio. Esta vez, proporcioné un documento que resumía la política de diseño y los wireframes, respondí algunas preguntas, y se generó la primera página de aterrizaje. Este método es efectivo en la etapa de probar direcciones y romper cosas.
Por otro lado, para el trabajo de llevarlo a calidad de producción, como soporte responsive y detalles de accesibilidad, necesitas refinarlo con Claude Code.
Decide el diseño con Design, y termínalo con Code. Los usé en ese orden.
Verbalizando todo antes de crear
Cuando decidí hacer este sitio, la dirección ya estaba definida. Lo que tenía en mente era "¿qué pasa si agregas tipografías y efectos modernos a un tono clásico de estilo extranjero?" El concepto en sí proviene de la documentación de Design Harness.
Ten en cuenta que, como Claude no puede generar imágenes por sí solo, dejé eso a ChatGPT Images 2.0. Derivé ideas alternativas a partir de imágenes de sitios de muestra, construí un mood board para el sitio que quería crear y generé imágenes de fondo. Puse todo en palabras e imágenes de antemano para definir la dirección 'buena'. Todas las interacciones posteriores fueron básicamente una verificación cruzada con esto.
Explorando tonos visuales con Codex (ChatGPT Image 2.0), buscando entre varias imágenes y mood boards.
Refinar requiere cientos de interacciones (al menos)
Después de la preparación, comenzó el ida y vuelta con Claude Design. Mirando las capturas de pantalla, hubo más de 200 interacciones en total (aproximadamente una semana en términos de tiempo total de producción). Aquí está el desglose de las sesiones:
- "Requisitos de generación del sitio de la página de aterrizaje": aprox. 80 turnos
- "Animación de Design Harness": aprox. 80 turnos
- "Animación de fondo de texto KV": aprox. 50 turnos
- "Mejora de la explicación de Design Harness": aprox. 10 turnos
La animación de carga inicial y los efectos del Key Visual (KV) requirieron particularmente muchas interacciones. Los efectos no se hicieron de una sola vez; superpuse instrucciones para refinarlos (por ejemplo, un efecto que viene desde abajo, superponiendo efectos de desenfoque, etc.).
Capturas de Claude Design. Como la precisión disminuye a medida que aumenta el contexto, creé nuevas sesiones para cada tarea importante con el fin de explorar.
Por separado, estaba refinando el soporte responsive y la accesibilidad con Claude Code, por lo que suma aproximadamente 300 interacciones. En términos de sensación, creo que la sección Hero fue la que más tomó.
Al pasar de Claude Design a Claude Code, usé la función Compartir, pero recomiendo pasar el archivo zip completo mediante "Exportar". Si bien "Enviar a" es más fácil, tiene límites de transmisión de imágenes y la precisión de reproducción no es tan alta.
Al ver los números, podría parecer una tarea tediosa, pero dar instrucciones en sí se ha vuelto más fácil. Ya no necesitas comprender completamente HTML y CSS. Claude Design tiene una función de anotación donde puedes agregar comentarios directamente a los elementos en la pantalla. Si señalas la parte que quieres arreglar, casi cualquier instrucción detallada se cumplirá. Por lo tanto, las instrucciones que di se dividieron principalmente en tres categorías:
Señalar elementos con anotaciones para arreglar detalles. Transmitir movimientos en palabras, como la visualización del fondo del texto KV. Reajustar el tono a "estilo clásico extranjero"... La única habilidad necesaria que queda es la capacidad de verbalizar movimiento y tono.
Tomemos la navegación como ejemplo del ida y vuelta.
Inicialmente, era un efecto donde una línea subrayada se deslizaba al pasar el cursor. Era difícil de entender, así que proporcioné una URL de implementación de referencia y la cambié a un efecto de barajar caracteres. Luego, el ancho de los caracteres cambiaba durante el barajado, causando que las posiciones del menú se desplazaran. Cuando fijé el ancho, el espaciado quedó desigual. Incluso después de enviarlo de vuelta diciendo "todavía no está uniforme", no se solucionó. Finalmente, dejé de intentar ajustar el ancho y lo resolví cambiando la tipografía de la navegación a una monoespaciada de ancho fijo. Si el ancho de los caracteres es constante, nada se mueve incluso al barajar. Esto tomó 5 interacciones.
Los 300 intercambios fueron mayormente una repetición de este ciclo. Proporcionar URLs de sitios o implementaciones que quería referenciar para mostrar la dirección. Verbalizar brevemente la incomodidad con lo que salía, como "el espaciado ya no es uniforme", y enviarlo de vuelta. Si la misma corrección fallaba dos veces, dejaba de ajustar y cambiaba la premisa. Al final, nunca escribí un documento de especificaciones largo.
Por cierto, aunque casi no lo usé esta vez, existe un documento llamado Animación: Vocabulario y Habilidades, que debería hacer las instrucciones más eficientes si se usa. https://animations.dev/vocabulary
El acto de crear y el acto de juzgar
Al revisar el contenido de las interacciones, fue un proceso de juzgar la calidad de lo que salía y enviarlo de vuelta repetidamente. El acto de crear en sí ya puede ser manejado casi por completo por la IA. Si das instrucciones, los candidatos aparecen de inmediato. Pero, ¿el timing de la animación es correcto? ¿Hay suficiente espacio en blanco? ¿Qué es bueno y qué es malo? La IA no puede juzgar esto. Todavía es imposible hacer que la IA produzca el tono deseado de una sola vez. Si quieres elevar la calidad, no tienes más opción que juzgar y enviar de vuelta.
Probablemente por eso los resultados simples no alcanzan este nivel de calidad. Un estudio de la Escuela de Información de UC Berkeley, que observó 13 sesiones de diseñadores utilizando herramientas de IA generativa, llama al fenómeno donde la producción gravita hacia un estilo que se ve "de alta calidad" pero familiar, la "Trampa de Convergencia".
https://x.com/kgsi/status/2074250174986362999
Sin el criterio para enviar cosas de vuelta, la producción se asienta en una pulcritud genérica que no pertenece a nadie. La mayoría de los 300 intercambios se usaron para llevarla de vuelta desde allí hacia el tono deseado.
¿Qué sucede con las personas que pueden juzgar?
Hay una opinión de que la IA eventualmente podrá manejar completamente estos juicios estéticos y de calidad. Creo que eso sucederá en algunas áreas.
Sin embargo, en cada una de las más de 300 interacciones, fui yo quien detectó la incomodidad y la envió de vuelta, y no hubo señales de que eso se automatizara en ese proceso. Por supuesto, esto es solo n=1 de construir una página de aterrizaje. Todavía no sé si se puede decir lo mismo de otros trabajos de diseño.
Habiendo terminado este proceso, mi predicción es que los "asientos" para las personas que crean cosas disminuirán. Un trabajo que toma una semana diseñar una página de aterrizaje será reemplazado por un trabajo que implica medio día de ida y vuelta con una IA. En ese momento, las personas que permanezcan en sus asientos serán aquellas con el conocimiento y los criterios de juicio para decir en segundos, "Quédate con la propuesta correcta, pero rehaz el movimiento", frente a los candidatos alineados. Creo que la demanda de personas que puedan juzgar mientras dominan la IA en realidad aumentará.
Lo que los diseñadores deberían pulir pasará de sus manos a sus ojos. Los juicios que hice en esos 300 intercambios dependieron en última instancia de mi experiencia de crear cosas con mis propias manos. Si es así, en un mundo donde la cantidad de veces que creamos cosas disminuye, ¿hay una manera de desarrollar solo los ojos?
Como nota al margen, el sitio de curaduría "Parascope", donde puedes adquirir habilidades de "diseño", actualmente opera con éxito 👉 http://parascope.design/
