Implementar con el diseño
Vuelve a Google AI Studio con el composite de Figma como referencia visual para que la IA regenere el código con tu identidad.
Paso 8 de 8
Ahora vuelves al punto de partida, pero con munición. En lugar de un prompt genérico, le das a Google AI Studio (o a tu herramienta de vibe coding) el composite de Figma y las especificaciones visuales concretas.
Preparar el prompt
Cuanto más específico, menos iteraciones. Incluye todo lo que definiste:
Design the interface based on:
- Logo: [adjuntar imagen o describir]
- Color palette: [colores hex del paso 5]
- Main button: [adjuntar imagen del botón]
- History items: [adjuntar imagen de los assets secundarios]
- Overall feel: analog, calm, not techy
Build the same app as before (voice journal with home, record,
history) but apply this visual design.Una foto del composite en Figma como referencia visual vale más que una descripción de mil palabras. Adjúntala directamente en el prompt.
Qué esperar
El resultado no va a ser una réplica exacta del composite. La IA interpreta las referencias y toma decisiones propias. Pero el punto de partida es radicalmente mejor que el one-shot genérico del primer paso. La app va a tener tu paleta, tu estilo y tu dirección emocional integrados desde el arranque.
A partir de aquí, iteras. Ajustas colores, reposicionas elementos, refinas la implementación. Pero la identidad visual ya está puesta.
Claude Code para codebase existente
Si ya tienes un codebase y quieres aplicar la identidad visual a un proyecto existente, usa Claude Code en lugar de Google AI Studio. Pasa las mismas referencias (paleta, assets, composite) como contexto y pide que aplique el branding al código que ya existe.
Qué herramienta usar según el caso
| Situación | Herramienta recomendada |
|---|---|
| App nueva desde cero | Google AI Studio |
| Codebase existente | Claude Code |
| Animaciones complejas o shaders | Gemini en Cursor |
| Ajustes puntuales de UI | Claude Code o Cursor |
Resultado de este paso
Una app funcional con identidad visual aplicada. No es el resultado final perfecto: es un punto de partida con criterio visual, listo para iterar y pulir.