第03章三个旋钮：方差 × 动效 × 密度

“不是’让它好看’——是精确控制 AI 在三个维度上偏离默认值多远。”

3.1 旋钮的本质：量化的审美控制

在 Taste Skill 系统中，每个 Skill 文件都包含三个数值参数：

DESIGN_VARIANCE: 8  (1=完美对称, 10=艺术混沌)
MOTION_INTENSITY: 6 (1=完全静态, 10=电影级物理)
VISUAL_DENSITY: 4   (1=画廊级留白, 10=驾驶舱信息密度)

这三个值不是装饰——它们是 AI 在生成代码时的决策参数。当 AI 需要选择"用居中布局还是非对称布局"时，它会查看 DESIGN_VARIANCE 的值；当它需要决定"加不加 hover 动画"时，它会查看 MOTION_INTENSITY；当它需要判断"用卡片还是分隔线"时，它会查看 VISUAL_DENSITY。

为什么要量化？ 因为"做一个高端的界面"是模糊的——你的"高端"和 AI 理解的"高端"可能完全不同。但 DESIGN_VARIANCE: 8 是精确的。它告诉 AI：在布局多样性这个维度上，你应该偏离默认值 80%。

3.2 旋钮一：DESIGN_VARIANCE（设计方差）

定义：控制布局、排版和视觉结构偏离"互联网默认模式"的程度。

1-3 分：结构化、可预测

DESIGN_VARIANCE: 3

适用于：后台管理系统、数据面板、项目管理工具。用户不需要被设计"惊艳"——他们需要快速找到信息。

AI 行为：

使用标准栅格系统
对称布局
常规的 Header → Content → Sidebar 结构
表格优先于卡片

CSS 实现特征：

/* VARIANCE 3: 严格栅格 */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
}
.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

4-6 分：平衡、专业

DESIGN_VARIANCE: 5

适用于：SaaS 产品首页、企业官网、专业服务网站。需要专业感但不能太激进。

AI 行为：

允许非对称但保持平衡
可以有创意排版但不能太实验性
部分区域可以打破栅格
Hero 可以用分屏（50/50）布局

CSS 实现特征：

/* VARIANCE 5: 平衡非对称 */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
.features {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

7-10 分：实验性、艺术性

DESIGN_VARIANCE: 9

适用于：设计事务所作品集、艺术展览、实验性品牌、时尚电商。视觉冲击力是第一优先级。

AI 行为：

居中布局被禁止（规则：“ANTI-CENTER BIAS: Centered Hero sections BANNED when LAYOUT_VARIANCE > 4”）
使用非等分栅格（grid-template-columns: 2fr 1fr 3fr）
文字可以溢出容器、叠加在图片上
大量负空间用于制造视觉张力

CSS 实现特征：

/* VARIANCE 9: 实验性布局 */
.hero {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: auto 1fr auto;
}
.title {
  font-size: clamp(3rem, 8vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  mix-blend-mode: difference;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
}
.feature-grid > :nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

不同 Skill 的方差值对比

minimalist-taste:  ████░░░░░░  3/10  → 可预测
soft-taste:        █████░░░░░  5/10  → 平衡
design-taste:      ████████░░  8/10  → 大胆
brutalist-taste:   █████████░  9/10  → 实验
gpt-taste:         █████████░  9/10  → 最大胆

3.3 旋钮二：MOTION_INTENSITY（动效强度）

定义：控制界面中动画、过渡和微交互的复杂度和数量。

1-3 分：静态优先

MOTION_INTENSITY: 2

适用于：文档类网站、管理后台、数据密集型工具。动效是干扰。

AI 行为：

只有 hover 状态变化（颜色、透明度）
无自动播放动画
无滚动触发效果
过渡用简单的 CSS transition

代码实现：

// MOTION 2: 仅 hover 状态
<button className="text-stone-600 hover:text-stone-900 
                   transition-colors duration-200">
  View Details
</button>

4-6 分：优雅过渡

MOTION_INTENSITY: 6

适用于：产品展示页、品牌官网、SaaS 首页。动效用于引导注意力和增加品质感。

AI 行为：

元素进入视口时有入场动画
使用 Framer Motion 的 Spring 物理弹簧
卡片悬停有轻微位移和阴影变化
页面切换有 layoutId 共享元素过渡

代码实现：

// MOTION 6: Spring 物理弹簧
import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ 
    type: "spring", 
    stiffness: 100, 
    damping: 20 
  }}
  viewport={{ once: true }}
>
  <Card />
</motion.div>

7-10 分：电影级物理

MOTION_INTENSITY: 7

适用于：创意作品集、交互式体验、品牌推广页。动效本身就是内容的一部分。

AI 行为：

磁力追踪：按钮向鼠标位置轻微偏移
交错出场：列表和网格使用 staggerChildren 瀑布式依次出现
持续微动画：状态指示灯脉冲、背景粒子缓慢漂移
滚动物理：GSAP ScrollTrigger 驱动的视差和固定效果

代码实现（磁力追踪按钮）：

'use client';
import { useMotionValue, useTransform, motion } from 'framer-motion';
import { useRef } from 'react';

export function MagneticButton({ children }) {
  const ref = useRef(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handleMouse = (e) => {
    const rect = ref.current.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    x.set((e.clientX - centerX) * 0.15);
    y.set((e.clientY - centerY) * 0.15);
  };

  const handleLeave = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.button
      ref={ref}
      style={{ x, y }}
      onMouseMove={handleMouse}
      onMouseLeave={handleLeave}
      transition={{ type: "spring", stiffness: 150, damping: 15 }}
      className="px-6 py-3 border border-stone-200 
                 text-sm tracking-wide"
    >
      {children}
    </motion.button>
  );
}

关键警告：当 MOTION_INTENSITY > 5 时，Skill 文件中有一条 CRITICAL 规则：

NEVER use React useState for magnetic hover or continuous animations. Use EXCLUSIVELY useMotionValue and useTransform outside the React render cycle.

为什么？useState 每次更新都触发组件重新渲染。鼠标移动事件每秒触发 60 次，如果每次都 setState，就是每秒 60 次重渲染——在移动端直接崩溃。useMotionValue 在 React 渲染循环之外操作，直接修改 DOM 的 transform 属性，零渲染开销。

3.4 旋钮三：VISUAL_DENSITY（视觉密度）

定义：控制单位面积内的信息量。低密度 = 画廊式留白，高密度 = 驾驶舱式信息塞满。

1-3 分：画廊模式

VISUAL_DENSITY: 3

适用于：品牌首页、作品集、奢侈品展示。留白就是内容的一部分。

AI 行为：

大量负空间
每屏只展示一个核心信息
间距用 py-24 到 py-32（96px-128px）
字号梯度大（标题 7xl，正文 base）

// DENSITY 3: 画廊级留白
<section className="py-32 px-8 lg:px-16">
  <div className="max-w-xl">
    <p className="text-xs tracking-[0.3em] uppercase 
                  text-stone-400 mb-8">
      Featured Collection
    </p>
    <h2 className="text-5xl lg:text-7xl font-light 
                   tracking-tighter leading-[0.9]">
      Less Is<br />Everything
    </h2>
  </div>
</section>

4-6 分：平衡模式

VISUAL_DENSITY: 4

适用于：SaaS 首页、产品介绍页。信息和留白的平衡点。

7-10 分：驾驶舱模式

VISUAL_DENSITY: 8

适用于：数据仪表板、交易平台、监控系统。用户需要同时看到尽可能多的信息。

AI 行为：

卡片容器被禁止（规则：“For VISUAL_DENSITY > 7, generic card containers BANNED”）
使用 border-t、divide-y 或纯负空间分隔信息
紧凑间距 gap-2 到 gap-4
等宽字体用于数值显示
数据表格优先于图表

// DENSITY 8: 驾驶舱级信息密度
<div className="divide-y divide-stone-100">
  {metrics.map(({ label, value, delta }) => (
    <div key={label} className="flex items-center 
                                justify-between py-3 px-4">
      <span className="text-sm text-stone-500">{label}</span>
      <div className="flex items-center gap-3">
        <span className="font-mono text-sm tabular-nums">
          {value}
        </span>
        <span className={`text-xs font-mono ${
          delta > 0 ? 'text-emerald-600' : 'text-rose-500'
        }`}>
          {delta > 0 ? '+' : ''}{delta}%
        </span>
      </div>
    </div>
  ))}
</div>

3.5 旋钮组合：风格矩阵

三个旋钮的组合定义了截然不同的设计风格。理解组合规律比记住具体数值更重要：

组合	效果	典型场景
V=3, M=2, D=7	安静、密集、专业	管理后台、IDE
V=5, M=4, D=3	优雅、呼吸、高端	品牌官网、奢侈品
V=8, M=6, D=4	大胆、流畅、现代	创意作品集、SaaS
V=9, M=3, D=8	硬朗、精密、工业	数据面板、金融终端
V=9, M=7, D=4	极致、电影、前卫	互动体验、艺术展

提示词模板：动态调整旋钮

当前项目使用 soft-taste-frontend Skill。
我需要为项目中的管理后台页面调整旋钮值：

DESIGN_VARIANCE: 3（后台不需要实验性布局）
MOTION_INTENSITY: 2（减少干扰）
VISUAL_DENSITY: 7（后台需要信息密度）

请用这组旋钮值生成一个用户管理面板，包含：
- 用户列表（表格形式，不要卡片）
- 筛选栏
- 批量操作按钮
- 分页

3.6 旋钮的条件触发

基座 Skill 中有多条规则是条件触发的——只在旋钮值达到特定阈值时才激活：

WHEN DESIGN_VARIANCE > 4:
  → Centered Hero sections BANNED
  → Force asymmetric layouts

WHEN MOTION_INTENSITY > 5:
  → Magnetic hover REQUIRED
  → Spring physics REQUIRED
  → useState for animation BANNED

WHEN VISUAL_DENSITY > 7:
  → Card containers BANNED
  → Use border-t / divide-y only
  → Compact spacing enforced

这种条件机制让同一个 Skill 文件可以适应不同场景——你不需要为每个场景写一个新 Skill，只需要调整旋钮值。

提示词模板：探索旋钮的边界

我想看到 DESIGN_VARIANCE 从 3 到 9 的变化过程。
请用同一个"个人作品集 Hero 区域"作为内容，
分别生成 VARIANCE=3, VARIANCE=6, VARIANCE=9 三个版本。
保持其他旋钮不变（MOTION=4, DENSITY=4）。
每个版本用不同的组件名导出。

本章小结

三个旋钮是量化的审美控制器——DESIGN_VARIANCE 控制布局偏离程度，MOTION_INTENSITY 控制动效复杂度，VISUAL_DENSITY 控制信息密度，各自独立但组合产生风格
旋钮有条件触发规则——部分设计指令只在旋钮值超过阈值时激活（如 VARIANCE > 4 禁止居中布局），让同一个 Skill 适应多场景
组合比单值更重要——(5, 4, 3) 是优雅高端，(9, 3, 8) 是工业精密，(9, 7, 4) 是电影前卫——理解组合规律才能精准控制输出

核心行动建议：用同一个页面内容，分别设置三组不同旋钮值让 AI 生成代码，对比观察布局、字体、间距和动效的变化。这是理解旋钮最快的方式。

第03章 三个旋钮：方差 × 动效 × 密度

第03章 三个旋钮：方差 × 动效 × 密度

3.1 旋钮的本质：量化的审美控制

3.2 旋钮一：DESIGN_VARIANCE（设计方差）

1-3 分：结构化、可预测

4-6 分：平衡、专业

7-10 分：实验性、艺术性

不同 Skill 的方差值对比

3.3 旋钮二：MOTION_INTENSITY（动效强度）

1-3 分：静态优先

4-6 分：优雅过渡

7-10 分：电影级物理

3.4 旋钮三：VISUAL_DENSITY（视觉密度）

1-3 分：画廊模式

4-6 分：平衡模式

7-10 分：驾驶舱模式

3.5 旋钮组合：风格矩阵

提示词模板：动态调整旋钮

3.6 旋钮的条件触发

提示词模板：探索旋钮的边界

本章小结

第03章三个旋钮：方差 × 动效 × 密度

第03章三个旋钮：方差 × 动效 × 密度