Ideal para
- Empezar desde un prompt estructurado y reutilizable en lugar de un chat en blanco.
- Adaptar el prompt a tus propios datos manteniendo intacta la intención original.
- Flujos de trabajo relacionados con Software Development, Design & Art.
Generador de keyframes de animación CSS
Rellenar este promptGenera animaciones CSS keyframe personalizadas para elementos de la interfaz.
Plantilla de prompt
Create CSS `@keyframes` and the corresponding utility class for a {{Animation Style: Fade, Slide, Bounce, Spin, Pulse}} animation. The animation should have a duration of {{Duration in Seconds:1-10}} seconds, run {{Iteration Count: Infinite, 1, 2, 3}} times, and use a {{Timing Function: ease-in-out, linear, ease-in, cubic-bezier}}. Provide the code for animating a {{Element: e.g. Puco UI call-to-action button}}.
Guía del prompt
Cómo usarlo
- Copia la plantilla de prompt completa.
- Sustituye cada variable por tu propio contexto o elige una de las opciones sugeridas.
- Pega el prompt completado en ChatGPT, Claude, Gemini u otro asistente de IA.
Variables de este prompt
Animation Style
Fade, Slide, Bounce, Spin, Pulse
Duration in Seconds
1-10
Iteration Count
Infinite, 1, 2, 3
Timing Function
ease-in-out, linear, ease-in, cubic-bezier
Element
e.g. Puco UI call-to-action button
Ejemplo de partida
Create CSS `@keyframes` and the corresponding utility class for a Fade animation. The animation should have a duration of 1-10 seconds, run Infinite times, and use a ease-in-out. Provide the code for animating a e.g. Puco UI call-to-action button.
Cómo funcionan las variables
Sintaxis de variables
Las variables van entre {{ y }} y siguen este patrón:
{{variable name: option1, option2, option3 }}
Variables predefinidas
Una selección puede hacer referencia a una lista de variables predefinida usando corchetes. Aparecen en [naranja] y proporcionan valores de uso común como colores, tonos o idiomas.
{{Tone: [tones] }}
Listas de selección personalizadas
También puedes proporcionar una lista de opciones en línea, separadas por comas.
{{Format: bullet points, paragraphs, numbered list }}
Consejo: ¡no necesitas la app PUCO para usar estos prompts! Solo copia la plantilla y sustituye cada sección {{…}} por tu propio texto directamente en ChatGPT, Claude, Gemini o cualquier otro asistente de IA.