Saltar al contenido
motionframe

Buscar piezas

Categorías

Editor de código con IA

Prompts de Motionframe en Cursor

Con Cursor la pieza entra directamente en tu proyecto. Es la opción natural si ya tienes una web en marcha y quieres añadir una sección o un efecto.

Paso a paso

Cómo usar prompts de diseño web en Cursor

  1. Paso 1: Abre tu proyecto

    La carpeta de tu web, con el servidor de desarrollo funcionando para ver los cambios al momento.
  2. Paso 2: Abre el chat del agente

    Antes del prompt, escribe una línea con dónde debe ir la pieza: «Crea esta sección como componente en components/Hero.tsx y úsala en la home».
  3. Paso 3: Pega el prompt debajo

    El prompt describe un único HTML; el agente lo adaptará a tu stack (React, Astro, Vue…). Si prefieres empezar por el original, pide un demo.html aparte.
  4. Paso 4: Revisa los cambios

    Lee lo que propone antes de aceptarlo, sobre todo si instala dependencias. Comprueba que usa las versiones de las librerías que indica el prompt.
  5. Paso 5: Pruébalo en móvil

    Con las herramientas de desarrollo del navegador y, mejor aún, en un móvil de verdad.

Trucos que ahorran tiempo

  • Si tu proyecto ya tiene sistema de diseño, dile que use tus colores y tipografías en lugar de los del prompt.
  • Para efectos WebGL, pide que el componente limpie la escena al desmontarse para no dejar bucles vivos.

Preguntas frecuentes

Preguntas sobre Cursor

¿Funcionan los prompts de Motionframe en Cursor?

Están escritos para poder pegarse en Cursor tal cual. El prompt pide un único archivo HTML y trae todos los valores (colores, tiempos, textos) para que la IA no tenga que adivinarlos.

¿Uso el prompt Completo o el Lite en Cursor?

Recomendamos empezar con el Completo. Cursor trabaja sin límite práctico de texto y dentro de tu código, así que el Completo le da todos los valores exactos para no tener que inventar.

¿Habéis probado las piezas en Cursor?

Todavía no. Lo que probamos pieza a pieza es el prompt en Claude Sonnet 5.5 (la prueba en frío de cada ficha). No decimos «probado en Cursor» hasta haberlo probado; cuando lo hagamos, lo publicaremos con fecha.

¿Vas a publicar lo que te devuelva? En la guía de uso te contamos cómo iterar, personalizar y subirlo a Vercel, Netlify u Hostinger.

Empieza hoy

Elige una pieza y pégala en Cursor

Las gratis van enteras y sin cuenta, con el personalizador que mete tu marca y tus colores en el prompt. Con Pro tienes todo el catálogo.