Summary  
This chapter explains how to supply a UI design reference image and a precise prompt to an AI code assistant so it can automatically restyle an app’s interface—preserving its structure and features while updating its look.

General domain of usage  
Web application UI design

A menos que tengas un archivo de diseño listo, la forma más rápida de cambiar el estilo de tu aplicación es encontrar algo que te guste y mostrárselo a Claude Code. Este capítulo te guía paso a paso sobre cómo hacerlo.

### Cómo pasarlo a Claude Code

Una vez que hayas encontrado un diseño que te guste:
1. Copia o haz una captura de pantalla de la imagen
2. Pégala directamente en el chat de Claude Code
3. Añade una indicación específica junto a la imagen

Un ejemplo de indicación que funciona bien:

`
"Take the styling and colours of this UI design and implement it into my app. Keep the structure and functionalities exactly the same. Only change the design style."
`

Ser específico sobre lo que debe mantenerse igual es tan importante como describir lo que deseas cambiar. Si no indicas que la estructura debe permanecer igual, Claude Code podría modificar más de lo que esperabas.

### Qué modelo usar para diseño

Al trabajar en cambios de diseño, cambia el modelo a Opus usando el menú desplegable en Claude Code. Opus interpreta mejor la inspiración visual y la traduce en código. Para la mayoría de las demás tareas, Sonnet es la opción adecuada, pero para diseño, vale la pena usar Opus.

### Esperar iteraciones

La primera versión te llevará la mayor parte del camino. No siempre será perfecta. Eso está bien. Observa el resultado, identifica el único aspecto que deseas ajustar y envía una indicación de seguimiento que sea específica sobre ese aspecto.

Decir: "Cambia el color del encabezado a azul profundo. No cambies nada más."

Decir: "Haz que el fondo sea gris oscuro sólido en lugar del degradado."

Decir: "Haz que el botón de enviar sea más redondeado y aumenta ligeramente su tamaño."

¿Cuál es la forma recomendada de cambiar el diseño de tu aplicación usando Claude Code?

Construye y lanza una aplicación real en solo un fin de semana utilizando herramientas modernas de IA y un flujo de trabajo simple y práctico, empleando Claude Code para planificar, generar y perfeccionar tu código, gestionando tu proyecto con GitHub y desplegando tu aplicación terminada en línea con Vercel. Comenzarás con una idea y rápidamente la convertirás en un plan de proyecto claro, luego avanzarás paso a paso en la construcción de una aplicación funcional, enfocándote en las características principales, una arquitectura sencilla y una iteración rápida en lugar de complejidad innecesaria, mientras aprendes a trabajar eficazmente con IA escribiendo mejores prompts, corrigiendo errores y mejorando funcionalidades, finalizando con una aplicación en línea, un proyecto limpio en GitHub y un sistema repetible para convertir futuras ideas en productos reales más rápido.

Comprender los conceptos básicos del desarrollo asistido por IA, configurar el entorno y familiarizarse con Claude Code antes de comenzar la primera aplicación.

Convierte tu idea en un plan claro y sencillo y define la versión más pequeña de tu aplicación que aporte valor real.

Pasa de cero a una aplicación en funcionamiento generando código con IA, configurando el proyecto y comprendiendo lo que se ha creado.

Mejora tu aplicación añadiendo funciones, refinando el diseño y aprendiendo a solucionar problemas de manera eficaz.

Publica tu proyecto, hazlo accesible en línea y asegúrate de que todo funcione utilizando GitHub y Vercel.

Mejorando el Diseño de la Aplicación

Cómo pasarlo a Claude Code

Qué modelo usar para diseño

Esperar iteraciones