前端设计调性参数控制

问题：模板化的 AI 前端输出

直接让 LLM 写界面，结果往往高度趋同：居中的 Hero 区块、千篇一律的卡片堆叠、滥用的 Emoji 图标，以及只给出静态成功态的表单。更麻烦的是工程细节：在 Next.js 的 Server Components 树里误用全局状态、在 iOS Safari 上用 h-screen 导致布局跳动、给无限动画组件制造父级重渲染。这类问题不是“审美不够好”，而是缺少一套可执行的工程约束。

技能如何工作

调性参数作为全局变量。 技能内置三个基准参数：DESIGN_VARIANCE=8、MOTION_INTENSITY=6、VISUAL_DENSITY=4。基准值固定为 (8,6,4)，但用户在对话中明确要求时，以用户指令覆盖。这三组数值会贯穿后续的设计决策，而不是仅停留在注释里。

硬性工程规范。 导入任何第三方库前必须先检查 package.json，缺失则输出安装命令；Tailwind 需先确认版本，v4 项目中禁止使用 v3 语法，且不要在 postcss.config.js 里挂 tailwindcss 插件，改用 @tailwindcss/postcss。安全状态只能在 Client Component 中使用，涉及 Motion 或 Liquid Glass 的交互组件必须抽取为顶层带 'use client' 的叶子组件。视觉上禁止 Emoji，图标统一走 @phosphor-icons/react 或 @radix-ui/react-icons，并全局统一 strokeWidth。

设计偏差校正。 标题默认 text-4xl md:text-6xl tracking-tighter leading-none，面向 Premium/Creative 场景避开 Inter，改用 Geist、Outfit、Satoshi 等字体；Dashboard/软件类 UI 一律禁用衬线字体。色彩最多一个 Accent Color，饱和度不超过 40%。当 VISUAL_DENSITY 高于 7 时，通用卡片容器被禁止，改用 border-t、divide-y 或留白来分组。表单 Label 必须位于输入框上方，错误提示置于下方。

反模板化的主动设计。 需要 glassmorphism 时执行「Liquid Glass」：在 backdrop-blur 之外补 border-white/10 的 1px 内描边和内阴影，模拟真实边缘折射。当 MOTION_INTENSITY 高于 5 时，实现磁吸按钮与 Perpetual 微交互，但磁吸效果必须使用 useMotionValue / useTransform 实现，禁止用 useState。列表挂载采用 staggerChildren 错峰编排，且父级与子级 variants 必须在同一 Client Component 树内。

性能护栏与自检。 噪声滤镜只能挂在 fixed inset-0 pointer-events-none 的伪元素上；动画只走 transform 与 opacity；z-index 仅用于 Navbar、Modal、Overlay 等系统层。输出前按预检清单逐项确认，包括移动端是否回退为单列、空/加载/错误态是否齐备、CPU 密集动画是否隔离到独立 Client Component。

适用边界

技能不会自动安装依赖、修改系统权限、创建持久化任务或执行下载内容。涉及发送、发布、删除、付款、部署等外部写入时，会先展示目标与影响，再要求明确确认。凭据仅用于用户指定的对应官方服务，不回显、不记录，也不转发。命令与代码默认仅作参考，只有用户明确要求且目标范围清楚时才会运行。