Usar Claude para prototipos y UX

Una idea de función es más fácil de evaluar cuando las personas pueden recorrerla haciendo clic. Con Claude Design, describes la función en una conversación y Claude construye un prototipo que tu equipo puede abrir y probar. Si Claude tiene tu sistema de diseño, construye el prototipo a partir de tus propios componentes, como los botones y formularios reales de tu producto.

1. Inicia un diseño

Puedes iniciar un diseño desde donde sea que trabajes con Claude.

• En cualquier conversación: pide un prototipo, una maqueta o un conjunto de pantallas, en la web o en la aplicación de escritorio.
• Desde la barra lateral: abre Artifacts, elige Design en Make something new, y describe lo que quieres en la conversación que se abre.
• En Claude Code, dentro de tu repositorio: pide de la misma manera. Allí, Claude también puede leer el código de tu producto, como explica la sección 3.

El diseño se abre junto a la conversación en un lienzo que puedes desplazar y ampliar. Cada pantalla se ubica en su propia mesa de trabajo. El diseño se guarda en Artifacts, y otras personas no pueden abrirlo hasta que lo compartas.

2. Crea un prototipo de la función

Aquí tienes algunos tipos de prototipos que puedes pedir, con indicaciones para probar.

Una función nueva

Describe la pantalla, sus secciones y cómo se comportan.

• "Diseña una nueva página de configuración para nuestra aplicación SaaS con secciones para cuenta, facturación, notificaciones e integraciones. Incluye una navegación lateral y haz que cada sección sea expandible."
• "Crea un prototipo de una experiencia de búsqueda con filtros, resultados facetados y un panel de detalles que se desliza desde la derecha al hacer clic en un resultado. Hazlo interactivo."
• "Construye una interfaz de flujo de aprobación donde los gerentes puedan revisar, comentar y aprobar o rechazar solicitudes enviadas en una cola."

Alternativas para una revisión de diseño

Pide cada enfoque en su propia mesa de trabajo. Luego tú y tus revisores podrán compararlos lado a lado.

• "Muéstrame tres diseños diferentes para una página de perfil de usuario: uno basado en tarjetas, uno con una barra lateral izquierda y uno con navegación por pestañas superiores. Pon cada uno en su propia mesa de trabajo."
• "Crea dos versiones de este flujo de pago en mesas de trabajo separadas, una de una sola página y otra de varios pasos, para poder compararlas en una revisión de diseño."

Un flujo completo

Describe el recorrido paso a paso.

"Traza el flujo para un usuario que quiere actualizar de un plan gratuito a un plan de pago. Comienza desde el panel donde ve el aviso de actualización, pasando por la página de comparación de planes, el formulario de pago, la confirmación y el panel actualizado con las funciones premium desbloqueadas."

Herramientas internas y paneles de administración

Claude Design funciona bien para herramientas internas, como paneles de administración y colas de moderación. Las personas pueden recorrer el prototipo haciendo clic y ver si los pasos funcionan antes de que las pantallas estén pulidas.

"Diseña un panel de administración para gestionar cuentas de usuario: una tabla con búsqueda con filtros por tipo de plan y estado, y un panel lateral de detalles que muestra el historial de la cuenta y permite modificar permisos."

Es posible que Claude no tenga todos los datos, como tus precios reales. Puede preguntarte, o hacer una suposición. Revisa siempre el trabajo de Claude y verifica los detalles antes de compartir el diseño. Para obtener más información sobre cómo evaluar los resultados de Claude, lee Cómo las personas verifican el trabajo de Claude, nuestro informe educativo.

3. Construye con tus propios componentes

Claude puede construir un prototipo con tus componentes reales, los mismos botones y formularios que tu producto ya usa. Así, el prototipo coincide con lo que los ingenieros construirán. Sin tus componentes, Claude dibuja su propia versión que solo se parece.

Puedes obtener un prototipo que coincida con tu producto de cualquiera de estas dos maneras:

• Configura un sistema de diseño (recomendado): un sistema de diseño mantiene tus colores, tipografía y componentes en un solo lugar en Claude. Una vez que tu organización haya establecido uno predeterminado, Claude lo usa para cualquier diseño que tu equipo inicie. Consulta Configurar un sistema de diseño en Claude.
• Trabaja desde Claude Code en el repositorio: pide el diseño desde una sesión de Claude Code dentro de tu proyecto. Claude puede leer el código y captar los colores, la tipografía y el espaciado que tu producto ya usa. Esto no requiere configuración.

Cualquiera que elijas, estos hábitos ayudan:

• Nombra los componentes en tus indicaciones: "usa el componente ProductCard" o "sigue el mismo diseño que la página de configuración" le indica a Claude cuáles usar.
• Dirige a Claude hacia el código de la interfaz: en un repositorio grande, dile a Claude qué paquete o carpeta contiene los componentes.
• Para cambiar un componente, pídeselo a Claude: tus componentes reales aparecen en la mesa de trabajo exactamente como están en tu código.
• Actualiza después de que cambie la biblioteca: un sistema de diseño sincronizado desde tu código conserva una copia de tus componentes desde la última sincronización. Vuelve a sincronizarlo después de un lanzamiento.

4. Refina en las mesas de trabajo

Puedes cambiar un diseño tú mismo, dejar un comentario para Claude, o pedirlo en la conversación. Los cambios se guardan a medida que los haces, así que no hay un botón Guardar.

• A mano: haz clic en un elemento para seleccionarlo, haz doble clic en el texto para reescribirlo, y arrastra para moverlo. Usa la barra de herramientas para agregar texto, notas, formas y nuevas mesas de trabajo. Properties muestra la configuración del elemento que seleccionaste.
• Con un comentario: para cambiar un elemento, activa los comentarios, haz clic en el elemento, escribe lo que quieres, y mantén marcada la opción Send to Claude. Claude hace el cambio y responde en el hilo de comentarios.
• Pidiéndolo: para un cambio más grande, como un nuevo estado u otra alternativa, pídelo en la conversación.

Por ejemplo: "Muestra cómo maneja esta página el estado vacío, el estado de error y un estado de carga. Pon cada uno en su propia mesa de trabajo junto a la actual."

5. Revísalo con tu equipo

Con Share, eliges quién puede abrir el diseño y si puede ver, comentar o editar. Las personas que invites necesitan una cuenta de Claude. Para conocer las opciones de cada plan, consulta Compartir artifacts en el Centro de ayuda.

Lo que cada persona puede hacer depende del acceso que le des:

• Puede ver: abre el diseño, hace clic en cualquier elemento para leer su tamaño, espaciado y colores, y ejecuta una mesa de trabajo interactiva con Play. No puede cambiar nada.
• Puede comentar: lo mismo, además de comentar los elementos en los que hace clic.
• Puede editar: cambia el diseño por sí mismo y agrega notas en el lienzo. Las personas de tu organización que pueden editar también pueden enviar un comentario a Claude como solicitud.

Las personas con acceso de edición pueden trabajar en el lienzo al mismo tiempo, y ven los cambios de los demás a medida que ocurren.

En los planes Team y Enterprise, un propietario de tu organización decide si puedes compartir fuera de ella. Para alguien que no pueda abrir el enlace, usa Export. Puedes exportar:

• Una mesa de trabajo como archivo PNG, PDF o HTML (.zip)
• Todo el prototipo como una sola página web (HTML), desde Share > Export
• Todas las mesas de trabajo en un solo PDF

6. Continúa en Claude Code

Claude Code puede abrir un prototipo creado en Claude Design. Un ingeniero puede entonces construir a partir de las mesas de trabajo reales y los componentes que contienen, no a partir de una captura de pantalla.

• Si diseñaste en Claude Code: permanece en la misma sesión y pídele a Claude que lo construya. Para volver más tarde, abre el diseño desde Artifacts y usa el botón junto a Share para reabrir la sesión que lo creó.
• Si diseñaste en otro lugar: dale al ingeniero acceso de edición al diseño. En Claude Code, dentro del repositorio, pega el enlace del diseño y pídele a Claude que lo implemente.

Antes de comenzar la construcción

Algunos pasos facilitan construir a partir del diseño:

• Nombra las mesas de trabajo y los componentes con claridad: Claude Code lee esos nombres en el diseño.
• Anota las decisiones a medida que las tomas: si elegiste pestañas en lugar de una barra lateral, explica por qué en una nota en la mesa de trabajo, donde Claude Code pueda leerla.
• Pide primero los estados vacío, de error y de carga: también pregunta cómo se comporta la pantalla con muy pocos datos y con muchos más de los que esperas.

7. Un ejemplo de la idea a la implementación

1. Un PM describe la función en una conversación. Es un centro de notificaciones con filtrado y acciones masivas.
2. Claude construye un primer prototipo a partir del sistema de diseño de la organización, y un diseñador lo refina en las mesas de trabajo.
3. El PM comparte el diseño para una revisión asíncrona, y el equipo ejecuta el prototipo y comenta.
4. Un ingeniero abre el diseño en Claude Code y le pide a Claude que lo implemente.

Si algo se ve mal

Más recursos

• Crear diapositivas y presentaciones con Claude para presentaciones.
• Configurar un sistema de diseño en Claude para que los diseños usen tus componentes y tipografía.
• Colabora con tu equipo en Claude artifacts para saber cómo se comparten y editan los diseños con tu equipo.
• Visita el Centro de ayuda para más soporte y solución de problemas.