用途
本技能适用于用户要求创建、改进或审查前端 UI，并希望具备强设计品味与反通用化约束的场景。当 React、Next.js、Tailwind、动效、组件状态、排版、间距、颜色或响应式行为需要资深级设计判断时使用。也适用于需要覆盖大模型常见 UI 偏见（如居中英雄区、紫色渐变、卡片滥用、状态缺失、脆弱布局）的输出。
示例请求：使用 @design-taste-frontend 审查此界面，找出影响最大的设计问题，并提出可直接实施的改进方案。
主要能力
技能以三个可调基线变量驱动设计逻辑：DESIGN_VARIANCE（设计变化度，默认 8）、MOTION_INTENSITY（动效强度，默认 6）、VISUAL_DENSITY（视觉密度，默认 4）。用户可在对话中显式覆盖这些值。
默认架构约定：React 或 Next.js，默认使用服务端组件（RSC）；全局状态仅用于客户端组件；交互组件需隔离为带 'use client' 的叶子组件；样式 90% 使用 Tailwind CSS（v3/v4），并需先检查 package.json 确认版本；禁止使用 emoji，改用 Radix 或 Phosphor 图标；响应式使用标准断点，页面容器使用 max-w-[1400px] mx-auto 或 max-w-7xl；全高英雄区必须使用 min-h-[100dvh] 而非 h-screen；复杂布局使用 CSS Grid 而非 flex 百分比计算。
设计工程指令包括：确定性排版（标题默认 text-4xl md:text-6xl tracking-tighter leading-none，正文 text-base text-gray-600 leading-relaxed max-w-[65ch]）；颜色校准（最多 1 个强调色，饱和度低于 80%，禁止 AI 紫/蓝美学，使用中性基底加单一高对比强调色）；布局多样化（禁止居中英雄区，强制分屏、左对齐内容/右对齐资产或非对称留白）；材质与阴影（避免卡片滥用，仅在层级需要时使用卡片，阴影需带背景色调）；交互状态（必须实现加载、空状态、错误状态和触觉反馈）；数据与表单模式（标签在输入框上方，错误文本在下方，标准 gap-2）。
创意主动性部分要求实现液态玻璃折射、磁性微物理（使用 Framer Motion 的 useMotionValue 和 useTransform，禁止用 useState 处理连续动画）、持续微交互、布局过渡和交错编排。
性能护栏包括：颗粒/噪点滤镜仅用于固定且 pointer-events-none 的伪元素；仅动画 transform 和 opacity；克制使用 z-index。
技能还提供技术参考（三个变量的 1-10 级定义）、禁止的 AI 模式清单（如霓虹外发光、纯黑、过度饱和强调色、Inter 字体、超大 H1、三列卡片布局、通用姓名、通用头像、假数字、创业套路名称、填充词、Unsplash 链接、shadcn/ui 默认状态等），以及高端创意组件参考库（如 Mac OS Dock 放大、磁性按钮、Bento 网格、瀑布流、视差倾斜卡片、聚光灯边框卡片、玻璃拟态面板、粘性滚动堆叠、水平滚动劫持、穹顶画廊、Coverflow 轮播等）。
使用方式
在对话中通过 @design-taste-frontend 引用该技能，提出创建、改进或审查前端 UI 的请求。技能会根据基线或用户覆盖的变量值驱动具体设计逻辑。生成代码前必须检查 package.json 验证依赖，缺失时先输出安装命令。
适用场景
适用于需要资深设计判断的前端界面构建与审查，尤其是希望避免通用 AI 设计套路、追求精致非通用化输出的项目。
限制
本技能提供前端设计与实现指导，不替代项目特定的产品需求、无障碍审查或用户测试。在将生成的 UI 视为可上线之前，需在目标仓库中验证框架版本、已安装依赖、响应式行为和构建输出。当现有产品、品牌系统或平台约定要求不同视觉方向时，不应强行套用这些设计规则。