Ideal para
- Começar a partir de um prompt estruturado e reutilizável em vez de um chat em branco.
- Adaptar o prompt aos seus próprios dados, mantendo intacta a intenção original.
- Fluxos de trabalho relacionados com Software Development, Design & Art.
Gerador de keyframes CSS para animações
Preencher este promptGere animações CSS keyframe personalizadas para elementos de UI.
Modelo 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}}.
Guia do prompt
Como usar
- Copie o modelo de prompt completo.
- Substitua cada variável pelo seu próprio contexto ou escolha uma das opções sugeridas.
- Cole o prompt concluído no ChatGPT, Claude, Gemini ou outro assistente de IA.
Variáveis neste 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
Exemplo de ponto 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.
Como funcionam as variáveis
Sintaxe das variáveis
As variáveis ficam entre {{ e }} e seguem este padrão:
{{variable name: option1, option2, option3 }}
Variáveis predefinidas
Uma seleção pode fazer referência a uma lista de variáveis predefinida usando colchetes. Aparecem em [laranja] e fornecem valores comuns, como cores, tons ou idiomas.
{{Tone: [tones] }}
Listas de seleção personalizadas
Também pode fornecer uma lista de opções em linha, separadas por vírgulas.
{{Format: bullet points, paragraphs, numbered list }}
Dica: não precisa da app PUCO para usar estes prompts! Basta copiar o modelo e substituir cada secção {{…}} pelo seu próprio texto diretamente no ChatGPT, Claude, Gemini ou qualquer outro assistente de IA.