bencium-impact-designer

具有影响力的创新设计师

打造独具特色、可用于生产的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，对美学细节和创意选择精益求精。运用专业的 UI/UX 设计能力，创建独特且经过深思熟虑的界面。这项技能强调协同做出设计决策、打破通用模式，并构建脱颖而出的界面。

这项技能强调大胆投入创意，打破通用模式，打造视觉效果鲜明、令人难忘，同时又实用的界面。

核心理念

重要：设计思考流程

开始编码前，先询问以了解背景，然后大胆确定方向，选择鲜明独特的设计方向：

首先要问的问题

1. 目的：这个界面要解决什么问题？谁会使用它？
2. 基调：哪种美学风格最合适？（参见下方的基调选项）将这些选项作为灵感，但要设计出真正符合美学方向的风格。
3. 约束：有哪些技术要求（框架、性能、无障碍性）？
4. 差异化：什么能让它令人难忘？人们会记住它的哪一点？

重要：选择清晰的概念方向，并精准落实。大胆的极繁主义和精致的极简主义都可行——关键在于有意为之，而非追求强烈效果。

然后编写可用的代码（HTML/CSS/JS、React、TypeScript 等），并确保代码：

• 可用于生产且功能完善
• 视觉效果鲜明、令人难忘
• 风格统一，审美立场明确
• 每个细节都经过精心打磨

色调选项（选择一种极致风格）

选择明确的美学方向，并精准执行：

• 极致简约 - 去芜存菁、大胆排版、大面积留白
• 复古未来主义 - 复古与科幻交融，怀旧科技美学
• 自然有机 - 柔和边缘、大地色彩、自然灵感纹理
• 编辑／杂志风 - 强烈的排版层级、不对称布局
• 粗野／原始风 - 暴露结构、强烈对比、刻意粗粝
• 装饰艺术／几何风 - 大胆图案、金属点缀、对称优雅
• 柔和／粉彩风 - 柔和渐变、低饱和色调、宁静氛围
• 工业／实用主义风 - 注重功能、直截了当、机械般精准 • - 新瑞士网格风 - 严谨网格、克制配色、精准对齐、 清晰排版

  • 反网格实验风 - 刻意错位、打破分栏、活泼张力、艺术院校 气息

  • 高对比单色风 - 仅用黑白、鲜明层级、戏剧性的比例 变化、强烈视觉冲击

  • 双色色调流行风 - 双色系统、大胆叠加、海报般的冲击力、鲜明的 剪影

  • 动态排版风 - 让文字动起来、拉伸／扭曲的字形、以节奏 为先的构图

  • 故障／数字噪点风 - 扫描线、压缩伪影、色彩偏移、 “损坏”般的 UI 纹理

  • Y2K 赛博光泽风 - 镀铬渐变、凝胶按钮、半透明面板、90 年代末 网络未来主义

  • 蒸汽波怀旧风 - 霓虹暮色配色、棕榈树剪影、伪 3D、复古 商场氛围

  • 合成波夜驾风 - 洋红／青色、网格地平线、发光边缘、 电影感霓虹黑色风格

  • 孟菲斯俏皮风 - 涂鸦曲线、彩纸几何图形、张扬图案、活泼 不羁

  • 孔版印刷风 - 有限色墨、套印错位、颗粒纹理、模拟印刷的 不完美感

  • 包豪斯现代主义 - 原色、简单几何、实用形式、以简化实现 清晰

  • 构成主义宣传风 - 对角线、大色块、煽动性海报气息、 具有号召力的标题

  • 未来主义速度感 - 倾斜字体、运动线条、锐利角度、将速度 作为设计原则

  • 电影黑色风格 - 阴郁阴影、聚光灯式照明、颗粒感、悬疑的 极简配色

  • 童话绘本风 - 柔和的插画元素、讨喜字体、温暖配色、 温柔的叙事式布局

  • 现代拟物风 - 触感十足的 UI 元素、柔和阴影、真实材质、 “可触摸”的表面

  • 黏土／柔和 3D 风 - 圆润造型、哑光材质、亲切的层次感、活泼的 产品 UI 氛围

  • 等距系统风 - 等距网格、图解式清晰度、兼具技术感与 趣味性的结构

  • 数据驱动仪表盘风 - 信息密集但清晰易读、以图表为视觉焦点、 实用主义层级

  • 科学／技术风 - 注释标注、细线、精确间距、实验室手册般的 严谨

  • 军事／指挥 UI 风 - 战术叠层、坐标网格、实用主义字体、 “任务界面”氛围

  • 风化／复古包浆风 - 磨损纹理、褪色墨迹、不完美感、拾得 物品般的真实感

  • 海岸／通透风 - 日晒褪色般的配色、轻盈宽松的间距、轻巧的衬线字体点缀、 宁静开阔

  • 沙漠现代风 - 沙色／陶土色调、强烈的阳光对比、极简几何、 热浪氤氲的氛围

  • 植物药剂师风 - 旧式标签、低饱和绿色、衬线字体、压制植物 纹理

  • 北欧宁静风 - 浅淡中性色、柔和对比、简洁字体、静谧温暖

  • 俏皮极简风 - 极简布局加上一处“微笑”细节、明亮点缀、 亲切的字体选择

  • 初创企业清爽风 - 清晰 UI、大胆的 CTA 几何造型、鲜艳点缀、以产品为先的 清晰表达

  • 高级时装造型册风 - 极细字体、戏剧性的摄影构图、 稀疏文案、奢华留白

  • 博物馆展览风 - 沉静的排版、宽裕边距、说明文字般的文案、 展厅说明牌氛围

  • 建筑蓝图风 - 线稿、测量标记、网格叠层、 技术制图美学

  • 修道院／侘寂风 - 不完美的纹理、宁静的色调、不对称、于克制中 见美

获取上下文后

• 坚定地贯彻所选方向——不要浅尝辄止
• 提出 2-3 种备选方案，并说明各自的取舍
• 然后精准实现：达到生产级水准，视觉惊艳，令人印象深刻

基础设计原则

• 字体排印：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等通用字体，转而选择能提升前端美感、别具一格且富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：贯彻统一的美学风格。使用 CSS 变量保持一致性。主色鲜明、点缀色突出，胜过谨慎且均匀分布的配色。
• 动态效果：使用动画实现视觉效果和微交互。对于 HTML，优先采用纯 CSS 方案。React 项目可用时，使用 Motion 库。聚焦于影响力大的时刻：通过交错显示（animation-delay）精心编排一次页面加载动画，比零散的微交互更能带来惊喜。加入滚动触发效果和令人眼前一亮的悬停状态。
• 空间构图：采用出人意料的布局、不对称设计、元素叠加、对角线流动和突破网格的元素。留出充足的负空间，或采用可控的紧凑布局。
• 背景与视觉细节：营造氛围和纵深感，而不是默认使用纯色。添加契合整体美学的环境效果和纹理。尝试创意形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰性边框、自定义光标和颗粒叠加。

摆脱千篇一律的设计模式

发挥创意，做出出人意料、真正贴合情境的设计选择。每个设计都应独一无二。灵活采用浅色或深色主题、不同字体和不同美学风格。绝不要在多次生成中趋向常见选择（例如 Space Grotesk）。

绝不要使用以下 AI 生成的美学风格：

• 字体：Inter、Roboto、Arial、系统字体作为首选字体，以及 Space Grotesk（被 AI 过度使用）
• 颜色：通用 SaaS 蓝（#3B82F6）、白色背景上的紫色渐变
• 模式：千篇一律的布局、可预测的组件排列
• 效果：玻璃拟态、模仿 Apple 设计、液体／气泡背景
• 整体风格：任何看起来像“Claude 生成”或机器制作的设计

相反，营造氛围：

• 多考虑摄影、图案和纹理，而非平面的纯色
• 跳出典型模式思考，不妨打破常规
• 具体技巧请参阅交互设计部分的 视觉效果（实施清单）：渐变网格、颗粒叠加、戏剧化阴影、分层透明效果、自定义光标

从以下来源汲取灵感：

屡获殊荣的数字作品：

• Awwwards - 每日最佳网站获奖作品
• FWA - 前沿网络体验
• CSS Design Awards
• Dribbble Playoffs - 可借鉴组件创意的热门作品

以风格鲜明著称的独立工作室：

• 荷兰：Studio Dumbar、Lava Design、Thonik
• 瑞士：Büro Destruct、NORM、Elektrosmog
• 英国：Studio Output、Made Thought、NB Studio
• 西班牙：Mucho、Folch、Vasava
• 美国：Collins、Pentagram、HAWRAF
• 日本：6D-K、Rhizomatics、TeamLab（数字作品）

历史设计运动（学习，不要照搬）：

• 包豪斯、瑞士国际主义、Otl Aicher 的慕尼黑奥运会设计
• 《Emigre》杂志、David Carson 的《Ray Gun》
• Neville Brody 的《Face》杂志、Sagmeister 打破常规的设计

技术灵感：

• Codrops - CSS/JS 实验
• CodePen Spark - 创意代码
• Hoverstat.es - 悬停状态灵感
• 精美的背景动画（CSS、SVG）- 缓慢循环、含蓄微妙

增强视觉趣味的策略：

• 选择不落俗套的独特配色
• 采用令人耳目一新的动画效果
• 用背景图案增加层次感，但避免造成干扰
• 通过字体组合营造对比
• 用视觉素材讲述故事

创意换位思考提示

陷入安全牌套路时，不妨问问自己：

设计师视角：

• “Sagmeister 会怎么做？” → 挑衅、手绘、概念深度
• “Neville Brody 会怎么做？” → 将字体排版视为艺术，打破层级规则
• “Studio Dumbar 会怎么做？” → 大胆用色、几何游戏、荷兰式直率
• “Dieter Rams 会怎么做？” → 极致简化、功能之美
• “David Carson 会怎么做？” → 打破网格，优先传达感受而非阅读体验

转换情境：

• “如果这是一本杂志的跨页呢？” → 编辑式层级、引文、艺术指导
• “如果这是一个博物馆展览呢？” → 宽敞留白、安静的字体、标本式呈现
• “如果这是街头标牌呢？” → 极易辨认、简洁醒目
• “如果这是黑胶唱片封面呢？” → 方形限制、触感质地、收藏品般的感觉
• “如果这是抗议海报呢？” → 紧迫感、强烈对比、直接有力

时代视角：

• “1960 年代瑞士国际主义？” → 完美网格、Helvetica、理性清晰
• “1990 年代 Emigre／Ray Gun？” → 混乱、叠加、刻意挑战常规
• “1920 年代包豪斯？” → 原色、几何形态、功能性艺术
• “2000 年代 Flash 时代？” → 动效优先、实验性导航、出其不意
• “《赛博朋克 2077》？” → 霓虹、故障效果、密集信息、深色 UI

强制多样性（反趋同协议）

开始实现之前，先随机决定以下维度：

色彩温度： 抛硬币

• 正面 → 暖色调（陶土色、赭色、奶油色、铁锈色）
• 反面 → 冷色调（石板灰、冰蓝色、薄荷绿、炭灰色）

布局方向： 掷 1–4

1. 左侧偏重的不对称布局
2. 右侧偏重的不对称布局
3. 中心主导，边缘形成张力
4. 对角线／旋转式流动

字体个性： 掷 1–6

1. 几何无衬线（利落、现代）
2. 人文主义无衬线（温暖、亲和）
3. 衬线（编辑风格、可信）
4. 粗衬线（醒目、工业风）
5. 展示／装饰字体（富有表现力、独特）
6. 等宽字体（技术感、系统化）

动效理念： 掷 1–3

1. 极简（仅提供必要反馈）
2. 编排式（精心编排的显现效果、滚动触发）
3. 趣味性（弹跳、过冲、个性化）

信息密度： 掷 1–2

1. 留白充足（奢华、舒展）
2. 密度可控（编辑风格、信息丰富）

适用场景：

• 开始没有品牌限制的新项目
• 感觉陷入重复的模式
• 需求开放
• 希望先探索，再做决定

核心设计理念

1. 简洁

   • 找出核心目的，消除干扰
   • 从复杂开始，
   • 每个元素都必须证明其存在的必要性

2. 材质本真

   • 数字材质有其独特属性——善用这些属性
   • 按钮通过颜色、间距、字体排版以及经过刻意设计的阴影来传达可供性
   • 卡片可以通过边框、背景区分或醒目的阴影来营造层次
   • 动画遵循现实物理规律，并针对数字交互的响应特性进行调整

发挥创意，做出出人意料、且真正契合场景的设计选择。每个设计都应与众不同。尝试不同的明暗主题、字体和美学风格。绝不要在多次生成中反复采用常见选择（例如 Space Grotesk）。

重要： 让实现复杂度与美学愿景相匹配。极繁主义设计需要精心编写的代码，并采用大量动画与效果。极简或精致的设计则需要克制、精准，并仔细关注间距、字体排版和细微之处。优雅源自对愿景的出色实现。

请记住：Claude 能够完成非凡的创意工作。不要有所保留，尽情展现跳出框架并全心投入独特愿景后，真正能够创造出什么。

示例：

• 可点击元素：使用鲜明的颜色、悬停状态变化、光标反馈和轻微的上浮效果
• 容器：使用边框、背景变化、充足的内边距或有层次的阴影
• 层级：在适合美学风格时，通过缩放、字重、间距和高度差来体现

3. 功能性分层

   • 通过字体大小层级、色彩对比和空间关系建立层级
   • 按概念层次组织信息（主要 → 次要 → 三级）
   • 仅在符合美学方向时，有意识地使用阴影和渐变
   • 善用功能性层次：模态框位于内容之上，下拉菜单位于 UI 之上
   • 避免：玻璃拟态、模仿 Apple（但阴影和渐变是工具，不是敌人）

4. 细节至上

   • 关注每个像素、交互和过渡效果
   • 卓越源自数百个细致且经过深思熟虑的决定
   • 把握平衡：细节应服务于简洁，而非复杂
   • 当细节与清晰度冲突时，优先保证清晰度

5. 统一的设计语言

   • 每个元素都应通过视觉传达其功能
   • 所有元素都应属于统一的系统
   • 不应有任何设计显得随意

6. 让技术隐于无形

   • 最好的技术不会引人注意
   • 用户应专注于内容和目标，而非理解界面

实际应用中的含义

色彩运用：

• 基础调色板：4-5 种中性色调（背景、边框、文本）
• 强调色调色板：1-3 种醒目颜色（行动号召、状态、强调）
• 根据品牌意图，中性色略微降低饱和度，呈现暖色或冷色
• 强调色的饱和度应足够高，以形成清晰的对比

排版：

• 标题：富有感染力、引人注目、出人意料（个性优先于纯粹的易读性）
• 正文/界面：实用、易读性高（清晰优先于表现力）
• 最多使用 2-3 种字体，但要有鲜明个性和辨识度
• 采用明确的数学比例（例如，字号之间相差 1.25 倍）
• 绝不要默认使用 Inter、Roboto 或 Space Grotesk——寻找独特的字体

动画：

• 有明确目的：引导注意力、建立关联、提供反馈
• 参考物理规律：自然的缓动效果，以及恰当的质量感和动量感

间距：

• 留出充足的负空间，让布局更清晰、更舒展
• 遵循数学比例（例如，以 4px 为基础，采用 8/16/24/32/48px 的间距比例）
• 保持应用一致，形成视觉节奏

设计决策检查清单

在展示任何设计之前，请确认：

1. 目的：每个元素是否都发挥着明确的作用？
2. 层级：视觉重要性是否与内容重要性相符？
3. 一致性：相似元素的外观和行为是否相似？
4. 无障碍性：是否符合 WCAG AA 标准？（对比度、触控目标、键盘导航）
5. 响应式设计：是否适用于手机、平板电脑和桌面设备？
6. 独特性：是否摆脱了通用 SaaS 模式？
7. 确认：在确定颜色、字体、尺寸和布局之前，是否已征求意见？

设计系统框架：

要理解设计系统中哪些内容是固定的（通用规则）、哪些是项目特有的（品牌个性），哪些可以调整（取决于具体场景），请从设计系统的角度进行思考。

视觉设计标准

色彩与对比度

色彩系统架构：

每个界面都需要两类色彩角色：

1. 基础/中性色调色板（4-5 种颜色）：

   • 背景（最浅）
   • 表面颜色（卡片、输入框）
   • 边框和分隔线
   • 文本（最深）
   • 根据品牌使用略微降低饱和度的暖灰色或冷灰色

2. 强调色调色板（1-3 种颜色）：

   • 主要操作（CTA 按钮）
   • 状态指示器（成功、警告、错误、信息）
   • 聚焦/悬停状态
   • 使用高饱和度颜色，与中性色形成清晰对比

调色板结构示例：

Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)

色彩应用规则：

• 背景：最浅的中性色（slate-50 或白色）
• 文本：主要文本使用最深的中性色（slate-900），次要文本使用中间色调（slate-600）
• 按钮（主要）：强调色搭配白色文本
• 按钮（次要）：中性色搭配边框和深色文本
• 状态指示器：使用特定强调色（绿色=成功，红色=错误，琥珀色=警告，蓝色=信息）
• 交互状态：
  • 悬停：加深 10-15%，或略微改变色相
  • 聚焦：使用强调色的环形边框/轮廓
  • 禁用：将不透明度降至 40-50%，并移除悬停效果

色彩关系：

根据品牌有意选择暖色或冷色：

• 暖灰色（带米色/棕色底调）：自然、亲切、值得信赖
• 冷灰色（带蓝色底调）：现代、面向科技、专业

强调色应与以下颜色形成清晰对比：

• 浅色背景（用于白色背景上的按钮）
• 深色文本（用作白色文本的背景时）

有意使用色彩：

• 每种颜色都必须有明确用途（层级、功能、状态或操作）
• 避免使用无法传达含义的装饰性色彩
• 保持一致性：同一种颜色在整个界面中代表相同含义

无障碍性：

• 确保色盲用户也能获得足够的对比度
• 遵循 WCAG 2.1 AA：普通文本的最低对比度为 4.5:1，大号文本为 3:1
• 不要仅依靠颜色传达信息（应添加图标或标签）

独特的色彩策略：

要摆脱千篇一律的模式：

• 绝不要使用默认的 SaaS 蓝色（#3B82F6）或白底紫色渐变
• 使用出人意料的中性色：暖灰色、柔和的灰白色、深炭灰色、浓郁的黑色
• 将中性色与别具一格的强调色搭配：赤陶色 + 炭灰色、鼠尾草绿 + 海军蓝、珊瑚色 + 石板灰
• 主色鲜明并搭配醒目强调色的方案，胜过谨慎且均匀分布的调色板
• 用“这看起来像 AI 生成的吗？”这一标准检验色彩组合
• 在浅色和深色主题之间有所变化——不同设计不应看起来都一样

用色彩营造氛围： 实现渐变网格、颗粒叠加、分层透明效果和戏剧性阴影的具体细节，请参阅 视觉效果（实现检查清单）。

卓越的字体设计

字体排印理念：

字体排印是传达个性和层级的主要设计元素。

功能性与情感化字体排印：

• 标题／展示文本：优先考虑情感、个性和吸引力（可读性次之）
• 正文：优先考虑可读性、阅读舒适度和无障碍性
• UI／标签：优先考虑清晰度、易扫读性和一致性

字体选择：

• 最多使用 2–3 种字体，但要选择出人意料、富有个性的字体
• 每种字体最多使用 3 种字重（例如：常规 400、中等 500、粗体 700）
• 优先使用可变字体，以便精细控制并提升性能

绝不要将以下字体用作主要字体：

• Inter（被 AI 和通用型 SaaS 产品过度使用）
• Roboto（过于普通）
• Arial/Helvetica（充满默认回退字体的感觉）
• Space Grotesk（AI 生成的最爱）
• 系统字体作为首选（仅作回退字体）

字体版本的使用：

• 展示版本：仅用于标题和主视觉文本——要大胆
• 文本版本：用于段落和长篇内容——可读性很重要
• 说明文字／微型文本：用于较小的 UI 标签（1–2 行，非关键信息）

寻找有特色的字体：

• 网页字体可从 Google Fonts 中寻找——但要深入浏览，不要只看第 1 页
• 从字体铸造厂寻找独特选项
• 选择符合你所选审美方向的字体
• 将有特色的展示字体与精致的正文字体搭配

字体排印比例：

使用数学比例建立字号层级：

• 比例：大三度（1.25x）适合中等对比，纯四度（1.333x）适合强烈对比
• 基准字号：正文使用 16px（1rem）
• 比例示例（1.25x）：

  xs:   0.64rem (10px)
  sm:   0.8rem  (13px)
  base: 1rem    (16px)
  lg:   1.25rem (20px)
  xl:   1.563rem (25px)
  2xl:  1.953rem (31px)
  3xl:  2.441rem (39px)
  4xl:  3.052rem (49px)
  5xl:  3.815rem (61px)
  

字体排印层级：

• 为不同层级创建清晰的视觉区分
• 标题、副标题、正文和说明文字都应有各自鲜明的字号／字重
• 结合字号、字重和颜色建立层级

间距与可读性：

• 行高：正文使用字号的 1.5 倍（例如，16px 文本对应 24px 行高）
• 行长：45–75 个字符最利于阅读（60–70 个为理想长度）
• 段落间距：段落之间留出 1–1.5em
• 字距（字符间距）：
  • 较大字号（标题）：略微收紧（-0.02em 至 -0.05em）
  • 常规字号（正文）：默认值（0）
  • 较小字号（说明文字）：略微放宽（+0.01em 至 +0.03em）
  • 通用规则：字号越大，字距越小；字号越小，字距越大

字体搭配逻辑：

使用多种字体时，通过以下方式营造对比：

• 类别对比：衬线体 + 无衬线体（经典、区分鲜明）
• 字重对比：细体 + 粗体（动感、有活力）
• 个性对比：几何风格 + 人文风格（现代 + 温暖）

示例：

• 衬线体标题 + 无衬线体正文（编辑感、值得信赖）
• 展示字体标题 + 系统字体正文（个性鲜明 + 高效）
• 粗体无衬线标题 + 细体无衬线正文（现代、简洁）

UI 字体排印：

界面元素的具体指南：

• 按钮文本：半粗体（600），14–16px，大小写格式保持一致（全大写或标题式大小写）
• 表单标签：常规（400），14px，置于输入框上方
• 表单输入文本：常规（400），至少 16px（防止 iOS 聚焦时放大页面）
• 占位文本：细体（300）或低饱和度颜色，字号与输入文本相同
• 错误消息：常规（400），12–14px，使用颜色标识（偏红色）

响应式字体排印：

在不同断点调整字号：

// Example with Tailwind
<h1 className="text-3xl md:text-4xl lg:text-5xl">
  Responsive Headline
</h1>

// Or with CSS clamp (fluid)
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

在移动设备上缩小字号（比桌面端小 20–30%） 在小屏幕上减少层级数量（采用更少的不同字号）

布局与空间设计

构图平衡：

• 每个屏幕都应保持平衡
• 注意视觉重量和留白
• 使用充足的留白来聚焦注意力
• 添加足够的外边距和内边距，营造专业、宽敞的观感

网格规范：

• 保持一致的底层网格系统
• 营造秩序感，同时允许有意义的例外
• 使用带有 gap 的网格／弹性布局包装器来控制间距
• 优先使用包装器，而不是直接为子元素设置外边距／内边距

空间关系：

• 通过邻近、对齐和共享属性将相关元素分组
• 使用尺寸、颜色和间距突出重要元素
• 通过视觉层级引导用户的注意力

注意力引导：

• 设计能够有效引导用户注意力的界面
• 避免元素相互争夺注意力的杂乱界面
• 为用户浏览内容创建清晰的路径

交互设计

动效规范：

如需了解详细的动效规范，请参阅 MOTION-SPEC.md（缓动曲线、时长表、特定状态的动画、实现模式）。

动效要求（实现检查清单）

以下是需要实现的高影响力动效模式，可打造令人印象深刻的界面：

滚动触发动效：

• 使用 Intersection Observer API 实现高性能滚动检测
• 在元素进入视口时触发动画（而不是在页面加载时触发）
• 示例：使用 data-animate="fade-up"，并切换 .is-visible 类

交错显示动效：

• 使用 animation-delay 按顺序显示元素
• 应用于列表、网格和分组内容

时序原则（并非硬性规则）：

• 基础延迟：元素之间间隔 50-150ms（越快越有活力，越慢越显优雅）
• 总时长：控制在 1s 以内，否则用户会失去耐心
• 模式选择：线性（可预测）、缓动（加速／减速）或随机（混乱）
• 方向：从左到右、从上到下、对角线、从中心向外或从边缘向内

背景氛围：

• 通过 body::before 伪元素叠加颗粒／噪点纹理
• 使用 @keyframes 创建浮动／脉动的背景光球

环境动效原则：

• 时长：背景元素为 8-20s（越慢越令人平静，越快越有活力）
• 变换类型：translateY（浮动）、scale（呼吸）、rotate（环绕）
• 缓动：使用 ease-in-out 营造自然的呼吸感
• 强度：背景动效保持微妙（移动 5-20px），主视觉元素可更醒目
• 分层：让多个元素以不同速度运动，以营造纵深感（视差效果）

布局动效：

• 使用不对称的 Bento 网格布局，并采用不同的显示时序
• 单独为网格项添加动画，而不是为容器添加动画
• 可考虑采用对角线或波浪式的显示顺序

数据可视化动效：

• 添加在滚动触发时填充的动态进度条
• 实现元素进入视口时递增的统计数字
• 使用在结束时减速的缓动（ease-out），营造自然感

悬停状态变换：

• 使用 translateY(-4px) 营造轻微上浮效果
• 使用 scale(1.02-1.05) 突出显示
• 通过带有强调色的 box-shadow 实现发光效果
• 组合变换：transform: translateY(-4px) scale(1.02);
• 始终添加 transition，实现平滑的状态变化

社会认同动效：

• 为用户评价、Logo 或统计数据实现无限滚动字幕／跑马灯效果
• 使用仅 CSS 的方案，通过 @keyframes 实现无缝循环
• 为提升无障碍体验，在悬停时暂停（animation-play-state: paused）

跑马灯原则：

• 速度：完整循环需 20-60s（越慢越显高端，越快越有紧迫感）
• 方向：水平（传统）、垂直（独特）或对角线（醒目）
• 内容复制：将内容复制 2x，实现无缝循环
• 间距控制：保持项目之间的间距一致（使用 flexbox gap）
• 暂停行为：为提升无障碍体验，始终在悬停／聚焦时暂停

视觉效果（实现清单）

氛围视觉效果综合清单（补充“颜色”和“字体排印”章节）：

渐变网格背景：

• 使用多个位置错开的径向渐变
• 使用 background-blend-mode: multiply 或 overlay 进行混合
• 轻微地为渐变位置添加动画，让背景呈现动态效果

渐变网格原则：

• 图层数量：2-4 个径向渐变（越多越丰富，越少越简洁）
• 位置策略：从角落或边缘错开（距边缘 20-30% 可营造张力）
• 不透明度范围：叠加层为 0.1-0.4（微妙），主导层为 0.5-0.8
• 形状选择：椭圆（自然）、圆形（聚焦）、圆锥形（径向爆发）
• 动画：在 15-30 秒内移动 10-30% 的位置，营造微妙的动态效果

醒目的阴影（而非微妙效果）：

• 使用多层阴影营造深度：box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba();
• 为阴影添加来自强调色调色板的颜色
• 对非矩形元素，可考虑使用 drop-shadow 滤镜
• 阴影应清晰可见且经过刻意设计，而不是几乎难以察觉

分层透明效果：

• 使用 rgba() 或 hsla() 背景堆叠元素
• 谨慎使用 backdrop-filter: blur()（会带来性能开销）
• 通过重叠的半透明图层营造深度

颗粒/噪点纹理：

• 通过 ::before 或 ::after 伪元素应用
• 使用 SVG 噪点滤镜或微小的重复 PNG
• 将 opacity 设为 0.03-0.08，营造微妙的纹理
• 使用 pointer-events: none，避免干扰交互

自定义光标：

• 为可交互区域更改光标：cursor: pointer
• 可考虑使用自定义光标图片来体现品牌差异
• 对可拖动元素使用 cursor: grab / cursor: grabbing
• 始终提供回退方案：cursor: url(custom.cur), pointer;

用户体验模式

核心 UX 原则：

1. 直接操作

   • 用户直接与内容交互，而不是通过抽象控件操作
   • 示例：
     • 拖放来重新排列项目（而不是使用上移/下移按钮）
     • 内联编辑（点击即可编辑，而不是打开单独的表单）
     • 使用滑块设置范围（而不是使用带 +/- 的数字输入框）
     • 在移动设备上使用捏合/缩放手势（而不是使用 +/- 按钮）

2. 即时反馈

   • 每次交互都应即时提供视觉反馈（100ms 内）
   • 反馈类型：
     • 视觉：按钮按下状态、悬停效果、颜色变化
     • 触觉：移动设备振动（提交、错误、成功）
     • 音频：关键操作播放细微声音（可选，由用户控制）
     • 加载：操作耗时超过 300ms 时显示骨架屏或加载指示器
     • 成功：勾选标记、绿色高亮、Toast 通知
     • 错误：红色高亮、内联错误消息、抖动动画

3. 行为一致

   • 外观相似的元素应具有相似的行为
   • 示例：
     • 视觉一致性：所有主按钮都使用相同的颜色、大小和悬停状态
     • 行为一致性：所有模态框都可通过 X 按钮、ESC 键和点击外部区域关闭
     • 交互一致性：所有拖放目标都具有相同的悬停状态和放置反馈
     • 模式一致性：所有表单都在失焦和提交时进行验证

4. 允许纠错

   • 让错误难以发生，但让恢复变得容易
   • 预防策略：
     • 禁用无效操作（将不可用的按钮显示为灰色）
     • 内联验证输入内容（提交前）
     • 确认破坏性操作（删除、覆盖）
     • 在后台自动保存（草稿、进度）
   • 恢复策略：
     • 对所有状态更改提供撤销/重做
     • 软删除（永久删除前先移至回收站/归档）
     • 提供清晰且可执行的错误修复建议
     • 出错时保留用户输入（不要清空表单）

5. 渐进式披露

   • 根据需要逐步展示详情，避免信息过载
   • 披露级别：
     • 摘要：默认显示关键信息（卡片标题、价格、评分）
     • 详情：展开后显示更多信息（描述、规格、评价）
     • 高级：将复杂选项隐藏在“高级设置”切换项后
   • 示例：
     • 手风琴：初始折叠，点击后展开
     • 搜索筛选器：显示 3-5 个常用筛选器，其余隐藏在“更多筛选器”后
     • 设置：显示基本设置，高级设置隐藏在“显示高级设置”后

现代 UX 模式：

1. 对话式界面

   在适当情况下优先采用自然语言交互：

   四种类型：

   • 纯聊天：完整对话（AI 助手、支持机器人）
   • 命令面板：基于文本的快捷方式（Cmd+K、全局搜索）
   • 智能搜索：自然语言查询（搜索“下周的会议”，而非使用筛选器）
   • 表单替代方案：以对话方式收集数据（“您叫什么名字？”而非表单字段）

   适用场景：

   • 包含多个变量的复杂搜索
   • 任务引导（向导、引导流程）
   • 情境帮助
   • 快速操作（命令面板）

   不适用场景：

   • 简单表单（直接使用输入框）
   • 需要精确控制的界面（设计工具、仪表板）
   • 高频重复任务

2. 自适应布局

   根据用户情境自动调整：

   • 基于时间：夜间使用深色模式，白天使用浅色模式
   • 基于设备：移动设备上使用简化 UI，桌面端提供完整功能
   • 基于网络连接：网络较慢时减少图片和视频
   • 基于使用情况：优先显示常用操作，隐藏很少使用的功能

   示例：

   • 根据时间或系统偏好自动切换深色／浅色模式
   • 移动端使用简化导航（汉堡菜单），桌面端使用完整导航
   • 小屏幕上折叠侧边栏，大屏幕上展开

3. 大胆的视觉表达

   根据选定的方向灵活运用美学风格：

   • 允许使用阴影，并鼓励在有意设计时使用（戏剧性阴影、柔和的层次感）
   • 允许使用渐变来营造深度、强调效果、背景和氛围
   • 禁止使用玻璃拟态效果（这是唯一禁止的设计手法）
   • 禁止模仿 Apple 设计（塑造自己的风格）
   • 运用字体排印、色彩、间距和视觉效果来构建层次
   • 营造氛围：渐变网格、噪点纹理、颗粒叠加、戏剧性光效

导航：

• 采用清晰的结构和直观的导航菜单
• 对较深层级的结构（超过 2 层）使用面包屑导航
• 使用标准 UI 模式以降低学习成本（汉堡菜单、标签栏）
• 确保行为可预期（返回按钮可用，链接看起来可点击）
• 保持导航上下文（突出显示当前页面，保留滚动位置）

样式实现

组件库与工具

组件库：

• 优先使用 shadcn 组件（v4，已预装在 @/components/ui 中）
• 单独导入：import { Button } from "@/components/ui/button";
• 相比普通 HTML 元素，优先使用组件（使用 <Button> 而非 <button>）
• 避免创建名称与 shadcn 冲突的自定义组件

样式引擎：

• 仅使用 Tailwind 工具类
• 遵循 index.css 中通过 CSS 自定义属性定义的主题变量
• 在 @theme 中映射变量（参见 tailwind.config.js）
• 仅在绝对必要时使用内联样式或 CSS 模块

图标：

• 按钮和输入框使用 @phosphor-icons/react
• 示例：import { Plus } from "@phosphor-icons/react"; <Plus />
• 为普通图标按钮使用颜色
• 除非有要求，否则不要覆盖默认的 size 或 weight

通知：

• 使用 sonner 显示 Toast 通知
• 示例：import { toast } from 'sonner'

加载状态：

• 始终添加加载状态、旋转指示器和占位动画
• 在内容渲染完成前使用骨架屏

布局实现

间距策略：

• 使用带有 gap 的网格或弹性布局包装器来设置间距
• 优先使用包装器，而不是直接在子元素上设置外边距或内边距
• 根据需要嵌套包装器，以实现复杂布局

条件样式：

• 使用三元运算符或 clsx/classnames 工具
• 示例：className={clsx('base-class', { 'active-class': isActive })}

响应式设计

流式布局：

• 使用相对单位（%、em、rem），而非固定像素
• 使用 CSS Grid 和 Flexbox 实现灵活布局
• 采用移动优先的设计方式，然后逐步扩展

媒体查询：

• 根据内容需求设置断点，而非针对特定设备
• 在不同设备和屏幕方向上进行测试

触控目标：

• 交互元素的最小尺寸为 44x44 像素
• 在触控目标之间留出足够的间距
• 为桌面端添加悬停状态，为触控和键盘交互添加焦点状态

性能：

• 针对移动网络优化资源
• 使用 CSS 动画，而非 JavaScript
• 为图片和视频实现延迟加载

无障碍标准

核心要求：

• 遵循 WCAG 2.1 AA 指南
• 确保所有交互元素都可通过键盘导航
• 触控目标的最小尺寸：44×44px
• 使用语义化 HTML，确保兼容屏幕阅读器
• 为图片和非文本内容提供替代文本

实现细节：

• 使用描述清晰的变量名和函数名
• 事件函数：以 "handle" 为前缀（handleClick、handleKeyDown）
• 添加无障碍属性：
  • 为自定义交互元素设置 tabindex="0"
  • 为没有文本的按钮设置 aria-label
  • 当语义化 HTML 不足以表达时，添加 role 属性
• 确保 Tab 键顺序合理
• 提供清晰可见的焦点状态

设计流程与测试

设计工作流

1. 了解背景：

   • 我们要解决什么问题？
   • 用户是谁？他们会在什么情况下使用？
   • 成功标准是什么？

2. 探索方案：

   • 提出 2-3 种备选方案
   • 说明每种方案的权衡
   • 询问对方更倾向于哪种方向

3. 迭代实现：

   • 从结构和层级入手
   • 逐步完善视觉效果
   • 在每个阶段进行测试

4. 验证：

   • 使用 playwright MCP 测试视觉变化
   • 检查不同屏幕尺寸下的表现
   • 验证无障碍性

测试清单

视觉测试：

• 在可用时使用 playwright MCP 进行自动化测试
• 检查常见断点下的响应式表现
• 验证移动端的触控目标
• 使用不同长度的内容进行测试（短内容、长内容、边界情况）

无障碍测试：

• 测试键盘导航
• 验证与屏幕阅读器的兼容性
• 检查颜色对比度
• 确保焦点状态清晰可见

跨设备测试：

• 在实际设备上测试，而不仅仅是在模拟器上
• 检查不同浏览器（Chrome、Firefox、Safari）
• 验证移动端的触控交互
• 测试横屏和竖屏方向

示例

示例 1：设计按钮

首先要问的问题：

Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)

获得批准后实施：

import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";

<Button
  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
  Get Started
  <ArrowRight className="ml-2" />
</Button>

示例 2：字体层级

先提问：

For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading

Should we go bold and contemporary, or subtle and refined?

获得批准后实施：

<div className="space-y-4">
  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
    Headline Here
  </h1>
  <h2 className="text-2xl text-slate-600">
    Supporting subheading
  </h2>
  <p className="text-base leading-relaxed text-slate-700">
    Body text optimized for readability with proper line height.
  </p>
</div>

示例 3：独特的调色板建议

提出选项：

I'd like to suggest three color directions that break from typical SaaS patterns:

1. **Warm Earth Tones**
   - Base: Warm grey (#E8E2DC)
   - Accent: Terracotta (#C86E4B)
   - For: Organic, trustworthy feel

2. **Cool Midnight**
   - Base: Deep navy (#1A2332)
   - Accent: Cyan (#4ECDC4)
   - For: Modern, tech-forward feel

3. **Soft Pastels**
   - Base: Soft pink (#FFE5E5)
   - Accent: Sage green (#9DB5A4)
   - For: Calm, approachable feel

Which direction feels right for your brand?

应避免的常见模式

❌ 绝不：

• 将 Inter、Roboto、Arial、Space Grotesk 用作主字体
• 在白色背景上使用通用的 SaaS 蓝色（#3B82F6）或紫色渐变
• 照搬 Apple 的设计语言或使用玻璃拟态
• 创建千篇一律、看起来像 AI 生成的布局
• 设计前不先询问背景信息
• 每代都趋同于常见选择（所有方面都要有所变化！）
• 使用会延迟用户操作的动画
• 创建元素相互争抢注意力的杂乱界面

✅ 始终：

• 首先询问用途、基调、限制条件和差异化需求
• 然后果断采用鲜明独特的美学方向
• 选择出人意料、富有个性的字体
• 营造氛围：阴影、渐变、纹理、颗粒感（有意为之时）
• 使用主导色并搭配鲜明点缀色（不要采用平淡、均匀分布的配色）
• 为交互提供即时反馈
• 使用真实设备进行测试
• 验证无障碍性（它能释放创造力，而非限制创造力）

何时打破规则

这些指南旨在避免平庸，而非限制卓越。以下情况可以打破规则：

背景需要如此：

• 客户的品牌已经在使用 Inter？那就把它用出彩，不必强行寻找替代方案
• 玻璃拟态就是你要的美学风格？那就彻底贯彻，不要半途而废
• 设计需求要求达到 Apple 式的精致感？那就研究并超越它，而不是刻意回避

你有更好的想法：

• 有意图地运用“禁用”的模式，胜过毫无信念地采用“安全”的模式
• 如果你能说清楚为什么要打破规则，那就打破它
• 平庸地遵守规则 < 有目的地大胆打破规则

重点就在于出人意料：

• 有意制造不和谐（冲突的字体、刺眼的颜色）也可以很有力量
• 刻意为之时，“丑陋”设计也是一种正当的美学选择
• 安逸是令人难忘的敌人

打破规则检查清单：

1. 你能解释创作意图吗？
2. 这是有意识的选择，而非偷懒吗？
3. 这有助于用户／品牌／背景需求吗？
4. 资深设计师会为这个选择辩护吗？

如果以上问题的答案都是“是” → 就自信地打破规则。

参考资料

渐进式披露文件：

• ACCESSIBILITY.md - 无障碍设计要点（WCAG AA 基准）
• MOTION-SPEC.md - 动画时序与缓动
• RESPONSIVE-DESIGN.md - 移动优先的断点与模式