技能介绍

解决前端生成中的一致性与工程规范失控问题

在当前的AI辅助前端开发中，生成的代码往往在视觉风格上随机性过大，且经常忽略现代框架（如Next.js）的严格工程约束。开发者常面临动效与服务端组件冲突、第三方依赖未安装导致编译错误、以及Tailwind版本语法不兼容等实际问题。该技能旨在通过引入标准化的配置基线与强制性的架构约束，让AI生成的前端代码不仅具备一致的设计品味，还能直接融入生产级的React或Next.js项目中。

核心能力与关键执行步骤

该技能通过三个核心设计参数来驱动界面生成逻辑：

DESIGN_VARIANCE：控制视觉排版的对称与艺术化程度。
MOTION_INTENSITY：决定动效的强度，从静态无运动到电影级物理动效。
VISUAL_DENSITY：调整信息密度，从画廊式留白到仪表盘式紧凑数据。

在执行生成任务时，技能遵循以下关键步骤：

依赖校验：在引入任何第三方库（如 framer-motion 或 lucide-react）前，强制检查 package.json。如果依赖缺失，必须先输出安装命令，绝不假设库已存在。
架构与交互隔离：默认采用 React 或 Next.js 的 Server Components (RSC)。当涉及动效或特定交互时，必须将 UI 提取为独立的叶子组件，并在顶部声明 'use client'，确保服务端组件仅渲染静态布局。
样式与状态管理：90% 的样式通过 Tailwind CSS 实现，并根据项目锁定的版本（v3 或 v4）严格匹配语法配置。全局状态仅用于避免深层属性传递，局部交互则依赖 useState 或 useReducer。
视觉规范：严格执行反 Emoji 政策，所有符号均替换为高质量的图标库（如 Radix、Phosphor）或干净的 SVG 基础图形。

适用边界与注意事项

该技能高度依赖用户的明确指令来动态覆盖默认的参数基线。如果开发者没有提供具体的视觉或动效要求，AI 将严格使用默认的 (8, 6, 4) 配置。
此外，由于强制要求 Tailwind 版本锁定和 RSC 安全边界，该技能更适合中大型的 Next.js 或 React 项目。对于极简的静态页面或不依赖现代组件架构的场景，其严格的隔离和校验规则可能会显得过于冗余。开发者需确保项目环境已正确配置 Node.js 包管理器及对应的构建工具链。