适用场景
- 以结构化、可复用的提示词为起点，而非空白对话框。
- 根据自己的需求调整提示词，同时保持原始意图不变。
- 与Software Development, Design & Art相关的工作流。
CSS 动画关键帧生成器
填写此提示词为 UI 元素生成自定义 CSS 关键帧动画。
提示词模板
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}}.
使用指南
使用方法
- 复制完整的提示词模板。
- 将每个变量替换为自己的内容，或从建议选项中选择。
- 将完成的提示词粘贴到 ChatGPT、Claude、Gemini 或其他 AI 助手中。
此提示词中的变量
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
示例起点
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.
变量使用说明
变量语法
变量被 {{ 和 }} 包裹，遵循以下格式：
{{variable name: option1, option2, option3 }}
预定义变量
选项可以通过方括号引用预定义变量列表。这些选项以[橙色]显示，提供颜色、语气或语言等常用值。
{{Tone: [tones] }}
自定义选择列表
也可以提供以逗号分隔的内联选项列表。
{{Format: bullet points, paragraphs, numbered list }}
提示：使用这些提示词无需 PUCO 应用！只需复制模板，直接在 ChatGPT、Claude、Gemini 或任何其他 AI 助手中将每个 {{…}} 部分替换为自己的文本。