源自 GitHub高端网页视觉与动效设计
该技能专门用于打破普通AI生成的廉价、模版化网页质感。它通过严格的负向规范禁用平庸字体（如Arial、Inter）、生硬阴影和三列死板网格，转而引入先锋设计工作室级别的排版规范。技能内置三大视觉调性（空灵暗色毛玻璃、杂志刊物奢华感、柔和结构主义）与前沿布局（非对称Bento、Z轴错落层叠、分栏杂志），自动构建具备物理双层嵌套结构（Double-Bezel）的卡片、胶囊悬浮导航与磁贴按钮微动效，同时强制使用贝塞尔物理动效曲线与GPU加速标准，让生成的React/Tailwind代码具备顶级设计大奖（如Awwwards）水准与流畅性能。
它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。
常见场景
它能帮你做什么？
01
02
03
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“请为一款主打隐私保护的AI个人搜索工具设计Hero区域，采用Ethereal Glass暗黑毛玻璃风格与非对称Bento布局，生成包含微动效的Tailwind代码。”
“将这段普通的三列Feature功能卡片代码重构为高阶双层边框（Double-Bezel）结构，并添加磁贴感按钮动效与贝塞尔曲线过渡。”
“设计一个独立奢侈腕表品牌的Landing Page首屏，要求使用Editorial Luxury杂志风、超大衬线排版与悬浮胶囊导航栏。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
