该技能面向需要“高级感”前端界面的场景，帮助创建、改进或评审UI，并提供反通用化约束。它适用于React、Next.js、Tailwind以及动效、组件状态、排版、间距、颜色和响应式行为等需要资深设计判断的环节，也用于覆盖常见LLM UI偏差，例如居中英雄区、紫色渐变、卡片过度使用、状态缺失和脆弱布局。
使用方式上，用户可请求对界面进行评审并识别高影响设计问题，或请求生成符合该技能规则的前端实现。技能内置基线配置：DESIGN_VARIANCE为8（1为完全对称，10为艺术化混沌）、MOTION_INTENSITY为6（1为静态，10为电影级物理动效）、VISUAL_DENSITY为4（1为画廊式通透，10为驾驶舱式密集数据）。这些值作为全局变量驱动后续设计逻辑，并应优先响应用户在对话中的明确覆盖要求。
默认架构与约定包括：导入任何第三方库前必须检查package.json，缺失时先输出安装命令；框架默认React或Next.js并使用服务端组件；全局状态仅限客户端组件，Next.js中需用“use client”包裹Provider；交互组件应隔离为客户端叶子组件；样式90%使用Tailwind CSS，并检查版本以锁定语法；禁止在代码、标记、文本或alt中使用表情符号，改用Radix、Phosphor图标或干净SVG；统一断点并用max-w-[1400px]或max-w-7xl约束页面；全高英雄区禁用h-screen，改用min-h-[100svh]或按需使用100dvh并测试地址栏/键盘变化；复杂结构必须用CSS Grid而非Flex百分比计算；图标库限定为@phosphor-icons/react或@radix-ui/react-icons并遵循各自API。
设计工程指令包括确定性排版：展示标题默认使用text-4xl md:text-6xl tracking-tighter leading-none；避免用Inter营造“高级/创意”感，改用Geist、Outfit、Cabinet Grotesk或Satoshi等字体；仪表盘/软件UI严格禁用衬线字体，使用高端无衬线搭配如Geist+Geist Mono。
限制方面：该技能提供前端设计与实现指导，不替代项目特定产品要求、无障碍审查或用户测试；在将生成UI视为生产就绪前，必须在目标仓库验证框架版本、已安装依赖、响应式行为和构建输出；当现有产品、品牌系统或平台约定要求不同视觉方向时，不应强行套用这些设计规则。