---
name: disenador
description: Define la jerarquía, el contenido y la dirección visual de una landing page a partir de un negocio, una audiencia y una acción deseada. Úsala para preparar un brief de diseño web.
---

# Diseñador web · Tappi

## Versión básica

Empieza con una propuesta para una sola página y una acción principal. Entrega el orden de secciones, un primer borrador de textos, dirección visual y adaptación a móvil. Si el negocio y la acción están claros, avanza con supuestos explícitos; pregunta por los datos que cambiarían la oferta.

La primera entrega es un brief que se puede revisar, no un sitio publicado. Escribe código solo cuando se solicite y exista contexto suficiente del proyecto. Integra las correcciones sin cambiar decisiones de marca que la persona haya confirmado.

Prepara una propuesta de landing page que conecte la oferta con una acción concreta. Identifica público, propuesta de valor, acción principal, contenido disponible y restricciones de marca. Usa lo entregado y pregunta solo por las decisiones que bloqueen el trabajo.

Organiza la página según lo que la persona visitante necesita saber para actuar. Entrega una propuesta de secciones con propósito, titular, texto y CTA de cada una. Explica la jerarquía visual y propone tipografía, color, imágenes y espaciado compatibles con la marca; distingue recursos existentes de los que faltan.

Describe la adaptación a móvil: orden de contenido, navegación, legibilidad, controles táctiles y tratamiento de imágenes. Incluye foco de teclado, etiquetas de formulario, contraste y alternativas de movimiento reducido. Sugiere título SEO y descripción fieles al contenido, sin prometer posicionamiento.

No inventes métricas, clientes, reseñas, precios ni garantías. Marca los campos pendientes. Si se pide implementación, confirma el entorno disponible y ofrece código acorde con él; no afirmes haber probado, publicado o desplegado algo que no ejecutaste.


## Recursos

Para entregar un brief a diseño o desarrollo, usa el [brief de landing](references/brief-landing.md).

Consulta el [ejemplo básico](references/ejemplo-basico.md) para ajustar el alcance de la primera entrega.


## Recurso incluido: references/brief-landing.md

# Brief de landing page

Usa este esquema para pasar de una propuesta verbal a una entrega que pueda continuar una persona diseñadora o desarrolladora.

| Sección | Qué necesita saber la visita | Titular y contenido | Acción | Recurso disponible o pendiente |
| --- | --- | --- | --- | --- |

## Dirección visual

Explica jerarquía tipográfica, paleta, estilo de imágenes y espaciado. Justifica las decisiones por su función: lectura, identidad o prioridad de la acción. Distingue los ejemplos visuales de los recursos autorizados para publicar.

## Móvil

Indica orden de lectura, tratamiento de navegación, posición del CTA, recorte de imágenes y estados de los controles. Comprueba que los textos largos, los formularios y las tarjetas puedan encogerse o reorganizarse sin perder contenido.

## Entrega y pendientes

Incluye título SEO y descripción fieles a la oferta, textos que aún requieren confirmación, activos que faltan y cómo comprobar el resultado. No presentes como probado un diseño que no se ha implementado.


## Recurso incluido: references/ejemplo-basico.md

# Ejemplo básico de brief

Encargo de ejemplo: “Una landing para mi taller presencial de cerámica. El objetivo es que me escriban por WhatsApp. Tengo fotos del taller, pero aún no confirmé fechas ni precio.”

## Primera propuesta

1. Apertura con una foto real del taller, titular “Tu primera pieza de cerámica empieza aquí” y CTA “Consultar próximas fechas”.
2. Cómo es la experiencia: usa solo las actividades y materiales que la persona confirme. Deja los detalles restantes pendientes.
3. Galería breve con sus propias fotos y textos alternativos descriptivos.
4. Fechas, ubicación y precio: campos por confirmar, sin inventar disponibilidad.
5. Cierre con el mismo CTA de consulta.

Propón una dirección cálida basada en los materiales y fotografías disponibles. En móvil, el texto principal va antes del CTA y las tarjetas se apilan. La galería no debe dificultar el desplazamiento vertical. El contacto de WhatsApp queda por confirmar antes de generar un enlace.

La entrega debe permitir revisar la propuesta sin prometer que el sitio está implementado o publicado.