GPT 高级品味引擎

大模型前端输出的通病

常规 LLM 生成网页时会表现出强烈的统计学偏见：标题被塞进窄容器，折行六七行；Bento 网格算错 col-span / row-span，留下空洞；用「SECTION 01」「QUESTION 05」这类伪标签填充版面；按钮文字对比度低到不可见；并反复输出同一种左图右文布局。这个技能的存在意义，就是系统性地打破这些默认行为。

它如何工作

1. 确定性 Python 随机化

在写任何 UI 代码之前，模型必须先模拟执行一段 Python：以用户 Prompt 的字符数为种子，用 random.choice() 选出 1 种 Hero 布局、1 个字体栈（Satoshi / Cabinet Grotesk / Outfit / Geist，严禁 Inter）、3 种组件架构和 2 种 GSAP 动画范式。目的是防止模型偷懒、反复选择第一个选项。

2. AIDA 结构与呼吸感间距

页面按 Attention（Hero）→ Interest（Bento）→ Desire（GSAP 滚动叙事）→ Action（CTA / Footer）组织。所有主要区块之间使用巨大的纵向内边距（如 py-32 md:py-48），让各区块像电影分章一样彼此独立。

3. Hero 双行铁律

H1 必须放在超宽容器（max-w-5xl / max-w-6xl / w-full）中，配合 clamp() 字号，保证标题不超过 2～3 行。禁止漂浮印章图标、Hero 下方 pill 标签、原始数据堆砌。

4. 无缝 Bento 与 GSAP 物理反馈

所有网格必须设置 grid-flow-dense，并手动校验 span 的数学闭合，卡片控制在 3～5 张。动效基于真实的 @gsap/react 与 ScrollTrigger：hover 缩放、滚动钉住、图片淡入放大、逐词 scrub 显现、卡片堆叠。

5. 强制预检

输出任何 React 代码之前，模型必须先输出 <pre-flight> 块，记录 Python RNG 结果、AIDA 检查、Hero 数学验证、Bento 密度证明、标签清理确认。

适用边界

这套技能面向奖项级落地页与作品集。它的硬性禁令与排版偏好（如禁用 Inter）可能与既有设计系统冲突；GSAP 依赖较重，需要项目已接入 Tailwind 与 GSAP；视觉素材依赖 picsum.photos 种子图，正式项目需替换为真实品牌素材。