4.2 Del brief al prototipo

Información
⏱ Duración: ~40 min · 🎯 Objetivo: importar el brief de “Elektra Rewards 2.0”, generar un prototipo interactivo y refinarlo con controles finos.

Este es el ejercicio estrella de la sesión. Con el sistema de diseño ya cargado, vas a producir un prototipo de la landing “Elektra Rewards 2.0” — el rediseño del programa que rescataste en el track básico — partiendo de un brief, no de una hoja en blanco.

Paso 1 — Importa el brief

Sube design/design-brief.docx del zip. El brief trae objetivo, audiencia, mensajes clave y CTA de la landing. Claude Design acepta varios formatos de entrada:

  • Documentos: DOCX, PPTX, XLSX.
  • Imágenes y capturas.
  • Una base de código o la captura web de un sitio existente.
Consejo
Cuanto más específico el brief (objetivo, audiencia, tono, CTA), menos iteraciones necesitas después. El design-brief.docx ya viene estructurado para eso.

Paso 2 — Genera el prototipo

Con el brief cargado, pide el prototipo. Prompt sugerido (≤60 palabras):

Con este brief y el sistema de diseño de Elektra, genera un
prototipo interactivo de la landing "Elektra Rewards 2.0":
hero con la propuesta de valor, sección de beneficios del
programa, prueba social y un CTA claro para registrarse.
Que use nuestros colores y tipografía.

Claude arma un prototipo interactivo — no una imagen estática — que puedes navegar y compartir sin revisión de código ni PRs.

Paso 3 — Refina con controles finos

Aquí está la diferencia con generar y rezar. Claude Design te da control fino, en palabras oficiales:

  • Comenta inline sobre cualquier elemento.
  • Edita el texto directamente en el prototipo.
  • Usa perillas de ajuste para modificar spacing, color y layout en vivo.
Sube el contraste del CTA, reduce el espaciado del hero un 20%
y cambia el titular a "Tus puntos, más cerca que nunca".
Consejo
Refina en pasadas cortas: un cambio, míralo, el siguiente. Es más rápido que un prompt gigante que reescribe todo de golpe.

✅ Checkpoint

  • Importaste design-brief.docx y generaste un prototipo interactivo de “Elektra Rewards 2.0”.
  • Refinaste al menos un elemento con comentario inline, edición de texto o perillas de spacing/color/layout.
¿Te quedó claro? — 2 preguntas
  1. ¿Qué formatos acepta Claude Design como entrada? → Texto, imágenes, documentos (DOCX/PPTX/XLSX), una base de código o la captura de un sitio web.
  2. ¿Cómo refinas un prototipo sin rehacerlo? → Con controles finos: comentario inline, edición directa de texto y perillas de spacing, color y layout en vivo.