Cómo construye con IA la diseñadora principal de Claude Code [YouTube]

• Demuestra un flujo de trabajo real de cómo usa Claude Code en desarrollo de producto real, agregando directamente una función de autocompletado a Excalidraw
• Aunque es una charla de una diseñadora, el contenido se acerca mucho más a un flujo de trabajo de desarrollador, y muestra un proceso centrado en CLI donde ejecuta varias sesiones de Claude en paralelo con worktree, crea prototipos de funciones, los valida en el navegador y hasta abre el PR
• La idea central no es usar la IA solo como una herramienta que escribe código por ti, sino integrarla en un pipeline de desarrollo de producto que va desde explorar ideas → comparar implementaciones → autoverificación → redactar PR → incorporar feedback de revisión → ayudar con el merge
• Lo útil para diseñadores es que, aun reconociendo la limitación de que Claude todavía no toma bien decisiones de diseño, muestra cómo crear rápidamente varias implementaciones y hacer que se revisen mediante PR con capturas de pantalla y GIF para mejorar a la vez la velocidad de las decisiones de diseño y el control de calidad
• Lo útil para desarrolladores es que permite ver patrones concretos para conectar Claude Code con un repositorio real y un flujo de colaboración, como /prototype, loop, modo automático de permisos, pruebas autónomas basadas en Chrome y automatización de limpieza de código, revisión y merge de PR
• En especial, es importante la idea de que “aunque todos puedan construir, no todo debería desplegarse”, y que en la era de la IA, a medida que más personas puedan generar código, también habrá que escalar mediante sistemas automatizados la verificación, la revisión, la participación de diseño y los criterios de despliegue
• En definitiva, más que mostrar cómo una diseñadora programa con IA, este video muestra un caso de cómo diseñadores y desarrolladores pueden experimentar más rápido con IA en medio, sin perder la calidad del producto

---

Contexto de la charla y ponente

• Meaghan Choi, diseñadora líder de Claude Code
• Ya diseñaba productos CLI antes de adoptar IA, participó en el diseño de Claude CLI y se describe a sí misma como una “fanática de CLI”
• Menciona que en Anthropic el equipo tiene acceso constante a las herramientas y las usa todo el día, por lo que existe una cultura de buscar continuamente formas de trabajo más óptimas
• Aclara que la app de escritorio es más accesible y que todo lo mostrado en la demo también puede hacerse igual desde la desktop app
  • El uso de CLI es una preferencia personal de la ponente y no algo que la audiencia tenga que seguir obligatoriamente

Configuración para trabajo paralelo y de alta velocidad

• worktree

  • Si ejecutas varios Claude al mismo tiempo sobre un repositorio local, pueden sobrescribirse entre sí y generar conflictos
  • worktree crea copias aisladas del repositorio para poder realizar varias tareas en paralelo
    • Cuando ingenieros mantienen 4 o 5 Claude abiertos al mismo tiempo, normalmente es porque clonaron el repositorio como repo1, repo2, etc., o usan worktree
    • Al ejecutar claude --worktree, se hace checkout automático de una nueva rama, por lo que se recomienda por ser más fácil de administrar

• Opus 1M · fast mode

  • La ponente usa siempre Opus con 1 millón de contexto y fast mode, aunque el acceso puede estar restringido según la organización
  • Explica que es una configuración para hacer avanzar rápido una demo de 15 minutos y que sí hay una pequeña diferencia de velocidad

• auto mode

  • En Anthropic usan siempre auto mode, como alternativa al modo de permisos bajos
  • Un clasificador (classifier) detecta si una acción es riesgosa, así que el trabajo avanza mucho más rápido sin tener que aprobar una y otra vez con “Yes, accept”

• Loop

  • Loop es un prompt estándar que significa “sigue hasta terminar”, y hace que el trabajo se repita hasta completarse

Prompts y la skill de prototype

• Indica a Excalidraw que agregue una función de autocompletado con un prompt simple, sin especificaciones de diseño

• prototype skill

  • Una slash prototype skill creada por ella pidiéndoselo a Claude, que genera por defecto 5 (o n) alternativas de implementación para una función, las previsualiza en archivos HTML y luego itera
    • Subraya que la skill no se escribe a mano, sino mediante prompts, y dice que “hoy en día nadie escribe skills a mano”
  • Le pide a Claude que primero elija por sí mismo una sola opción y explique por qué, y comenta que le divierte ver ese resultado
  • Agrega “permitir investigación en línea”; en una base de código de producción habría indicado que consultara Slack, Google Docs, historiales de discusión, BigQuery y cualquier otra fuente disponible
  • Luego le indica implementar la mejor opción, verificarla, igualar el estilo y generar un PR con capturas de pantalla
    • Después, el proceso deja de centrarse en revisar el transcript y pasa a revisar el PR con grabaciones de la funcionalidad implementada
  • En la demo, entre varias propuestas de autocompletado por pestañas presentadas por Claude, se elige la opción 2 incorporando opiniones de la audiencia

Tres principios del trabajo

• La mayoría de los LLM, incluido Claude, todavía son débiles en diseño, por lo que las personas deben seguir interviniendo en el craft y en la toma de decisiones
  • No es necesariamente una limitación permanente, pero el flujo de trabajo actual está construido sobre la premisa de que “la persona decide qué entra en el producto”
• Se debe automatizar la programación, pero también delegar a Claude el trabajo no relacionado con código; de lo contrario, no se lo está usando de la forma más automatizada posible
• Que cualquiera pueda hacer ship no significa que todo deba ir a producción; ahora que más personas pueden hacer push a producción, se necesitan sistemas escalables

Automatización de tareas no relacionadas con código

• Claude in the web (cloud)

  • Se usa para atender de forma continua cientos de pequeños ajustes de pulido encontrados en la app, sin abrir sesiones aparte
  • Si los ingenieros se quejan de que hay demasiados cambios, se le pide hacer squash en un solo PR
    • Cambios menores de CSS incluso pueden aprobarse automáticamente sin revisión, lo que ayuda a mantener el nivel de terminación del producto

• Automatización del merge de PR

  • Casi todo el equipo mantiene Claude corriendo constantemente para ayudar con el merge de PR, y la ponente dice que ya no participa directamente ni en CI ni en la etapa previa al merge
  • simplify y code review son herramientas internas del repositorio para podar y ordenar la base de código (prune); comenta que cualquier equipo de ingeniería que use IA probablemente tenga herramientas equivalentes
  • commit push PR es un comando que ejecuta en lote las verificaciones internas
  • La skill ya incluye un comando para revisar PR abiertos y empujarlos hasta la etapa de finalización
    • Se integra con Slack para enviar DM automáticamente al revisor de código o al responsable de on-call; la clave está en la integración del conjunto de herramientas

• Claude in Chrome

  • Claude abre Chrome por sí mismo y prueba el funcionamiento, y se recomienda como la mejor forma de autoverificar cambios de frontend
  • El flujo consiste en registrar capturas como una serie de GIF, publicarlas y luego abrir el PR

• Rutinas programadas (Claude code work)

  • Con trabajos programados (routine), recopila cambios de frontend de todos los repositorios
  • Revisa Slack, transcripciones de Google Meet, Google Docs y otras fuentes para confirmar si hubo participación de diseño, y si no la hubo, lo marca
  • Si no hubo participación, revisa el diseño y redacta como borrador un PR de diseño adversarial (adversarial design), luego envía un DM al ingeniero correspondiente para pedir colaboración con un diseñador
    • Como Claude todavía es débil en diseño, la función de DM está desactivada, lo que se conecta con el principio 1 (los LLM aún son débiles en diseño)
  • La estrategia es empujar la automatización no solo al siguiente paso, sino al paso después del siguiente, para tenerlo listo y aplicarlo de inmediato cuando llegue el próximo modelo

Por qué esto resulta útil para diseñadores y desarrolladores

• El objetivo mismo de la charla es elevar el nivel de trabajo de los usuarios de Claude Code (up level), mostrando de forma directa métodos de trabajo populares dentro de Anthropic
• Desde la perspectiva del desarrollador, presenta comandos y comportamientos concretos que aumentan la velocidad del trabajo diario, como trabajo paralelo con worktree, eliminación de aprobaciones repetitivas con auto mode y automatización de merge de PR y CI
  • Explica que herramientas como simplify o code review, usadas en la charla, tienen equivalentes internos en cualquier equipo de ingeniería que use IA, por lo que recomienda preguntar al partner de ingeniería cómo aprovecharlas
• Desde la perspectiva del diseñador, deja clara la postura de que, dado que los LLM todavía son débiles en diseño, la persona debe seguir siendo quien lidera el craft y la toma de decisiones, mientras la automatización cumple un papel de apoyo
  • Presenta enfoques para proteger la calidad de diseño mediante sistemas, como la rutina programada que detecta y marca cambios de frontend enviados sin participación de diseño