技能介绍

要解决的问题

标准 LLM 写页面时有一种强烈的统计偏向：永远先给出第一个想到的布局，于是页面长得像同一台机器批量吐出来的。窄容器把 H1 挤成 6 行文字墙，Bento 网格里留着没人认领的空格，标题上漂着 SECTION 01 这类廉价标签，按钮文字在深色背景上几乎不可见，左右交替的双栏布局一遍又一遍地重复。这些不是审美瑕疵，而是模型在「省事」时必然滑向的默认值。

它如何工作

这个技能把对抗默认值写成了强制流程。写 UI 代码之前，先模拟一次 Python 随机化：以 prompt 字符数做确定性 seed，依次选出一个 Hero 架构、一套字体栈（Satoshi、Cabinet Grotesk、Outfit、Geist，禁用 Inter）、三组组件架构和两种 GSAP 动效范式。同一 prompt 必然得到同一结果，但字符数稍有变化就会洗牌。

结构上强制 AIDA：导航栏、Attention 的 Hero、Interest 的高密度 Bento、Desire 的 GSAP 滚动段落、Action 的高对比 CTA，段落之间用 py-32 md:py-48 级别的间距拉开，让页面像章节而不是拼盘。Hero 有 2-3 行铁律：H1 必须放进 max-w-5xl 以上的超宽容器，字体用 clamp(3rem, 5vw, 5.5rem) 压小，杜绝 4 行以上的标题；Bento 一律挂 grid-flow-dense，并逐格核算 col-span / row-span 的咬合关系，不允许角落留空。

动效是真实 GSAP，不是 CSS 过渡的礼貌点缀：ScrollTrigger pin 左侧标题、右侧画廊垂直滚动；图片以 scale: 0.8 入场，离屏时暗化至 opacity: 0.2；段落文字逐词 scrub 显隐；卡片随滚动从底部堆叠上来。组件库随机取用行内排版图像、水平手风琴、无限跑马灯和评价轮播。图片走 https://picsum.photos/seed/{keyword}/1920/1080 并叠加 grayscale、mix-blend-luminosity 等滤镜，避免 stock photo 感。SECTION 01、QUESTION 05 这类 meta 标签被永久禁用，emoji 也不许出现在代码、注释和输出里。

最实用的是 pre-flight 步骤：React 代码之前必须先输出一段校验——RNG 选择结果、AIDA 完整性、Hero 容器宽度的数学保证、Bento 零空格证明、标签清扫与按钮对比度确认。这套自检让模型把「看起来对」变成「可验证的对」。

适用边界

它是为 Awwwards 风格营销页优化的，不是通用组件库。页面气质偏电影感、高对比、大间距，用来做后台表格或数据密集型控制台会格格不入。图片全靠 Picsum 占位，生产环境需要替换为真实素材。确定性 seed 的另一面是：字符数相近的两个 prompt 可能得到相似的组件与动效组合。GSAP 的 pin、scrub、堆叠叠加在一起，低端设备上的性能成本需要自己测量。另外，pre-flight 输出之外的视觉判断仍依赖模型自己核验，别把它的自检结果当成人肉走查的替代品。