Creación de una LP con Claude Design y Claude Code: Lecciones sobre la ejecución frente al criterio

Construí una landing page 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 interacciones de ida y vuelta con la IA.

Lo que aprendí de esas 300 interacciones 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 determinado por el juicio humano. La IA se encarga de todo hasta proporcionar candidatos. A partir de ahí, elevarlo al tono deseado era trabajo de la persona que juzgaba la calidad y lo devolvía para revisiones.

Construí el sitio de documentación de 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 tenía el subtema de ver hasta dónde podía llegar con los detalles superficiales y las interacciones.

https://x.com/kgsi/status/2072829167285207077

Repasaré los pasos que seguí y en qué gasté esas 300 interacciones, incluyendo capturas de pantalla reales.

Cómo usé Claude Design y Claude Code de manera diferente

Construí esta LP dividiendo roles entre dos herramientas principales. Claude Design es una herramienta conversacional de generación de diseño donde das instrucciones mediante chat y un prototipo HTML en vivo aparece 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 de trabajo era clara: Claude Design es excelente para dar forma a prototipos en las primeras etapas. 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 LP. 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 el soporte responsive y los detalles de accesibilidad— necesitas refinarlo con Claude Code.

Decide el diseño con Design, y finalízalo con Code. Los usé en ese orden.

Verbalizar todo antes de hacer

Cuando decidí hacer este sitio, la dirección ya estaba establecida. Lo que tenía en mente era "qué pasa si añades 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. Obtuve ideas alternativas a partir de imágenes de sitios de muestra, creé 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 esencialmente cotejar con esto.

Explorando tonos visuales con Codex (ChatGPT Image 2.0), buscando 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 tiempo total de producción). Aquí está el desglose de las sesiones:

• "Requisitos de generación del sitio LP": aprox. 80 turnos
• "Animación de Design Harness": aprox. 80 turnos
• "Animación de visualizació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; fui superponiendo instrucciones para refinarlos (por ejemplo, un efecto que viene desde abajo, superposición de 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 para explorar.

Por separado, estaba refinando el soporte responsive y la accesibilidad con Claude Code, así que suma unas 300 interacciones. En cuanto a la sensación, creo que la sección Hero fue la que más llevó.

Al pasar de Claude Design a Claude Code, usé la función Compartir, pero recomiendo pasar todo el archivo zip mediante "Exportar". Aunque "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.

Mirando los números, podría parecer una tarea pesada, pero dar instrucciones en sí se ha vuelto más fácil. Ya no necesitas entender completamente HTML y CSS. Claude Design tiene una función de anotación donde puedes añadir comentarios directamente a los elementos en la pantalla. Si señalas la parte que quieres arreglar, casi cualquier instrucción detallada funcionará. 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 de texto KV. Realinear 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 hacer hover. Era difícil de entender, así que proporcioné una URL de implementación de referencia y la hice cambiar a un efecto de mezcla de caracteres. Luego, el ancho de los caracteres cambiaba durante la mezcla, causando que las posiciones del menú se desplazaran. Cuando hice que se fijara el ancho, el espaciado quedó desigual. Incluso después de devolverlo diciendo "todavía no está uniforme", no se arregló. Finalmente, dejé de intentar ajustar el ancho y lo solucioné 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 aunque se mezclen. Esto tomó 5 interacciones.

Las 300 interacciones fueron en su mayoría 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 devolverlo. 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 apenas lo usé esta vez, existe un documento llamado Vocabulario y Habilidades de Animación, que debería hacer las instrucciones más eficientes si se usa. https://animations.dev/vocabulary

El acto de hacer y el acto de juzgar

Mirando el contenido de las interacciones, fue un proceso de juzgar la calidad de lo que salía y devolverlo repetidamente. El acto de hacer en sí mismo ahora 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 genere el tono deseado de una sola vez. Si quieres elevar la calidad, no tienes más remedio que juzgar y devolverlo.

Esta es probablemente la razón por la que las salidas 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 usando herramientas de IA generativa, llama al fenómeno donde la salida gravita hacia un estilo que parece de "alta calidad" pero familiar la "Trampa de la Convergencia".

https://x.com/kgsi/status/2074250174986362999

Sin el juicio para devolver las cosas, la salida se asienta en una pulcritud genérica que no pertenece a nadie. La mayoría de las 300 interacciones se usaron para llevarlo de vuelta hacia el tono deseado desde allí.

¿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 devolvió, y no hubo señales de que eso se automatizara en ese proceso. Por supuesto, esto es solo n=1 de construir una LP. No sé aún 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 hacen cosas disminuirán. Un trabajo que toma una semana diseñar una LP 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, "Ve 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 realmente aumentará.

Lo que los diseñadores deben pulir cambiará de sus manos a sus ojos. Los juicios que hice en esas 300 interacciones finalmente dependieron de mi experiencia de hacer cosas con mis propias manos. Si es así, en un mundo donde la cantidad de veces que hacemos cosas disminuye, ¿hay una manera de desarrollar solo los ojos?

Como nota al margen, el sitio de curación "Parascope", donde puedes adquirir habilidades de "diseño", actualmente está operando con éxito 👉 http://parascope.design/