Guía del flujo de trabajo para el diseño de movimiento en UI
Desglose detallado del flujo de trabajo para crear videos de diseño de movimiento en UI con Claude Opus 5.5, que sirve como un conjunto completo de instrucciones/prompts.
El resultado creativo
Prompt de referencia
Una referencia editada a partir del ejemplo, que puedes adaptar a tu tema. La publicación del autor está en el panel de fuentes.
“Build a 14-second UI motion piece from eight to twelve states such as a button, loading indicator, toggle, chart, and command palette. Choose commercially usable music near 120 BPM and measure its beats with NumPy. Write one 1440×1440 HTML scene whose styles are calculated from seek(t), using closed-form spring motion rather than timers or autonomous CSS transitions. Place interface sound effects according to their measured peaks. Preview a frame at each beat to correct the timing, then render four subframes per output frame with Playwright and blend them in ffmpeg for a 60 fps film.”
Cómo crear en PagePop
Elige un asistente, describe lo que necesitas y crea con PagePop. Ajusta el trabajo mediante la conversación y luego descárgalo.
Elige el asistente adecuado
Explora asistentes especializados en distintos sectores o encuentra inspiración en la amplia colección de ejemplos.
Describe lo que necesitas
Indica si necesitas imágenes, vídeos, presentaciones PPT, documentos o páginas web. Agrega imágenes o materiales de referencia cuando los necesites.
PagePop elige modelos y crea
PagePop selecciona los modelos y herramientas adecuados para tu objetivo y crea el trabajo.
Ajusta y descarga
Sigue ajustando el contenido y el aspecto en la misma conversación. Descarga el trabajo cuando estés satisfecho.
Empieza con tus propias palabras
Usa este prompt real como punto de partida, cambia lo que quieras y deja que PagePop elija cómo crearlo.
Preguntas frecuentes
¿Cómo adapto este ejemplo de Vídeo a mi proyecto?
Usa el prompt de referencia de «Guía del flujo de trabajo para el diseño de movimiento en UI» como punto de partida. Cambia el tema, el estilo y la proporción, y agrega tus imágenes o materiales de referencia. Conserva la estructura que te interese, elimina los requisitos que no correspondan y ajusta el resultado.
¿Es gratis explorar y copiar prompts?
Explorar la colección y copiar prompts es 100% gratis. También puedes usar PagePop gratis. Consulta los precios y las reglas de créditos en la página de precios.
¿Qué es PagePop y qué puede hacer?
PagePop es una plataforma de creación con IA conversacional. Describe lo que necesitas en lenguaje natural para crear imágenes, vídeos, presentaciones, documentos y páginas web. PagePop selecciona los modelos y herramientas adecuados y permite seguir ajustando el trabajo en la misma conversación.
Más ejemplos reales de prompts
Prompt de animación para diseño de movimiento UI
“Ask for eight to twelve UI states, a monochrome or single-accent palette, and a usable track near 120 BPM. Make a 14-second, 1440×1440 loop where one shape becomes a button, loader, player, slider, toggle, tabs, graph,…”
Película de discurso con tipografía cinética
“Stage Build the Floor as a 20-second square typographic film in a self-contained SVG or Canvas HTML file. Use the supplied original miniature speech, with no attribution to a real person, and make its words physically c…”
Escena oceánica con WebGPU en HTML
“Build an ocean scene that runs in the browser as a single HTML file using WebGPU. Drive the sea surface with FFT waves, add whitecaps, and place it under a realistic sky. Include WASD movement so the viewer can explore…”