前端设计品味

前端界面生成的一致性难题

让 AI 直接生成前端界面时，最常见的问题是风格漂移：这次输出极简留白，下次变成信息堆砌，两次生成之间没有统一的审美标准。这个技能的做法是引入三个可量化的全局参数——DESIGN_VARIANCE（设计变化）、MOTION_INTENSITY（动效强度）、VISUAL_DENSITY（视觉密度）——以默认值 8/6/4 作为所有生成任务的基线，并作为全局变量驱动后续逻辑。用户在对话中明确表达需求时，可以动态覆盖这些参数，无需手动改配置文件。

核心机制与关键约束

• 依赖验证（强制）：导入任何第三方库（如 framer-motion、lucide-react、zustand）前必须先检查 package.json；依赖缺失时先输出安装命令再给代码，绝不假设库已存在。
• 框架约定：React 或 Next.js，默认使用 Server Components（RSC）。
• RSC 安全边界：全局状态只能存在于 Client Components；在 Next.js 中，provider 必须包在 "use client" 组件内。
• 交互隔离：涉及动效或 Liquid Glass 的交互组件，必须抽成独立的 leaf 组件并在顶部声明 "use client"，Server Components 只负责静态布局。
• 状态管理：局部 UI 用 useState/useReducer，全局状态仅用于避免深层 prop drilling。
• 样式策略：90% 样式交给 Tailwind CSS（v3/v4）；先检查 package.json 锁定版本，禁止在 v3 项目中使用 v4 语法。

适用边界

• 上述架构约束仅在用户未明确指定其他技术栈时生效，用户指定后应以其为准。
• 基线参数不建议用户直接编辑文件，应通过对话指令覆盖，基线值本身是技能内部的固定约定。