用途：这是一套面向 React/Next.js 前端开发的 UI/UX 工程规范技能，用于约束大模型生成界面时的默认审美偏好，让输出更接近高级定制设计，而非通用模板。
主要能力：以三个可调指标驱动设计——DESIGN_VARIANCE（默认 8）、MOTION_INTENSITY（默认 6）、VISUAL_DENSITY（默认 4），并据此给出排版、配色、布局、材质、交互状态、数据与表单等规则。例如：标题默认 text-4xl md:text-6xl tracking-tighter leading-none；正文 text-base text-gray-600 leading-relaxed max-w-[65ch]；最多一个强调色且饱和度低于 80%；禁止纯黑、霓虹外发光、AI 紫蓝渐变、Inter 字体、三列等宽卡片、居中 Hero 等常见 AI 设计套路。
使用方式：作为技能加载后，模型按规范生成代码。默认技术栈为 React 或 Next.js，优先 Server Components，交互组件需以 'use client' 隔离；样式以 Tailwind CSS 为主，需先查 package.json 确认版本与依赖，缺失依赖须先给出安装命令（如 npm install package-name）。图标限定 @phosphor-icons/react 或 @radix-ui/react-icons，并统一 strokeWidth。动效优先 Framer Motion，复杂滚动叙事可用 GSAP/ThreeJS，但不得与 Framer Motion 混用于同一组件树。
适用场景：需要高质量、非模板化视觉的营销页、作品集、产品官网、仪表盘等前端界面开发。
限制：规范中的具体数值、字体、库与规则均为该技能自带约定，实际项目需按用户明确要求覆盖；资料未提供收费、平台支持范围与效果保证等信息。