---

name: design-taste-frontend description: "用于构建具有严格设计品味、精确色彩、响应式布局和动效规则的高自主性前端界面。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, design, ui, react] tools: [claude, cursor, codex, antigravity]

高自主性前端技能

何时使用

• 当用户要求创建、改进或审查具有强设计品味和反通用约束的前端 UI 时使用。
• 当 React、Next.js、Tailwind、动效、组件状态、排版、间距、色彩或响应式行为需要高级设计判断时使用。
• 当输出必须覆盖常见 LLM UI 偏差（如居中 Hero、紫色渐变、卡片滥用、糟糕的状态处理和脆弱布局）时使用。

限制

• 本技能提供前端设计和实现指导；不能替代项目特定的产品需求、无障碍审查或用户测试。
• 在将生成的 UI 视为生产就绪之前，请在目标仓库中验证框架版本、已安装依赖、响应式行为和构建输出。
• 当现有产品、品牌系统或平台规范要求不同的视觉方向时，不要强制使用这些设计规则。

1. 活跃基线配置

• DESIGN_VARIANCE: 8 (1=完美对称, 10=艺术混乱)
• MOTION_INTENSITY: 6 (1=静态/无运动, 10=电影级/魔法物理)
• VISUAL_DENSITY: 4 (1=艺术画廊/通透, 10=飞行员驾驶舱/密集数据)

AI 指令： 所有生成的标准基线严格设置为这些值 (8, 6, 4)。不要要求用户编辑此文件。否则，始终听从用户：根据他们在聊天提示中明确请求的内容动态调整这些值。使用这些基线（或用户覆盖的）值作为全局变量来驱动第 3 至第 7 节中的具体逻辑。

2. 默认架构与约定

除非用户明确指定不同的技术栈，否则遵循这些结构约束以保持一致性：

• 依赖验证 [强制]： 在导入任何第三方库（如 framer-motion、lucide-react、zustand）之前，你必须检查 package.json。如果包缺失，你必须在提供代码之前输出安装命令（如 npm install package-name）。绝不假设库已存在。
• 框架与交互性： React 或 Next.js。默认使用服务器组件 (RSC)。
  • RSC 安全： 全局状态仅在客户端组件中有效。在 Next.js 中，将 providers 包装在 "use client" 组件中。
  • 交互性隔离： 如果第 4 或第 7 节（动效/液态玻璃）处于活跃状态，特定的交互式 UI 组件必须提取为独立的叶子组件，并在最顶部添加 'use client'。服务器组件必须专门渲染静态布局。
• 状态管理： 对隔离的 UI 使用本地 useState/useReducer。仅在避免深层 prop 传递时使用全局状态。
• 样式策略： 使用 Tailwind CSS (v3/v4) 处理 90% 的样式。
  • TAILWIND 版本锁定： 先检查 package.json。不要在 v3 项目中使用 v4 语法。
  • T4 配置守卫： 对于 v4，不要在 postcss.config.js 中使用 tailwindcss 插件。使用 @tailwindcss/postcss 或 Vite 插件。
• 反 EMOJI 策略 [关键]： 绝不在代码、标记、文本内容或 alt 文本中使用 emoji。用高质量图标（Radix、Phosphor）或简洁的 SVG 原语替代符号。Emoji 被禁止。
• 响应式与间距：
  • 标准化断点 (sm、md、lg、xl)。
  • 使用 max-w-[1400px] mx-auto 或 max-w-7xl 约束页面布局。
  • 视口稳定性 [关键]： 绝不对全高 Hero 区域使用 h-screen。始终使用 min-h-[100dvh] 以防止移动浏览器（iOS Safari）上的灾难性布局跳动。
  • Grid 优于 Flex 数学： 绝不使用复杂的 flexbox 百分比数学 (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）。

3. 设计工程指令（偏差修正）

LLM 对特定 UI 陈词滥调模式有统计偏差。使用这些工程规则主动构建高端界面：

规则 1：确定性排版

• 展示/标题： 默认使用 text-4xl md:text-6xl tracking-tighter leading-none。
  • 反平庸： 不鼓励在"高端"或"创意"氛围中使用 Inter。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi 强制独特字符。
  • 技术 UI 规则： 仪表盘/软件 UI 严格禁止衬线字体。在这些场景中，专门使用高端无衬线字体搭配（Geist + Geist Mono）。