用途：为前端界面提供视觉设计与美学方向，适用于网页、落地页、仪表盘、Next.js 服务端组件等构建任务。
主要能力与流程：
- 先读取需求并做情境检测：统计设计信号（设计令牌/CSS 变量、组件库如 shadcn/MUI/Ant、Tailwind/styled-components 配置、字体引入、色彩系统、动画模式、间距尺度）。4+ 信号为既有系统，须匹配扩展；1-3 为部分系统，尊重既有并补缺；0 为全新项目，套用完整设计哲学。必要时查 package.json、tailwind.config.*、全局 CSS 与现有组件。
- 设计哲学（先写后码）：整页/应用/多组件界面先写三句话——意图（情绪反应）、签名（唯一视觉选择）、约束（刻意不做什么）。小组件或既有界面可跳过。
- 设计思考：明确用途、基调、技术约束与差异化。全新页面在写码前做“替换测试”：若该配色、字体搭配、布局可直接搬到无关需求，则视为默认选择，须重选并重测。
- 导入第三方库前先查 package.json，缺失则先输出安装命令。
美学指南：字体避开 Inter/Roboto/Arial/系统字体；标题从 text-4xl md:text-6xl tracking-tighter leading-none 起步；H1 限 2-3 行，容器至少 max-w-5xl，用 clamp(3rem, 5vw, 5.5rem) 缩放；正文约 65 字符宽；数字用 tabular-nums；用 text-wrap: balance 修孤词。色彩：最多一个强调色，饱和度低于 80%，中性色与强调色搭配，灰度统一偏向暖或冷，阴影随背景着色。动效优先 CSS，React 可用 Motion；只动画 transform 与 opacity，滚动显示用 IntersectionObserver。布局：鼓励非对称、重叠、破格与 CSS Grid，容器用 max-w-7xl mx-auto，高度用 min-h-[100dvh]；高密度界面避免卡片滥用，可用 border-t、divide-y 分隔；仪表盘可用 Bento 命名模式并加 grid-flow-dense。背景支持渐变网格、噪点、几何图案、双层边框与玻璃拟态。产品 UI 文案要优先定位、状态与操作。
强制交互状态：任何交互组件必须包含加载（与真实布局同形的骨架屏）、空态（说明如何填充数据）、错误（就近内联，不用 window.alert）、按压反馈（:active 加 -translate-y-[1px] 或 scale-[0.98]）。仅成功态属不完整实现。
限制与注意：移动端需单列、44×44 触控目标、禁止横向溢出，移动端移除旋转；噪点滤镜仅用于固定 pointer-events-none 层；禁止动画 top/left/width/height；Next.js App Router 中交互组件须隔离为叶子 'use client' 组件；无 outline: none 时应提供替代焦点指示。可调设计方差参数：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY（1-10，默认 5），并在设计哲学注释中声明。须避免紫/紫罗兰渐变、三栏图标网格、圆圈图标、居中布局、统一圆角等常见 AI 设计模式。资料提到若干配套参考文件（动效模式、创意武器库、重设计审计清单、RSC/客户端边界、高级细节、移动与性能护栏）及 ia-accessibility-tester 代理，但未提供具体内容与安装方式，暂未提供。