Claude Design: convierte tus ideas en diseños profesionales

Antes de diseñar nada quiero cerrar el alcance. Ponte en el papel de quien
define el producto y devuélveme la ficha.

Lo que estoy construyendo: una app para no romper la cadena de un hábito.
Se llama Cadena, y cada día marcado es un eslabón más. Es de uso personal
—una sola persona, yo—, se abre desde el celular y se usa treinta segundos
al día, casi siempre de noche.

Devuélveme una ficha de UNA página, en español, con estos ocho títulos y
nada entre medio:

EN UNA FRASE       Qué es, dicho como se lo contarías a un amigo.
PARA QUIÉN         Una persona concreta, no un segmento de mercado.
EL MOMENTO         Cuándo y dónde se abre. Eso decide el tamaño de todo.
AL ABRIRLA         Qué se ve. Describe también el primer día, cuando
                   todavía no hay nada guardado.
LAS ACCIONES       Cuatro como máximo, en infinitivo. Entre las cuatro
                   tiene que poder crearse, verse, corregirse y borrarse
                   lo que la app guarda: si no se puede borrar, el primer
                   error se queda ahí para siempre.
LO QUE SE GUARDA   En palabras. Nada de tablas ni de SQL.
FUERA DE ALCANCE   Tres cosas que dejamos afuera a propósito para que esto
                   se termine en una hora.
SABRÉ QUE SIRVE    Una señal observable de que la app está funcionando.

Reglas del encargo: sin cuentas ni registro, sin notificaciones, sin nada
social. Una sola pantalla. Ninguna sección pasa de cuatro líneas — si
necesitas más, es que todavía no decidiste. No agregues funciones que no
te pedí.

Este es el sistema de diseño que vas a usar en todo este proyecto.
Respétalo estrictamente. No inventes colores ni formas nuevas.

SUPERFICIE — una sola, clara.
  papel          #ffffff   fondo
  papel elevado  #f8f6f9   tarjetas sobre el fondo

COLORES — dos familias, planas. Sin gradientes.
  Púrpura, familia primaria:
    púrpura 900   #46226a   primario de marca y acción
    púrpura 700   #6d35a6   estado cumplido
  Petróleo, familia secundaria — siempre significa información:
    petróleo 900  #23596d   información y eyebrows
    petróleo 700  #3588a6   relleno de gráficos, nunca texto
  Acentos de contenido — sirven para distinguir elementos entre sí, nunca para dar significado:
    una familia de pasteles claros sobre los que el texto ink sigue legible.
    Se usan como fondo de tarjeta. Nunca en texto, en botones ni en estados.
  Texto principal: ink #171719. Texto secundario: ink al 72%. Texto sutil: ink al 50%.
  Texto sobre relleno púrpura: blanco.
  Bordes: púrpura 900 al 16%. Bordes fuertes: púrpura 900 al 34%.
  Los pasos claros de cada familia no se usan en esta superficie: no tienen contraste suficiente.
  Todo color va como token. Ningún componente escribe un rgba a mano.

TIPOGRAFÍA
  Interfaz: Stack Sans. Si no está, usa Inter y luego la del sistema.
  Marca: Dolce Vita, solo en el logotipo y en titulares de hasta seis palabras.
  Si Dolce Vita no está, usa la tipografía de interfaz en peso 700 — no la reemplaces
  por una decorativa cualquiera.
  Titulares grandes, peso 700, tracking -0.02em, interlineado 1.02.
  Cuerpo en 16px con interlineado 1.45.
  Eyebrows: 11px, MAYÚSCULAS, tracking 0.06em, petróleo 900.
  Código: PT Mono.

FORMA — el lenguaje sale del isotipo: un círculo con cápsulas adentro.
  Botones y etiquetas: radio 999px, siempre pastilla.
  Tarjetas: radio 24px. Contenedores grandes: 32px o 48px.
  Todo lo que represente un día, un estado o un check: círculo perfecto.
  El logo va en su variante de color o en negro. La variante blanca no se usa aquí.
  Si no te entregué el archivo del logo, no lo dibujes: escribe el nombre de la marca.

ACCIÓN Y ESTADO — comparten familia, los separa la forma.
  Relleno sólido en cápsula es siempre acción: púrpura 900 con texto blanco.
  Relleno sólido en círculo es siempre estado cumplido: púrpura 700 con check blanco.
  Una sola acción PRINCIPAL por pantalla: solo esa va en cápsula rellena.
  Las demás van con contorno; y la acción que se repite sobre cada elemento de una lista
  va como control circular, no como cápsula.

ESPACIADO
  Base de 4px. Múltiplos: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.

MOVIMIENTO
  120ms para hover, 220ms para cambios de estado.
  Al presionar un botón, escala a 0.96.

REGLAS DURAS — son decisiones, no prohibiciones por prohibir.
  Emojis: solo cuando son dato, nunca cuando son adorno. Un emoji puede representar un
  estado —una racha encendida, un día perdido, un logro— si significa siempre lo mismo y
  se dibuja siempre igual. No van en botones, títulos, etiquetas ni viñetas.
  Degradados: no en botones, tarjetas ni fondos de pantalla. El degradado de marca vive
  solo dentro del logo; en pantalla se usan sus variantes monocromas. Un brillo suave
  dentro de una ilustración está bien si no compite con el texto.
  Sin modos de fusión.
  Un color de marca, un significado: petróleo es información; púrpura es marca, acción y
  estado cumplido. Los acentos de contenido no significan nada por sí solos.
  Todos los textos en español de Latinoamérica. Textos cortos y directos.

Quiero armar el sistema de diseño de mi marca. Hazme diez preguntas,
de a una a la vez, esperando mi respuesta antes de pasar a la siguiente.
Cuando terminemos, escríbelo con la misma estructura y el mismo nivel de
detalle que este sistema, incluyendo su lista de reglas duras:

[pega aquí el Prompt 2]

Con el sistema de diseño que te pasé y esta ficha, arma la pantalla.

[pega aquí tu ficha]

Te adjunto capturas de referencia. Míralas para el aire, el ritmo y el nivel
de color — no para copiar sus composiciones ni sus componentes.

Cómo quiero la pantalla:
- Una sola, en una columna angosta de teléfono, centrada y con aire a los
  lados cuando se abre en un computador.
- Arriba del todo: el nombre de la app y, en una línea, cómo va el día.
- Cada hábito vive en su propia tarjeta. Dos tarjetas vecinas no repiten
  color de acento.
- Dentro de la tarjeta: el nombre del hábito; los últimos siete días como
  siete marcas en fila, donde cumplido y no cumplido se distinguen de un
  vistazo; la racha actual; y a la derecha el control grande para marcar
  el día de hoy.
- Debajo de la lista, la forma de agregar un hábito nuevo.
- Muéstrame también la pantalla del primer día, sin ningún hábito creado.
  Tiene que invitar a crear el primero, no quedarse en blanco.
- Inventa tres hábitos de ejemplo para poder verla llena.

Si algo de las referencias choca con el sistema de diseño, gana el sistema —
y dime cuál fue el choque antes de resolverlo.

Diseña una landing page de una sola página, en español, siguiendo
estrictamente el sistema de diseño que te di.

QUIÉN SOY
  Nombre o marca: [tu nombre o el de tu negocio]
  A qué me dedico: [a qué te dedicas]
  Dónde trabajo: [dónde trabajas]

A QUIÉN LE HABLO
  Mi cliente es: [quién es tu cliente]
  Llega a mí cuando: [cuándo llega a ti tu cliente]
  Lo que más le preocupa: [qué le preocupa más a tu cliente]

QUÉ OFREZCO
  [qué ofreces (hasta tres, uno por línea)]

LA PROMESA
  En una frase, lo que gana quien trabaja conmigo: [qué gana quien trabaja contigo, en una frase]

POR QUÉ YO
  [por qué elegirte a ti]

LA ÚNICA ACCIÓN
  Quiero que quien entre haga esto: [la única acción que quieres que haga quien entra]
  El botón debe decir exactamente: [el texto exacto del botón]

CONTACTO
  [los datos de contacto que quieras publicar]

TONO
  Quiero que se sienta: [cómo quieres que se sienta tu landing]

Requisitos de diseño:
- Una sola página, pensada para celular pero que se vea bien en desktop.
- Las secciones en este orden: encabezado con la promesa y el botón; el
  problema; qué ofrezco; por qué yo; una última llamada a la acción; el
  pie con el contacto.
- El botón de la única acción se repite arriba y abajo, y es la única
  cápsula rellena de toda la página.
- No inventes datos: si algo no te lo di, déjalo marcado como un hueco y
  avísame cuáles faltan.
- No pongas fotos de personas ni logos que no te haya entregado. Donde
  iría una imagen, deja el espacio marcado.
- Sin degradados en botones ni en fondos. Emojis solo si son dato, nunca de adorno.

Crea un formulario de contacto para que los potenciales clientes me
envíen una nota. Usa los datos comunes de un formulario de contacto.

Solo esto: [el cambio]. No toques nada más de la pantalla.

Revisa este diseño contra el sistema que te di y dime qué reglas está
rompiendo. No lo corrijas todavía: primero quiero ver la lista.

Muéstrame cómo se ve esta pantalla el primer día, sin ningún dato
guardado.

Muéstrame cómo se ve con el texto más largo que podría entrar ahí.
Quiero saber si se rompe antes de que se rompa con un usuario.

Dame dos versiones del encabezado: una sobria y una más directa.
No cambies nada más de la página.