该技能用于让 LLM 以资深 UI/UX 工程师的方式生成前端界面，核心是覆盖模型默认的设计偏好，通过度量规则与严格架构约束输出更高质量的前端代码。
用途与主要能力：提供一套主动基线配置，包含 DESIGN_VARIANCE（默认 8）、MOTION_INTENSITY（默认 6）、VISUAL_DENSITY（默认 4）三个维度，作为全局变量驱动后续设计逻辑，可根据用户提示动态调整。覆盖架构约定、设计工程准则、创意实现、性能护栏、参数定义与禁止模式等模块。
关键规则：默认 React/Next.js，优先 Server Components；全局状态仅用于 Client Components，交互组件须隔离为带 'use client' 的叶子组件；样式 90% 用 Tailwind CSS，并需核对 package.json 确认版本与依赖，缺失依赖须先输出安装命令（如 npm install package-name）。禁止 emoji，图标限用 @phosphor-icons/react 或 @radix-ui/react-icons。全高区块用 min-h-[100dvh] 而非 h-screen，布局用 CSS Grid。禁止纯黑 #000000、紫色发光与霓虹渐变，最多一个强调色且饱和度低于 80%；禁止 Inter 字体、三列等宽卡片和居中 Hero；禁止泛化姓名、假数据与 Unsplash 图片，改用 https://picsum.photos/seed/{random_string}/800/600 等占位。
使用方式与限制：作为技能加载后按上述规则生成代码，须先核对依赖与 Tailwind 版本，不得在 v3 项目使用 v4 语法。动效中连续动画禁用 React useState，改用 Framer Motion 的 useMotionValue/useTransform；不得混用 GSAP/ThreeJS 与 Framer Motion 于同一组件树。具体安装与启用步骤资料未提供。