
关于
构建高自主性前端界面时使用,遵循严格的设计品味、校准色彩、响应式布局和动效规则
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'。服务器组件必须专门渲染静态布局。
- RSC 安全: 全局状态仅在客户端组件中有效。在 Next.js 中,将 providers 包装在
- 状态管理: 对隔离的 UI 使用本地
useState/useReducer。仅在避免深层 prop 传递时使用全局状态。 - 样式策略: 使用 Tailwind CSS (v3/v4) 处理 90% 的样式。
- TAILWIND 版本锁定: 先检查
package.json。不要在 v3 项目中使用 v4 语法。 - T4 配置守卫: 对于 v4,不要在
postcss.config.js中使用tailwindcss插件。使用@tailwindcss/postcss或 Vite 插件。
- TAILWIND 版本锁定: 先检查
- 反 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)。
- 反平庸: 不鼓励在"高端"或"创意"氛围中使用
兼容工具
Claude CodeCursor
标签
前端开发