用途：这是一个前端设计工程类技能提示，目标是让模型输出接近获奖级（Awwwards 级）的 UX/UI 与 GSAP 动效页面，主动打破大模型常见的排版与布局惯性。
主要能力与要求：
- 随机化：写 UI 代码前必须在 <design_plan> 中模拟 Python 脚本执行，用确定性种子（如用户提示字符数取模）模拟 random.choice()，从 Hero 架构、字体栈（Satoshi、Cabinet Grotesk、Outfit 或 Geist，禁用 Inter）、3 个组件架构、2 个 GSAP 范式中各选一项，禁止重复默认布局。
- 结构：页面须以高级导航栏开始，正文遵循 AIDA（Attention Hero、Interest Bento、Desire GSAP 滚动/媒体、Action 页脚/定价），区块间使用大垂直间距（如 py-32 md:py-48）。
- Hero：H1 使用超宽容器（如 max-w-5xl、max-w-6xl、w-full），字号 clamp(3rem, 5vw, 5.5rem)，行数不超过 2 至 3 行；按钮对比度必须清晰；禁止浮动徽章、pill 标签和原始统计数据。
- Bento 网格：必须使用 grid-flow-dense，数学验证 col-span 与 row-span 完美咬合，不留空格；卡片控制在 3 至 5 个。
- GSAP 动效：使用 @gsap/react 与 ScrollTrigger，包含悬停物理、滚动固定、图片缩放淡出、文字逐词显现、卡片堆叠等。
- 组件库：内联排版图片、水平手风琴、无限跑马灯、评价轮播等。
- 内容与素材：禁止 SECTION 01、QUESTION 05 等廉价元标签；图片使用 https://picsum.photos/seed/{keyword}/1920/1080 并配合 CSS 滤镜；背景使用径向模糊、颗粒网格渐变等；整页包裹 <main className="overflow-x-hidden w-full max-w-full"> 防止横向滚动条。
- 预检：写代码前必须输出 <design_plan>，包含 Python RNG 执行、AIDA 检查、Hero 数学验证、Bento 密度验证、标签与按钮检查。
使用方式：将本技能作为系统提示或技能指令提供给模型，随后输入页面需求，模型会先输出设计计划再输出 UI 代码。
适用场景：需要高视觉冲击力、强动效、编辑级排版的营销页、作品集、产品落地页等前端设计任务。
限制：资料未提供具体安装命令、收费方式、平台支持或效果保证；实际输出质量取决于模型能力与执行环境。