MotionSites Prompt Capture
Objetivo
Cuando el usuario presente una solicitud de sitio web/diseño UI, accede a motionsites.ai para encontrar la plantilla de prompt más adecuada y ofrecer un plan de optimización adaptado al proyecto del usuario. El resultado de esta habilidad es «prompt recomendado + plan de optimización», no escribir código directamente.
Flujo de trabajo
1. Extraer requisitos
Primero, confirma la información clave. Si falta algún dato, continúa con valores predeterminados razonables. No preguntes repetidamente:
- Tipo de sitio: página de aterrizaje / sitio SaaS / portafolio / sitio de agencia / sección Hero / página de comercio electrónico, etc.
- Estilo visual: oscuro, vidrio esmerilado, degradado, minimalista, 3D, fondo de partículas, etc.
- Necesidades de animación: animaciones de desplazamiento, parallax, desplazamiento suave, interacciones 3D, etc.
- Estructura del contenido: qué bloques se necesitan (navegación, Hero, características, precios, pie de página, etc.)
- Pila tecnológica: por defecto React/Next.js + Tailwind + shadcn/ui (entorno de extensión Build Web Apps); si el usuario especifica otra pila, se usa esa.
2. Acceder a motionsites.ai
- Prioriza usar el navegador integrado en la aplicación (si el usuario ya lo tiene abierto o está disponible) para abrir https://motionsites.ai/ y navegar por las categorías (SaaS, Agencia, Portafolio, Páginas de aterrizaje, Secciones Hero, etc.).
- Si el navegador no está disponible, usa open_page o búsqueda web para obtener información de la página. Ten en cuenta que el sitio es una SPA renderizada con JS, por lo que la captura estática puede no obtener el contenido de las categorías. En ese caso, indica que usar el navegador es más preciso.
- Filtra por las tres dimensiones «tipo + estilo + animación» y encuentra de 1 a 3 prompts que mejor coincidan.
3. Entregar el prompt recomendado
- Muestra el texto completo del prompt seleccionado, sin modificaciones ni traducciones.
- Explica la razón de cada prompt (por qué se ajusta a la solicitud del usuario).
- Si no encuentras una coincidencia exacta, elige la más cercana y señala las diferencias explícitamente; nunca inventes un prompt que no exista.
4. Proporcionar un plan de optimización
Enumera los puntos de optimización uno por uno, según el proyecto real del usuario:
- Adaptación a la pila tecnológica: El prompt estándar está pensado para Lovable/Bolt/Cursor/Claude; explica cómo migrarlo a la pila del usuario (por defecto React + Tailwind + shadcn/ui; división de componentes, reutilización de tokens de diseño).
- Implementación de animaciones: en motionsites se usan a menudo GSAP ScrollTrigger + Lenis para desplazamiento suave; proporciona las decisiones clave para la implementación (rendimiento, degradación, accesibilidad, prefers-reduced-motion).
- Activos visuales: si se necesitan imágenes Hero, texturas o iconos, indica que se pueden generar con imagegen o importar desde los recursos requeridos por el prompt.
- Método de verificación: una vez implementado, usa playwright / frontend-testing-debugging para realizar pruebas en el navegador (diseño responsive, animaciones, errores en consola).
- Advertencias de riesgo: señala las partes del prompt que podrían no ser adecuadas para el proyecto actual (dependencias, sobrecarga de rendimiento, contenido de relleno).
5. Cierre
Finalmente, pregunta al usuario si desea comenzar la implementación según el plan de optimización; no escribas código hasta que el usuario lo confirme.
Ejemplos de activación
- «Necesito que crees un sitio web y que uses diseño UI»
- «Quiero hacer una landing page SaaS, búscame prompts en MotionSites»
- «Ayúdame a hacer un sitio de portafolio con animación en el Hero, dame primero el plan»
Consideraciones
- No te saltes el paso de «buscar el prompt» para escribir código directamente.
- Mantén el texto original del prompt sin cambios; el plan de optimización se adapta al proyecto del usuario. Por defecto, no modifiques el prompt en sí, a menos que el usuario lo solicite.
- Prioriza navegar realmente por motionsites.ai con el navegador antes de seleccionar, para evitar adivinar el contenido del sitio de memoria.