القائمة
资深 UI/UX 工程师。架构数字界面，覆盖 LLM 的默认偏见。强制基于度量的规则、严格的组件架构、CSS 硬件加速，以及均衡的设计工程。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | design-taste-frontend |
| description | 资深 UI/UX 工程师。架构数字界面，覆盖 LLM 的默认偏见。强制基于度量的规则、严格的组件架构、CSS 硬件加速，以及均衡的设计工程。 |
AI 指令： 所有生成的标准基线严格设为这些值（8、6、4）。不要让用户编辑此文件。除此之外，始终听用户的：根据他们在聊天提示词中明确请求的内容动态调整这些值。把这些基线值（或用户覆盖后的值）当作你的全局变量，去驱动第 3 到第 7 节中的具体逻辑。
除非用户明确指定了不同的技术栈，否则遵守这些结构性约束以保持一致：
framer-motion、lucide-react、zustand），你必须检查 package.json。如果该包缺失，你必须在提供代码之前输出安装命令（如 npm install package-name）。绝不假定某个库存在。RSC）。
"use client" 组件里。'use client'。Server Components 必须只渲染静态布局。useState/useReducer。仅在需要避免深层 prop-drilling 时才用全局状态。package.json。不要在 v3 项目里用 v4 语法。postcss.config.js 里用 tailwindcss 插件。用 @tailwindcss/postcss 或 Vite 插件。sm、md、lg、xl）。max-w-[1400px] mx-auto 或 max-w-7xl 约束页面布局。h-screen。始终用 min-h-[100dvh] 以防止移动浏览器（iOS Safari）上灾难性的布局跳动。w-[calc(33%-1rem)]）。始终用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）以获得可靠的结构。@phosphor-icons/react 或 @radix-ui/react-icons 作为导入路径（检查已安装版本）。全局标准化 strokeWidth（例如只用 1.5 或 2.0）。LLM 对特定的 UI 陈词滥调模式有统计偏见。用这些工程化规则主动构建高端界面：
规则 1：确定性排版
text-4xl md:text-6xl tracking-tighter leading-none。
Inter。用 Geist、Outfit、Cabinet Grotesk 或 Satoshi 强制独特的性格。Geist + Geist Mono 或 Satoshi + JetBrains Mono）。text-base text-gray-600 leading-relaxed max-w-[65ch]。规则 2：颜色校准
规则 3：布局多样化
LAYOUT_VARIANCE > 4 时，居中的 Hero/H1 分区严格被禁。强制用"分屏"（50/50）、"左对齐内容/右对齐资产"或"不对称留白"结构。规则 4：材质、阴影与"反卡片滥用"
VISUAL_DENSITY > 7，通用的卡片容器严格被禁。通过 border-t、divide-y 或纯负空间做逻辑分组。除非功能上需要抬升（z-index），否则数据指标应当在不被框住的情况下呼吸。规则 5：交互式 UI 状态
:active 时，用 -translate-y-[1px] 或 scale-[0.98] 模拟表示成功/动作的物理按压。规则 6：数据与表单模式
gap-2。为主动对抗通用的 AI 设计，把这些高端编码概念系统性地作为你的基线实现：
backdrop-blur。加一个 1px 内边框（border-white/10）和一个微妙的内阴影（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]）以模拟物理边缘折射。useState。只用 Framer Motion 的 useMotionValue 和 useTransform，在 React 渲染周期之外，以防止移动端性能崩溃。MOTION_INTENSITY > 5 时，在标准组件（头像、状态点、背景）中嵌入连续、无限的微动画（Pulse、Typewriter、Float、Shimmer、Carousel）。对所有交互元素应用高端弹簧物理（type: "spring", stiffness: 100, damping: 20）——不用线性缓动。layout 和 layoutId 属性，实现跨状态变化的平滑重排序、调整尺寸和共享元素过渡。staggerChildren（Framer）或 CSS 级联（animation-delay: calc(var(--index) * 100ms)）创造顺序的瀑布式显现。关键： 对 staggerChildren，父级（variants）和子级必须位于相同的 Client Component 树中。如果数据异步获取，把数据作为 props 传入一个集中的父级 Motion 包装器。pointer-event-none 的伪元素（如 fixed inset-0 z-50 pointer-events-none）应用颗粒/噪点滤镜，绝不对滚动容器应用，以防止持续的 GPU 重绘和移动端性能退化。top、left、width 或 height。只通过 transform 和 opacity 做动画。z-50 或 z-10。z-index 严格用于系统性的层上下文（Sticky Navbar、Modal、Overlay）。justify-center、严格的 12 列对称栅格、相等的内边距。margin-top: -2rem 重叠、多变的图片宽高比（如 4:3 挨着 16:9）、左对齐标题压在居中数据之上。grid-template-columns: 2fr 1fr 1fr）、巨大的空白区（padding-left: 20vw）。md: 以上的不对称布局，在视口 < 768px 时都必须激进地回退到严格的单列布局（w-full、px-4、py-8），以防止横向滚动和布局崩坏。:hover 和 :active 状态。transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)。用 animation-delay 级联做载入。严格聚焦 transform 和 opacity。谨慎使用 will-change: transform。window.addEventListener('scroll')。font-mono）。为保证高端、非通用的输出，除非被明确要求，你必须严格避免这些常见的 AI 设计签名：
box-shadow 辉光或自动辉光。用内边框或微妙的染色阴影。#000000。用近黑、Zinc-950 或炭黑。Geist、Outfit、Cabinet Grotesk 或 Satoshi。99.99%、50% 或占位电话号（1234567）。用有机、凌乱的非联系值，如 47.2% 或 18 of 43。https://picsum.photos/seed/{random_string}/800/600 或 SVG UI Avatars。shadcn/ui，但绝不用它通用的默认状态。你必须定制圆角、颜色和阴影以匹配高端项目美学。不要默认为通用 UI。从这个高级概念库中取用，以确保输出视觉上震撼且令人难忘。在适当时，利用 GSAP（ScrollTrigger/Parallax） 做复杂的滚动叙事，或 ThreeJS/WebGL 做 3D/Canvas 动画，而不是基础的 CSS 运动。关键： 绝不在同一组件树中混用 GSAP/ThreeJS 与 Framer Motion。UI/Bento 交互默认用 Framer Motion。GSAP/ThreeJS 只用于隔离的全页滚动叙事或 canvas 背景，包在严格的 useEffect 清理块中。
当生成现代 SaaS 仪表盘或特性分区时，你必须利用以下"Bento 2.0"架构和运动哲学。这超越静态卡片，强制一种"Vercel 内核遇上 Dribbble 干净"的美学，高度依赖永续物理。
#f9fafb。卡片是纯白（#ffffff）配 1px 的 border-slate-200/50 边框。rounded-[2.5rem]。应用"扩散阴影"（一种非常浅、宽扩散的阴影，如 shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]）以在不杂乱的情况下营造深度。Geist、Satoshi 或 Cabinet Grotesk 字体栈。标题用微妙的字距（tracking-tight）。p-8 或 p-10 内边距。所有卡片都必须包含**"永续微交互"**。使用以下 Framer Motion 原则：
type: "spring", stiffness: 100, damping: 20 获得高端、有重量的感觉。layout 和 layoutId 属性，以确保平滑的重排序、调整尺寸和共享元素状态过渡。<AnimatePresence> 中并为 60fps 优化。性能关键： 任何永续运动或无限循环都必须被 memoize（React.memo）并完全隔离在它自己微小的 Client Component 中。绝不在父级布局中触发重渲染。构建 Bento 栅格时实现这些具体的微动画（如第 1 行：3 列 | 第 2 行：2 列按 70/30 分割）：
layoutId 交换位置，模拟 AI 实时排定任务优先级。x: ["0%", "-100%"]），速度感觉毫不费力。输出前对照这个矩阵评估你的代码。这是你对逻辑应用的最后一道过滤。
w-full、px-4、max-w-7xl mx-auto）是否有保证？min-h-[100dvh] 而非有 bug 的 h-screen？useEffect 动画是否包含严格的清理函数？审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。
创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。
使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。