Verdent Docs
Funciones principales

Design Mode

Usa un resumen de texto para elegir primero una dirección visual y luego construir una app funcional a partir de esa dirección aprobada.

Design Mode es la ruta de creación design-first de Verdent para nuevas apps con una interfaz visible. Úsala cuando tienes una idea en palabras, pero aún no cuentas con un diseño terminado, una captura de pantalla, una guía de estilo o un plan de páginas completo.

En lugar de pasar directamente al código, Design Mode te ayuda a decidir primero cómo debe verse y sentirse el producto, y luego convierte la dirección aprobada en una app funcional.

Cuándo usar Design Mode

Usa Design Mode cuando quieras crear una nueva interfaz de producto a partir de un resumen de texto, como:

  • una app full-stack
  • un frontend web o una landing page
  • una app móvil
  • una idea de producto de 0 a 1 donde la dirección visual aún no está decidida

Cuándo omitirlo

Omite Design Mode cuando:

  • el proyecto es una utilidad trivial de una sola pantalla, como un formulario básico o una app de juguete muy pequeña
  • ya tienes un resumen de diseño completo con una dirección de estilo concreta, una paleta, un sistema tipográfico y una lista de páginas o pantallas
  • ya tienes archivos de diseño, mockups, capturas de pantalla o una guía de estilo que se debe seguir directamente
  • quieres saltarte explícitamente el diseño e ir directo al código

Si tu resumen ya es lo suficientemente específico, Verdent puede usarlo como la dirección elegida y avanzar directamente hacia la planificación de páginas y el trabajo de construcción.

Cómo funciona Design Mode

Describe el producto

Comienza con un resumen en lenguaje sencillo: qué quieres construir, para quién es, qué debe hacer y cualquier referencia de estilo o ambiente que ya tengas.

Elige una dirección visual

Verdent explora direcciones de diseño distintas para que puedas elegir el aspecto y la sensación antes de escribir código.

Planifica las páginas o pantallas

Para productos de varias páginas, full-stack o más complejos, Verdent convierte la dirección elegida en un plan de páginas o pantallas y en una especificación de producto en lenguaje sencillo.

Construye a partir de la dirección aprobada

Una vez que la dirección está clara, Verdent restaura el diseño en una app funcional y mantiene las decisiones posteriores ligadas al diseño y la especificación aprobados.

Previsualiza y continúa

Revisa la app en la vista previa y luego continúa con el trabajo de backend, las pruebas o más iteraciones según lo necesites.

Cómo usar Design Mode en Verdent Desktop

Cuando comienzas un nuevo producto en Manager, describe la app que quieres construir. Si aún no tienes una dirección de diseño concreta, abre Design Mode y Verdent te ayudará a elegir una dirección visual antes de construir.

Puedes mantener el resumen simple, pero hazlo lo suficientemente específico para guiar las decisiones de diseño:

  • qué es el producto
  • quién lo usará
  • la tarea principal con la que debe ayudar
  • las páginas, pantallas o estados que ya sabes que necesitas

Ejemplos de resúmenes

Landing page

Construye una landing page para una app de finanzas personales dirigida a freelancers. Debe sentirse tranquila, confiable y editorial, con un hero, secciones de funciones, precios y preguntas frecuentes.

App de varias pantallas

Crea un rastreador de hábitos mobile-first para personas que se recuperan del agotamiento. Debe sentirse suave y táctil, con onboarding, registro diario, vista de progreso y configuración.

Consejos para obtener mejores resultados

  • Indica para quién es el producto.
  • Describe la sensación que quieres, no solo la lista de funciones.
  • Menciona las páginas o pantallas conocidas si las tienes.
  • Comparte referencias o restricciones desde el principio si son importantes.
  • Indica qué evitar si ya sabes qué se sentiría fuera de lugar.
  • Para productos complejos, ten en cuenta que confirmarás la lista de páginas y la especificación de producto antes de que continúe la construcción completa.