技能介绍

它解决什么问题

LLM 生成前端界面时有一个顽固的倾向：反复产出高度同质的“安全布局”——居中 flexbox、12 列对称网格、千篇一律的 Inter 字体，以及只会呈现“静态成功态”的组件。这套技能用一组显式约束替代隐式偏好，让输出更接近工程师手写的精致前端。

核心工作方式

技能首先定义三个全局变量作为设计基线：DESIGN_VARIANCE（布局对称度）、MOTION_INTENSITY（动效强度）与 VISUAL_DENSITY（信息密度），默认值为 8 / 6 / 4。用户可在对话中实时覆盖，后续规则围绕这组变量展开。

关键约束包括：

依赖校验：导入任何第三方库前必须先查 package.json，缺库时先输出安装命令，绝不假设库已存在
RSC 安全：Next.js 项目里全局状态只能放在 Client Components，provider 必须包在 "use client" 组件中
动效隔离：Motion 或 Liquid Glass 生效时，交互组件必须是独立的 leaf component，服务端组件只渲染静态布局
反 slop 规则：禁用 emoji，改用 Radix / Phosphor 图标；h-screen 一律换成 min-h-[100dvh]；布局用 CSS Grid 而非 flexbox 百分比计算

在此基础上，技能主动加入高质感细节：玻璃拟态需带 1px 内描边和内阴影模拟折射；动效强度大于 5 时启用磁性按钮和永续微交互，但必须用 Framer Motion 的 useMotionValue 而非 useState，避免渲染循环开销。

适用边界

这是保留的 v1 版本，仅供依赖其精确行为的项目使用；新项目应使用默认的 v2。动效与动画只允许操作 transform 和 opacity，噪点滤镜只能挂在 pointer-events-none 的固定伪元素上。输出前还有一份预检清单，逐项核对空态 / 加载 / 错误状态、移动端折叠和永续动画的组件隔离。