源自 GitHub前端界面细节与动效调优
本能力专注于前端开发中的“质感工程（Design Engineering）”。当界面整体布局完成但视觉与交互体验欠佳（如数字跳动抖动、点击反馈生硬、嵌套圆角突兀、动效卡顿或图标粗细不匹配）时，它会依据同心圆角、光学对齐、等宽数字、可中断微动效、44px 点击热区等 19 项细节规范进行系统性排查，在不引入额外样式框架的前提下，输出结构化的缺陷清单和直接可用的代码重构方案。
它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。
常见场景
它能帮你做什么？
01
02
03
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“审查这个 React + Tailwind 编写的 Card 组件，检查它的嵌套圆角和点击缩放动效是否存在瑕疵”
“优化当前倒计时时钟组件的 CSS，消除数字变化时的布局跳动并提升 macOS 字体渲染质感”
“使用 full 模式审查这组导航栏图标及悬停微动效代码，确保图标笔画与文字字重保持光学平衡”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
