design-exploration

设计探索

为指定的组件、页面或区块生成 N 个不同的设计变体。每个变体都采用截然不同的视觉方向。先呈现所有变体以供比较，再完整实现选定的方案。

触发时机

1. 新项目

用户从零开始搭建前端。没有现成的设计系统——这些变体将定义设计系统。

2. 现有应用

用户已有成熟的设计语言，希望为新的或现有的组件、区块或页面探索多种方案。每个变体都必须与应用现有的模式和设计令牌保持一致。

绕过：已提供详细设计规范

如果用户提供了确切的字体、颜色、十六进制色值、边框圆角和具体样式说明，则完全跳过阶段 2。这是实现请求，而不是探索请求。不要提出替代方案，也不要加入创意方向。阅读每个目标文件，保留所有逻辑，并严格应用指定的修改。直接进入阶段 3。

阶段 1：调研

在开始任何设计之前：

1. 阅读现有代码——了解目标文件中的每个组件、导入项、动画和逻辑。
2. 研究设计语言——检查 globals.css、Tailwind 配置、组件库和现有模式（间距、颜色、排版、卡片样式）。
3. 明确约束——确定哪些内容绝不能更改：数据、逻辑、API 调用、路由、状态管理。
4. 了解内容模型——确认展示了哪些数据，以及边缘情况（长文本、很多条目、空状态）。
5. 检查资源——确认图片、图标和资源的格式是否正确（透明度、分辨率、宽高比）。如果资源需要预处理（移除背景、转换格式），请先处理，再基于这些资源构建变体。
6. 超越需求简述进行探索——查找代码库中已有但尚未展示的数据值、可重新利用的现有资源，以及可通过不同方式呈现的值（例如用图表、进度条、指示器代替纯文本），并寻找对信息进行分组或分层展示的机会。

阶段 2：生成变体

严格生成用户要求的数量（默认：5）。根据项目状态自动确定模式——不要询问。

模式 A：新项目

没有需要遵循的现有设计系统。

1. 广泛调研——跨领域探索设计方法：产品设计、编辑设计、印刷、建筑、时尚品牌、游戏 UI、包装设计。不要依赖记忆中的风格列表。
2. 分析背景——了解产品用途、受众和预期氛围。交易应用与作品集的需求截然不同。
3. 背景信息不足时，提出问题——询问产品是什么、面向哪些人，以及希望营造什么感受。例外：如果用户明确希望广泛探索，则跳过此步骤。
4. 选择最适合该项目的风格——每种风格都必须是适合此产品的可行方向，而不是用来展示风格范围。严格遵守明确排除的风格。不要陷入总是选择同一类风格的固定模式。
5. 最大限度地提高多样性——每个变体在空间布局思路、排版风格和情绪基调上都必须不同。不要只做“布局相同、颜色不同”的变体。

模式 B：现有应用

应用已具备成熟的样式、设计令牌、组件和设计模式。

1. 首先研究设计系统 -- globals.css、tailwind 配置、主题令牌、调色板、字体排版、间距、动画规范、边框圆角、卡片样式。
2. 以应用现有样式为基准 -- 所有变体都必须与现有系统保持一致。你要探索的是不同的布局与构图，而不是不同的设计系统。
3. 改变结构，不改变风格特征 -- 在布局、信息层级、组件构成、动画方式和信息密度上有所不同。除非用户明确要求焕新风格，否则不要更改字体系列、调色板或边框圆角。
4. 与周边 UI 保持协调 -- 与相邻元素的尺寸、间距和对齐方式相匹配。若位于按钮旁边，尺寸应与按钮高度一致。若位于卡片网格中，应遵循相同的内边距和间距。
5. 风格更改例外 -- 如果用户明确要求更改风格，可以不遵循现有系统。此时应更接近模式 A，但要将当前应用作为设计背景。

必须体现的差异

每个变体都必须在以下所有维度上有所不同：

维度	模式 A（全新）	模式 B（现有）
字体排版	每个变体使用不同的字体组合	使用应用现有字体；调整字重、字号和层级
颜色	使用不同的强调色、背景和对比方式	使用应用调色板；调整颜色的应用方式和强调程度
布局	网格、列表、不对称、卡片式、紧凑或宽松布局	在应用规范内采用不同的排布方式
氛围	通过调研，为每个变体探索独特的个性	构图方式各异，但保持相同的整体个性
边框／圆角	锐利、圆润、胶囊形或混合样式	使用应用现有的圆角
动效	采用不同的动画理念	在应用动效规范内采用不同的设计选择
背景	纯色、渐变、纹理、图案或氛围效果	使用应用现有背景样式；调整各区域的呈现方式

变体规则

• 避免 AI 式敷衍设计 -- 不要使用常见的紫色配白色，不要使用 Inter／Roboto／Arial 或系统默认字体，不要使用千篇一律的卡片网格，也不要在不同会话中一再趋同于 Space Grotesk。请参阅《美学标准》中的「避免趋同」，了解当前应当避开的陈词滥调配色方案。
• 默认不使用噱头风格 -- 除非用户明确要求，否则不要选择新粗野主义、终端／黑客风、复古 CRT 或蒸汽波风格。默认采用适合投入生产的设计风格。
• 简洁也完全可行 -- 如果用户要求简单、清爽或极简，就严格照此实现。使用清晰的字体排版、充足的留白和常规布局。不要添加装饰元素或特效。
• 必须支持响应式布局 -- 每个变体都必须适用于移动设备。使用 prefers-reduced-motion，并确保交互适合触摸操作。
• 确保跨浏览器兼容 -- 避免使用可能导致 Safari 或 Firefox 出现问题的前沿 CSS。
• 仅使用模拟数据 -- 使用涵盖边界情况的真实感模拟数据。探索阶段不要接入真实 API 调用或状态管理，这些工作将在第 3 阶段进行。

变体展示

每个变体都应提供：

1. 名称 -- 简短且富有表现力（例如「余烬」「信号」「夜曲」）
2. 描述 -- 用 2～3 句话说明其美学方向，以及为何适合
3. 关键选择 -- 字体、强调色、布局方式、动效风格
4. 标志性元素 -- 该变体最令人印象深刻的一个元素
5. 变更说明 -- 如果变体引入了新数据、重新利用了资源、重组了信息或降低了现有数据的优先级，请明确说明
6. 完整实现 -- 使用模拟数据的可运行代码

实现简单的切换机制，让用户可以在浏览器中切换查看各个变体（例如小型悬浮选择器、查询参数或键盘快捷键）。用户必须能够并排比较所有变体，或在它们之间切换，而无需修改代码。

如果所有变体都被拒绝

1. 询问哪里不合适——风格方向、布局、质量，还是全部。
2. 询问是否有参考——网站、应用、Dribbble 作品或截图。
3. 根据反馈提供 1～2 个有针对性的变体，而不是再盲目批量生成。
4. 如果对方说“简单点就好”，就停止探索，提供一个简洁、保守的设计。

第 3 阶段：实现

用户选定一个变体后：

1. 删除所有其他变体——彻底清理：
   • 搜索残留的变体引用、条件语句和选择逻辑
   • 检查孤立文件、未使用的导入和未使用的 CSS 类
   • 运行构建，确认没有损坏的导入
   • 代码库应看起来像是从一开始就只实现了选定的变体
2. 接入真实数据——将所有模拟数据替换为真实的 API 调用、状态管理和逻辑。
3. 保留所有现有功能——原有的每个导入、处理程序和逻辑片段都必须保留。只更改视觉样式。
4. 先读再写——覆盖文件前务必先读取当前文件内容。绝不要凭记忆操作。
5. 验证动画——使用 GPU 加速的属性（transform、opacity），而不是会触发布局的属性（top、left、width、height）。进入动画使用 ease-out，状态变化使用 ease-in-out。如果动画看起来不流畅，就简化它。
6. 测试响应式布局——在手机、平板电脑和桌面设备的断点下验证。
7. 确认没有回归问题——如果可用，运行构建和 lint。检查所有导入都能正常解析。

美学标准

这些标准适用于每种模式下的每个变体。

立足主题——开始设计前，明确具体主题、目标受众，以及屏幕要完成的一项任务。主题自身的世界——它的材料、工具、产物和行话——才是独特设计选择的源泉。植根于主题的变体，胜过追求泛泛的“好看”。

主视觉就是论点——对于页面和版块，以主题世界里最具代表性的事物开场，形式不限：标题、图片、动画或实时演示。大数字配小标签、辅助统计数据和渐变点缀是一种模板式答案——只有确实是最佳选择时才使用。

大胆只用在一处——为每个变体设计一个让人印象深刻的标志性元素，然后让周围的一切保持克制、有序。删去与设计目标无关的装饰。克制本身也是一种有效的冒险；并非每个变体都需要层层堆叠氛围。

字体——搭配有辨识度的展示字体和精致的正文字体（模式 A），或在应用字体中变化字重、字号和层级（模式 B）。让字体处理成为设计中令人难忘的一部分，而非中性的载体。切勿默认使用系统字体或过度使用的字体系列。

色彩——选定一种主色，并搭配鲜明的强调色。胆怯、均匀分布的配色会显得毫无设计感。使用 CSS 变量保持一致性。

结构承载信息——编号、眉题、分隔线和标签必须传达真实的内容信息，而非仅作装饰。编号标记（01 / 02 / 03）只适用于内容确实存在顺序的地方。添加任何结构元素前，都要先问问它是否必要。

动效——精心编排的一组入场动画（错开显示、animation-delay）比零散的微交互更有冲击力。但往往越少越好：过多动画会显得像 AI 生成。优先考虑页面加载和滚动触发的效果，而非悬停效果；只在动效服务于主题时才添加。

空间构图——有意义地变化布局：不对称、重叠、对角线流动、打破网格的元素、可控的密度，或充足的留白。避免默认采用居中的卡片网格。

背景与层次——只有在符合设计方向时，才使用氛围效果（渐变网格、噪点纹理、几何图案、层叠透明效果、戏剧化阴影），不要养成条件反射。严谨的纯色背景搭配精准间距同样是合理选择，并非设计失败。

文案也是设计素材——文案和视觉一样，也可能让设计显得像套用模板。站在屏幕另一侧的用户角度撰写，按用户能控制的内容命名，使用主动语态，并确保同一操作的标签在整个流程中保持一致。将错误状态和空状态也视为设计方向，而非氛围元素。

避免趋同——在不同变体之间或不同会话中，切勿反复采用相同的字体、配色方案或布局模式；每次生成都应像是由不同的创意总监精心策划。避开无论主题为何都会出现的当代 AI 默认风格：（1）米白色背景（约为 #F4F1EA），搭配高对比度衬线字体和赤陶色点缀；（2）近黑色背景，搭配单一的酸橙绿或朱红色点缀；（3）大报版式，搭配极细分隔线、零圆角和密集分栏。这些风格在适合的设计目标下，经过有意识的选择都可以成立，但绝不能成为不假思索的默认答案。

关键约束

• 必须涵盖所有数据——原始内容中的每个值和指标都必须出现在每个变体中。可以更改展示格式（例如将文本改为图表、将数字改为进度条），但不得悄然删除任何内容。如果某个变体有意省略或降低某项数据的优先级，必须在变体说明中指出。
• 不得使用占位内容——变体阶段使用模拟数据，最终实现中使用真实数据。
• 文件必须完整——写入整个文件。不得添加“其余内容保持不变”之类的注释。
• 字体导入——更改字体时，更新布局文件或入口文件中的导入（如 next/font/google、@font-face 等）。
• 设计令牌——更新 CSS 变量或主题令牌，使其与所选变体一致。如果应用使用令牌系统，不要以内联方式硬编码颜色。