Tarea 4: Desarrollar web con Manus

Antes de empezar

Lo que necesitas para completar este tutorial

Lo que conseguiras al terminar

Si sigues estos pasos, en 30-60 minutos tendras:

✓ Plan técnico detallado y estimación de esfuerzo
✓ Estructura de archivos y componentes front-end listos
✓ Checklist de pruebas, accesibilidad y despliegue

Antes de empezar, asegurate de tener lo siguiente:

Obligatorio Cuenta activa en Manus con permisos para generar y descargar artefactos de proyecto.

Obligatorio Diseño previo accesible (Figma/Sketch/URL) y especificación de objetivos comerciales.

Recomendado Preferencia tecnológica o stack (React/Vue/Next.js) y acceso a repositorio Git.

Recomendado Lista de contenidos y recursos de marca (tipografías, paleta, iconografía).

Transferencia internacional de datos: Manus procesa datos en servidores externos. Sin acuerdo de procesamiento de datos (DPA) firmado, no introduzcas datos personales, financieros confidenciales ni datos especialmente protegidos. Verifica con tu departamento legal o IT antes de usar datos reales de tu empresa.

El caso

Navegalia Solutions SL, sector software industrial — el problema real

Navegalia recibe un diseño de producto para su nueva plataforma B2B pero no tiene equipo front-end disponible inmediatamente. Necesitan producir una versión inicial para demostraciones comerciales en 2 semanas.

Con Manus y el prompt de este tutorial, puede resolver este reto en 30-60 minutos — sin conocimientos tecnicos previos.

Situacion real
Datos + contexto

→

Manus
Prompt estructurado

→

Output ejecutivo
Listo para usar

Por que funciona: Manus automatiza tareas repetitivas de conversión de diseño a código y genera artefactos técnicos estándar listos para integración. Su salida incluye instrucciones claras y archivos esqueleto que permiten a equipos de producto escalar rápidamente sin rehacer decisiones de implementación.

Contexto

Cuando usar este tutorial

✓ Usalo cuando...	× No lo uses cuando...
Necesitas un prototipo funcional basado en diseño para validar con clientes o inversores Dispones de un diseño definitivo y buscas acelerar la entrega front-end Quieres estandarizar componentes y accesibilidad en la primera versión	El proyecto requiere desarrollos nativos complejos o integración profunda con sistemas legados ya existentes El diseño es conceptual y aún necesita validación UX antes de convertirlo a código Buscas personalizaciones visuales avanzadas que dependen de animaciones muy específicas no soportadas por la herramienta

Paso 01

Preparar los activos y objetivos

Reúne el diseño, requisitos funcionales y objetivos comerciales antes de iniciar Manus. Esto reduce iteraciones y asegura que la salida técnica esté alineada con prioridades estratégicas.

1
Validar el diseño final Asegúrate de que el archivo de Figma/Sketch o la URL de diseño esté actualizado y documentado; identifica variantes de pantalla y estados interactivos prioritarios.
2
Definir objetivos de negocio Especifica el propósito de la web (demo comercial, MVP para clientes, portal interno) y métricas clave (tiempo hasta demo, coste objetivo, métricas de conversión).
3
Recopilar recursos de marca Reúne paleta, tipografías, imágenes y contenido; indica si existen restricciones legales para el uso de recursos.

Checkpoint: Dispones de un enlace o archivo de diseño final, objetivos claros y recursos de marca listos para cargar en Manus.

Paso 02

Configurar el proyecto en Manus

Crea el proyecto en Manus con la configuración técnica adecuada. Selecciona el stack preferido y define las páginas y componentes clave que deseas generar.

1
Crear nuevo proyecto En Manus, inicia un proyecto nuevo e importa el diseño mediante la URL o el archivo; nombra el proyecto con formato [NOMBRE_EMPRESA]-[NOMBRE_PROYECTO] para trazabilidad.
2
Seleccionar stack y convenciones Indica si prefieres frameworks como React, Next.js o Vue; define convención de rutas, tipo de hojas de estilo y sistema de componentes.
3
Configurar accesibilidad y rendimiento Activa reglas de accesibilidad automáticas y establece budget de rendimiento (peso máximo por página, LCP objetivo).

Checkpoint: Proyecto creado en Manus con diseño importado, stack definido y reglas de accesibilidad/performance activadas.

Paso 03

Ejecutar el prompt principal

Este es el prompt central del tutorial. Cópialo completo, rellena las variables entre corchetes con los datos de tu empresa o situación, y envíalo.

1
Copia el prompt completo Selecciona todo el texto del prompt y cópialo. No modifiques la estructura — está diseñado para obtener el output más útil posible.
2
Rellena las variables entre corchetes Sustituye cada [VARIABLE] con información real de tu empresa. Cuanto más específico seas, mejor será el output.
3
Envía el prompt y espera la respuesta Pega el prompt en Manus o en el entorno de chat recomendado y envíalo. El modelo puede tardar entre 10 y 60 segundos dependiendo de la complejidad.

Variables del prompt — sustituye cada [VARIABLE] con datos reales

[NOMBRE_EMPRESA]Nombre de la empresa o proyecto que solicita la web

[DISEÑO_URL]Enlace al archivo de diseño (Figma/Sketch) o URL donde está el prototipo

[OBJETIVO_NEGOCIO]Objetivo principal de la web (p. ej. demo comercial, captación leads, portal clientes)

Prompt principal — Desarrollar web con Manus AI Actúa como un director técnico senior especializado en transformación de diseños a producto web. Tienes que generar para [NOMBRE_EMPRESA] un entregable ejecutivo y técnico que permita que el equipo de desarrollo implemente una web completa a partir del diseño en [DISEÑO_URL]. Objetivo: [OBJETIVO_NEGOCIO]. Entrega un documento estructurado con las siguientes secciones: 1) Resumen ejecutivo (2-3 párrafos) que explique el alcance y riesgos; 2) Lista de páginas y rutas prioritarias con prioridades y estados (p. ej. inicio, ficha producto, checkout); 3) Estructura de carpetas y archivos recomendada para el stack indicado; 4) Componentes reutilizables con props y ejemplos de uso (mínimo 8 componentes clave); 5) Fragmentos de código ejemplo (HTML/JSX y estilos) para header, hero, formulario y tarjeta de producto; 6) Requisitos de accesibilidad y checklist de pruebas (WCAG relevantes); 7) Plan de pruebas y QA para staging; 8) Estimación de tiempo por sprint (horas y roles); 9) Riesgos técnicos y mitigaciones; 10) Instrucciones de despliegue y configuración mínima de CI/CD; 11) Estimación de coste y recursos necesarios para la primera entrega (2 semanas). Prioriza claridad ejecutiva, listas y tablas sencillas. Si falta información, indica exactamente qué datos faltan y cómo afectarán las estimaciones. Mantén el lenguaje ejecutivo y técnico en equilibrio, y proporciona un resumen de 6 bullets para presentar al Comité de Dirección.

Checkpoint: El modelo ha respondido con un output estructurado que incluye las secciones solicitadas en el prompt.

Paso 04

Iterar y preparar despliegue

Refina la salida técnica, valida con el equipo y prepara el repositorio para despliegue. Prioriza correcciones que afecten a experiencia de usuario y cumplimiento.

1
Revisar componentes generados Valida que los componentes cumplan la guía de estilo y corrige nombres o props que no se ajusten al estándar interno.
2
Configurar CI/CD y pruebas Crea pipeline de integración con pasos de lint, test unitarios y pruebas de accesibilidad; automatiza el despliegue a un entorno de staging para la demo.

Checkpoint: Repositorio preparado con código inicial, pipeline de CI/CD configurada y entorno de staging listo para la presentación.

Iteracion

Prompts para refinar el output

Estos son los ajustes mas frecuentes que se piden despues del primer output. Copialos directamente en el chat:

Hacer el output más específico

cuando el output es demasiado genérico. "Ajusta el documento anterior para el caso concreto de [NOMBRE_EMPRESA]: reemplaza estimaciones genéricas por horas por rol (desarrollador front 1, desarrollador back 0.5, diseñador 0.5), detalla dependencias externas y añade ejemplos concretos de nombres de carpetas y componentes."

Cambiar el nivel de detalle

cuando necesitas más o menos profundidad. "Convierte la sección de 'componentes reutilizables' en una especificación técnica completa: añade props, tipos, valores por defecto y tests unitarios sugeridos. Reduce o expande según necesidad."

Adaptar el tono

cuando el tono no es el adecuado para tu audiencia. "Reescribe el resumen ejecutivo en tono más conciso y orientado al Comité de Dirección, centrado en beneficios, costes y riesgos en 5 bullets claros."

Versión ejecutiva resumida

para compartir con el Comité de Dirección. "Crea una versión ejecutiva de 1 página con título, objetivos, beneficios cuantificados, coste estimado y plan de entregas en 3 hitos."

Resultado

Que vas a obtener

Este es el tipo de output que genera Manus con el prompt de este tutorial. El contenido varia segun tu empresa y situacion, pero la estructura es siempre esta:

Ejemplo de output — Navegalia Solutions SL, sector software industrial

Estructura del output

El prompt genera un documento con secciones numeradas: resumen ejecutivo, lista de páginas, estructura de archivos, componentes, fragmentos de código, checklist de accesibilidad y plan de pruebas. Cada sección incluye recomendaciones prácticas y estimaciones técnicas.

Senales de un buen output

Resumen ejecutivo con objetivos y riesgos explícitos
Estructura de archivos y componentes con ejemplos de código
Estimaciones de tiempo por rol y checklist de pruebas claras
Instrucciones de despliegue e integración continuas reproducibles

Senal de que el output es bueno: El documento permite a un equipo técnico comenzar la implementación sin aclaraciones adicionales significativas.

Costes

Inversion y retorno

29$ Manus Pro / mes

30-120 min Por ejecucion del tutorial

∞ Reutilizaciones del prompt

ROI: El uso de Manus reduce el tiempo inicial de implementación y el número de iteraciones de diseño a código, acelerando la entrega al mercado. Para una demostración comercial, el ahorro en horas de desarrollo y coordinación suele justificar la suscripción en la primera semana de uso.

Errores frecuentes

Que hacer cuando algo no funciona

Sintoma	Causa probable	Solucion exacta
El código generado no compila	Inconsistencia entre la versión de librerías/sintaxis solicitada y la configuración predeterminada	Especifica el stack exacto y versiones en la configuración del proyecto y vuelve a generar; ajusta imports y ejecuta linters para localizar errores.
Componentes con estilos rotos en móviles	Falta de variantes responsivas en el diseño o reglas CSS globales que sobrescriben componentes	Incluye puntos de ruptura en la especificación, solicita variantes móviles en el prompt y revisa la cascada de estilos en el CSS generado.
Ausencia de atributos de accesibilidad	Reglas de accesibilidad no activadas en la configuración del proyecto	Activa las reglas WCAG en Manus y pide un checklist de correcciones; aplica ARIA y roles recomendados en los componentes clave.
Estimaciones de tiempo poco realistas	Variables de entrada insuficientes sobre complejidad y recursos disponibles	Proporciona información precisa sobre el número de pantallas, integraciones y experiencia del equipo; solicita una nueva estimación por rol.
Dependencias externas no documentadas	Olvido de indicar servicios o APIs necesarias en el prompt inicial	Lista todas las APIs, proveedores de autenticación y servicios externos; genera una nueva sección de integraciones con ejemplos de llamadas y esquemas de autenticación.

Modo avanzado

Como hacer este tutorial con Manus en modo avanzado

El modo agente de Manus permite ejecutar tareas encadenadas: importar diseño, generar código, ejecutar tests automáticos y preparar artefactos de despliegue. Para este caso, el agente puede automatizar validaciones y crear un repositorio inicial con commits y pipeline de CI.

Modo avanzado

Flujo de trabajo avanzado

1
Importar automáticamente el diseño desde [DISEÑO_URL] y mapear pantallas a rutas
2
Generar lista de componentes y crear archivos iniciales en un repo temporal
3
Ejecutar pruebas automáticas de accesibilidad y performance y ajustar sugerencias
4
Crear un commit inicial y preparar un pipeline básico de CI/CD en el repositorio indicado

Actúa como un agente técnico que ejecuta tareas secuenciales para convertir un diseño en un repositorio listo. Toma estas instrucciones: 1) Importa el diseño desde [DISEÑO_URL]; 2) Mapea las pantallas a rutas y genera un índice de prioridades; 3) Crea la estructura de carpetas para [NOMBRE_EMPRESA] con el stack recomendado (indica stack o usa React/Next.js por defecto); 4) Genera componentes principales (Header, Footer, Hero, Card, Form) con ejemplos de código y estilos modulares; 5) Ejecuta comprobaciones automáticas de accesibilidad y performance y anexa un informe con acciones concretas; 6) Crea un commit inicial con README que incluya instrucciones de despliegue y pipeline de CI básico. Si falta información sobre integraciones o autenticación, enumera los datos necesarios y pausa la ejecución. Entrega al final: enlace al repo de muestra, lista de tareas pendientes y estimación de esfuerzo por tarea.

Cuando usar el modo avanzado en este tutorial: Útil cuando se necesita una salida reproducible y entregable (repositorio, commits y pipeline) sin intervención manual continua, especialmente para equipos reducidos o demos urgentes.

Siguiente paso

Que hacer ahora?

Ahora que has completado este tutorial, hay dos caminos naturales:

Tutorial relacionado · Manus

Explorar mas tutoriales de Manus

Descubre otros casos de uso de Manus para directivos en diferentes funciones y sectores.

Biblioteca completa

Ver todos los tutoriales

Explora los tutoriales del programa organizados por herramienta, funcion y nivel de dificultad.

Para sacarle mas partido: Tras completar el tutorial, organiza una revisión de 60 minutos con desarrolladores y QA para validar supuestos técnicos y convertir el entregable en tickets de desarrollo priorizados.

Alternativa segura

Puedo hacer esto sin que mis datos salgan de la empresa?

Si. Este caso de uso trabaja con datos que, por su naturaleza confidencial, estrategica o regulada, son candidatos optimos para ejecutarse con un modelo de lenguaje open source desplegado en infraestructura propia (on-premises o nube privada). Con esta configuracion, ningun dato abandona nunca los servidores de tu organizacion y el modelo no puede ser entrenado con tu informacion.

Modelos recomendados

Llama 3.3 70B — Ideal para analisis de documentos largos y generacion de texto estructurado (contexto 128K tokens).

Mistral Large 2 — Excelente para extraccion de informacion y clasificacion con alta precision.

Qwen 2.5 72B — Especialmente potente para analisis de datos tabulares y financieros.

Plataformas de despliegue

Ollama — Para equipos pequenos o uso individual en hardware propio.

vLLM — Para entornos de produccion con multiples usuarios simultaneos.

LM Studio — Para pruebas y uso individual sin configuracion de servidor.

Infraestructura minima

Para un modelo de 70B parametros en produccion:

GPU: 2x NVIDIA A100 40GB o 4x RTX 4090.

RAM: 128GB minimo.

Alternativa cloud privada: AWS Private Cloud, Azure Government o Google Cloud Confidential Computing.

Garantia de privacidad: Con un modelo on-premises correctamente configurado, los datos nunca salen de tu red corporativa, el modelo no se entrena con tu informacion, no hay transferencia internacional de datos y el cumplimiento normativo es total incluso para datos del art. 9 RGPD.

Necesitas implementar esta solucion en tu organizacion?

La configuracion de modelos open source on-premises requiere un proveedor tecnico especializado. Agere puede ayudarte a desplegar esta solucion en tu infraestructura de forma segura, con garantias legales y sin que tus datos salgan nunca de tu organizacion.

Contactar con Agere Conocer Agere