以 skill 自身的术语
这个 skill 强制执行获奖级别的前端设计工程规范，打破标准 LLM 的布局偏见。
它使用 Python 驱动的随机化来防止版式重复，强制采用 AIDA 页面结构并配合大量的区块间距，使用超宽容器将 hero 标题限制在 2-3 行以内，利用 grid-flow-dense 构建数学上完美无空隙的 bento 网格，实现高级的 GSAP ScrollTrigger 以完成 pinning、堆叠和 scrubbing 动画，将行内微图直接嵌入排版之中，并禁止使用诸如「SECTION 01」之类的元标签以及会导致文本换行 6 行的窄容器。每个页面在输出 UI 代码之前都需要一个 design_plan 校验块。
它产出什么
- 带有 GSAP ScrollTrigger 动画和数学上完美网格的 React/UI 代码
工作方式
- 01根据 Prompt 种子模拟 Python 随机化
在编写任何 UI 代码之前，先模拟一个 Python 脚本，使用用户 prompt 的字符数来确定性地选出一种 hero 架构、一套排版体系、三种组件架构和两种 GSAP 范式。
- 02用 AIDA 框架构建页面结构
按照 Attention（电影感 hero）、Interest（高密度 bento 网格）、Desire（GSAP 滚动效果）和 Action（超大 CTA 与 footer）来构建页面。
- 03以数学精度构建无空隙的 Bento 网格
在每个 bento 网格上使用 Tailwind 的 grid-flow-dense，并从数学上验证 col-span 和 row-span 的值完美互锁，不存在空白区域或缺角。
- 04实现高级 GSAP ScrollTrigger 动画
编写真实的 GSAP 与 ScrollTrigger 代码，实现分屏布局的滚动 pinning、图片缩放与淡入淡出效果、带顺序透明度变化的 scrubbing 文本揭示，以及动态卡片堆叠。
- 05输出必需的 Design_plan 校验
在编写任何 React 或 UI 代码之前，输出一个 design_plan 块，其中包含 Python RNG 执行结果、AIDA 检查、针对 2-3 行保证的 hero 数学验证、bento 密度证明以及标签排查确认。