该技能用于指导 AI 生成高质量前端界面，核心是覆盖大模型的默认设计偏见，以指标化规则约束输出。
用途：作为前端/UI 生成时的行为规范，适用于 React 或 Next.js 项目，默认使用 Server Components，样式以 Tailwind CSS 为主。
主要能力：通过三个全局变量驱动设计——DESIGN_VARIANCE（默认 8）、MOTION_INTENSITY（默认 6）、VISUAL_DENSITY（默认 4），并据此调整布局、动效与信息密度。规则涵盖排版、配色、布局、材质与阴影、交互状态、表单与数据模式，以及性能护栏。
必要用法：导入任何第三方库前必须检查 package.json，缺失时先输出安装命令（如 npm install package-name）；Tailwind 需先确认版本，v4 项目不要在 postcss.config.js 中使用 tailwindcss 插件，应使用 @tailwindcss/postcss 或 Vite 插件；图标限定 @phosphor-icons/react 或 @radix-ui/react-icons；动效优先使用 Framer Motion，复杂滚动叙事或 3D 可用 GSAP/ThreeJS，但不得与 Framer Motion 混用于同一组件树。
限制：禁止使用 emoji、纯黑 #000000、Inter 字体、AI 紫蓝配色、居中 Hero、三列等宽卡片等被列为“AI 痕迹”的模式；全高区块须用 min-h-[100dvh] 而非 h-screen；动画仅限 transform 与 opacity；移动端非对称布局须回退为单列。资料未提供具体收费、平台支持范围与效果数据。