·ui-enhance-animate
*

ui-enhance-animate

全面升级和完善现有网站的 UI 设计 - 改进布局、排版、间距、深度、视觉层次结构和组件细化 - 同时保留网站现有的调色板。还使用元素进入视口时触发的 Framer Motion(或 CSS,如果是纯 HTML)添加平滑、交错的模糊 + 向上滑动显示动画。每当用户想要改进、现代化、润色或动画现有网站或 React/HTML 页面时,请使用此技能。即使用户只提到“让它看起来更好”、“动画化”、“改进设计”、“升级用户界面”、“使其更现代”或“添加滚动动画”时也会触发——该技能可以处理所有这些,而不仅仅是动画。

14安装·1热度·@zaaakher

安装

$npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate

如何安装 ui-enhance-animate

通过命令行快速安装 ui-enhance-animate AI 技能到你的开发环境

  1. 打开终端: 打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 运行安装命令: 复制并运行以下命令:npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate
  3. 验证安装: 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

来源:zaaakher/agent-skills。

SKILL.md

查看原文

This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.

Before writing a single line of code, do a thorough read of the existing code. Extract and note:

Apply ALL of the following improvements that are relevant to the site. Be thorough — don't skip sections because they "look okay". Every part of the site should be elevated.

全面升级和完善现有网站的 UI 设计 - 改进布局、排版、间距、深度、视觉层次结构和组件细化 - 同时保留网站现有的调色板。还使用元素进入视口时触发的 Framer Motion(或 CSS,如果是纯 HTML)添加平滑、交错的模糊 + 向上滑动显示动画。每当用户想要改进、现代化、润色或动画现有网站或 React/HTML 页面时,请使用此技能。即使用户只提到“让它看起来更好”、“动画化”、“改进设计”、“升级用户界面”、“使其更现代”或“添加滚动动画”时也会触发——该技能可以处理所有这些,而不仅仅是动画。 来源:zaaakher/agent-skills。

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令
npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate
分类
*创意媒体
认证
收录时间
2026-02-28
更新时间
2026-03-11

Browse more skills from zaaakher/agent-skills

快速解答

什么是 ui-enhance-animate?

全面升级和完善现有网站的 UI 设计 - 改进布局、排版、间距、深度、视觉层次结构和组件细化 - 同时保留网站现有的调色板。还使用元素进入视口时触发的 Framer Motion(或 CSS,如果是纯 HTML)添加平滑、交错的模糊 + 向上滑动显示动画。每当用户想要改进、现代化、润色或动画现有网站或 React/HTML 页面时,请使用此技能。即使用户只提到“让它看起来更好”、“动画化”、“改进设计”、“升级用户界面”、“使其更现代”或“添加滚动动画”时也会触发——该技能可以处理所有这些,而不仅仅是动画。 来源:zaaakher/agent-skills。

如何安装 ui-enhance-animate?

打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等) 复制并运行以下命令:npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

这个 Skill 的源码在哪?

https://github.com/zaaakher/agent-skills

详情

分类
*创意媒体
来源
skills.sh
收录时间
2026-02-28