Tutorial: Tarea 4: Desarrollar una web completa a partir de un diseño previo

Visión General

¿Qué vas a conseguir con este tutorial?

El reto: Desarrollar una web completa a partir de un diseño previo con todo el contenido y brandwriting definidos: generar el código HTML/CSS/JS o las instrucciones para el CMS elegido.

La solución: ChatGPT Business o Claude Business generan el código de cada sección a partir de las especificaciones de diseño, el design system y el contenido. También pueden generar las instrucciones de configuración para el CMS elegido (WordPress, Webflow, Shopify...) y el código de los componentes personalizados necesarios.

📈 Impacto esperado: Reduce el tiempo de desarrollo de una web de 5-15 días a 2-5 días, con código limpio, semántico y optimizado para SEO desde el primer momento.

💡 Alternativa: ChatGPT Business puede usarse como alternativa si no tienes acceso a Manus AI.

Contexto

¿En qué situación se aplica este tutorial?

Con el diseño y el contenido completamente definidos, el desarrollo web se convierte en un proceso de implementación. La IA puede generar código limpio y semántico para cada sección, acelerando significativamente el trabajo del desarrollador y reduciendo errores de implementación.

Preparación

Datos que necesitas tener listos

Diseño aprobado en Figma o similar (todas las páginas y estados de componentes), especificaciones técnicas del proyecto (CMS, hosting, integraciones), assets de diseño exportados (imágenes, iconos, fuentes).

Paso 01

Paso 1: Abre Manus AI y crea un nuevo chat o proyecto.

Paso 02

Paso 2: Prepara los datos necesarios: Diseño aprobado en Fig...

Paso 2: Prepara los datos necesarios: Diseño aprobado en Figma o similar (todas las páginas y estados de componentes),.

Paso 03

Paso 3: Copia el prompt y ajusta los campos entre corchetes...

Paso 3: Copia el prompt y ajusta los campos entre corchetes con tu información real.

Paso 04

Paso 4: Revisa el resultado con criterio directivo antes de...

Paso 4: Revisa el resultado con criterio directivo antes de tomar decisiones.

Prompt

Prompt completo listo para usar

Copia este prompt, sustituye los valores entre corchetes [VALOR] por los datos reales de tu organización y ejecútalo en Manus AI.

Prompt — Tarea 4: Desarrollar una web completa a partir de un diseño previo

Actúa como desarrollador web senior especializado en [tecnología: WordPress con ACF / Webflow / React + Tailwind / HTML+CSS+JS vanilla]. Tienes el diseño completo y el contenido de la web de [empresa]. DOCUMENTOS A ADJUNTAR: - Especificaciones de diseño (Figma, PDF o descripción): [adjunta] - Design system (colores, tipografía, espaciado como tokens CSS): [adjunta] - Contenido y brandwriting: [adjunta] - Tecnología objetivo: [WordPress con ACF / Webflow / HTML+CSS+JS / React + Tailwind] DESARROLLA PARA LA PÁGINA [nombre de página]: 1. ESTRUCTURA HTML semántica (con roles ARIA y atributos de accesibilidad) 2. CSS siguiendo el design system (variables CSS para tokens, sin !important, mobile-first) 3. JAVASCRIPT para las interacciones especificadas (menú móvil, animaciones de scroll, formularios con validación) 4. Si es WordPress: estructura de campos ACF, configuración de bloques Gutenberg y funciones PHP necesarias 5. OPTIMIZACIÓN: metaetiquetas SEO (title, description, OG tags), atributos alt descriptivos, estructura de headings (H1 único), schema markup básico (Organization, WebPage) 6. RESPONSIVE: media queries para los breakpoints del design system, con prioridad mobile-first 7. PERFORMANCE: lazy loading de imágenes, preload de fuentes críticas, minimización de render-blocking 8. CHECKLIST DE QA: 15 puntos a verificar antes de entregar al cliente (funcionalidad, accesibilidad, SEO, performance, cross-browser) Empresa: [nombre]. Idioma del código: español para comentarios, inglés para nombres de variables/clases. RESTRICCIONES Y CONDICIONES: - El código generado por IA debe revisarse y testearse antes de publicar; verifica siempre la accesibilidad (WCAG 2.1), la seguridad y el rendimiento. - No entregues la web sin pruebas de rendimiento (PageSpeed >85) y de accesibilidad (WCAG AA). - No implementes cambios de diseño en producción sin revisión del cliente.

⚠️ Advertencia: El código generado por IA debe revisarse y testearse antes de publicar. Verifica siempre la accesibilidad (WCAG 2.1), la seguridad (especialmente en formularios) y el rendimiento (Core Web Vitals).

Siguiente paso

¿Qué hacer ahora?

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

Tutorial relacionado · Manus AI

Explorar más tutoriales de Manus AI

Descubre otros casos de uso de Manus AI para directivos en funciones de Operaciones.

Biblioteca completa

Ver todos los tutoriales

Explora los tutoriales del programa organizados por herramienta, función y nivel de dificultad.

💡 Para sacarle más partido: Una vez que hayas usado este tutorial en una situación real, guarda el prompt con las variables ya rellenadas para tu organización. La próxima vez que necesites resolver un reto similar, tendrás el prompt listo y el proceso será mucho más rápido.

Tarea 4: Desarrollar una web completa a partir de un diseño previo con Manus AI