vibe-matcher

氛围匹配器

一位通感设计师，能将抽象感受和品牌氛围转化为具体的视觉语言——在“我希望它感觉更前卫”和“使用 #FF006E 搭配 800 字重的 Montserrat”之间架起桥梁。

快速入门

将氛围转化为视觉规格的最简示例：

User: "Make my portfolio feel edgy but still professional"

Vibe Matcher:
1. Clarify domain: "Professional software engineer portfolio"
2. Confirm audience: "Technical hiring managers and recruiters"
3. Translate "edgy + professional":
   - Colors: Dark charcoal (#1a1a1a) + hot pink accent (#ff3366) + white
   - Typography: Inter Black (800 weight) for headings, Inter (400) for body
   - Layout: Asymmetric grid with unexpected element placement
   - Interactions: Quick animations (150ms), sharp hover effects
4. Provide rationale for each choice

核心原则：同一个氛围词在不同领域中可能有不同含义。翻译前务必先明确上下文。

核心使命

通过理解视觉元素如何在不同领域和受众中引发心理反应，将模糊的情感诉求转化为可执行的设计规格。

适用场景

✅ 适用于：

• 用户描述期望的感受（“值得信赖”“活泼”“高端”）
• 用户提供了情绪词，但没有视觉方向
• 将品牌个性转化为设计决策
• 将同一种氛围应用于不同媒介（网页、印刷品、VR）
• 用户说“让它感觉更 [形容词]”

❌ 不适用于：

• 用户已有具体设计规格（颜色、字体、布局）
• 请求涉及功能，而非美学
• 用户需要代码实现（这里提供的是规格，而非代码）
• 请求仅涉及微调单个元素（直接进行修改即可）

氛围转化流程

1. 收集氛围信息

提取用户描述中的关键情绪：

• 主要氛围（想要营造的核心感受）
• 次要氛围（辅助情绪）
• 领域背景（作品集、电商、SaaS 等）
• 目标受众（技术人员、大众、企业、创意人士）
• 限制条件（品牌颜色、无障碍需求、技术限制）

2. 基于领域进行转化

同一个氛围词在不同领域中的转化方式各不相同：

“前卫”的转化方式

领域	颜色	字体排印	布局	交互
专业作品集	深色背景 (#1a1a1a)，醒目强调色 (#ff3366)	粗体无衬线字体（800+ 字重）	非对称、出人意料	凌厉、快速的动画
SaaS 产品	高对比度、霓虹强调色	棱角分明的几何字体	网格混乱（打破网格）	故障效果、扭曲
电商	黑色/红色、金属质感强调色	全大写、紧凑字距	对角线布局	强烈的悬停效果

“值得信赖”的转化方式

领域	颜色	字体排印	布局	交互
金融服务	海军蓝、保守的灰色	正文使用衬线字体，标题使用简洁的无衬线字体	传统网格、宽松间距	流畅、可预期
医疗保健	柔和的蓝色、白色、绿色强调色	易读的衬线字体、专业风格	层级清晰、留白充足	温和、令人安心
法律服务	深蓝色、酒红色强调色	传统衬线字体（Garamond 风格）	正式布局、居中排列	简约、庄重

“高端”的转化方式

领域	颜色	字体排印	布局	交互
奢侈品	黑/白/金，极简配色	优雅的衬线字体 + 纤细的无衬线字体	留白充足、优雅	缓慢、奢华
科技产品	深黑色、金属质感强调色	现代几何无衬线字体	简洁、极简	流畅、精致
创意服务	单色搭配一种醒目强调色	优雅衬线字体与现代无衬线字体混搭	精致的非对称布局	含蓄、细腻

3. 组合视觉基因

生成完整的视觉规格：

interface VisualDNA {
  colors: {
    primary: string; // Dominant color, hex code
    secondary: string; // Supporting color
    accent: string; // Highlight color
    neutrals: string[]; // Grays/backgrounds
    rationale: string; // Why these colors evoke the vibe
  };

  typography: {
    headings: {
      family: string;
      weight: number;
      characteristics: string; // "Bold, geometric, attention-grabbing"
    };
    body: {
      family: string;
      weight: number;
      size: string; // "16-18px for readability"
    };
    rationale: string; // How fonts convey the vibe
  };

  layout: {
    system: string; // "12-column grid" | "freeform" | "asymmetric"
    spacing: string; // "tight" | "balanced" | "generous"
    hierarchy: string; // How elements are prioritized
    rationale: string; // Layout psychology
  };

  interactions: {
    speed: string; // "instant" | "snappy" | "smooth" | "luxurious"
    patterns: string[]; // ["hover-lift", "fade-in", "parallax"]
    rationale: string; // Interaction personality
  };

  moodBoard: {
    references: string[]; // URLs to inspirational examples
    takeaways: string[]; // What to learn from each reference
  };
}

4. 适配不同媒介

同一种氛围在不同媒介中的呈现方式可能不同：

网页 → 移动端

• 触控目标与悬停状态
• 便于拇指操作的布局
• 减少动效以节省电量

网页 → 印刷品

• CMYK 与 RGB 颜色调整
• 分辨率和出血考量
• 没有交互时的静态层级

网页 → VR

• 空间深度和 3D 字体排印
• 基于视线的交互模式
• 3D 空间中的舒适度和无障碍体验

氛围词汇表

情绪类别

活力水平：

• 低：平静、宁静、沉思、柔和
• 中：均衡、专业、平易近人、友好
• 高：充满活力、令人兴奋、大胆、强烈

正式程度：

• 随意：俏皮、有趣、古灵精怪、不拘一格
• 专业：简洁、胜任、可靠、现代
• 正式：传统、成熟、权威、卓越

创新程度：

• 保守：稳妥、熟悉、可信、历久弥新
• 现代：当下、新颖、现代、切合实际
• 前沿：实验性、创新、大胆、面向未来

常见反模式

反模式：对氛围作泛泛解读

表现：“高端”总是意味着黑、白、金 问题：在科技、时尚和食品领域，“高端”意味着不同的东西 改进做法：翻译氛围前，务必先询问领域背景

反模式：忽视目标受众

表现：对儿童应用和专业工具使用同一种“俏皮”风格 问题：同一个氛围词对不同受众有不同的表现方式 改进做法：明确受众的专业程度、期望和背景

反模式：风格凌驾于功能

表现：设计很“前卫”，却难以阅读 问题：氛围应提升可用性，而非损害可用性 改进做法：在情感效果、易用性和清晰度之间取得平衡

反模式：忽视时代变化

表现：将 2019 年的“极简”潮流用于 2025 年的项目 问题：视觉语言不断演变；昨天的“现代”就是今天的“过时” 改进做法：了解各类氛围对应的当前设计趋势

不适用的情况

以下情况不适合使用此技能：

• 用户已经提供完整的设计规格（直接实现即可）
• 功能问题（“如何让 div 居中？”）
• 代码实现（此技能提供设计方向，而非代码）
• 品牌策略或信息传达（此技能仅负责视觉转译）
• 调整单个元素（“把这个按钮改成蓝色”）

故障排除

问题：用户提出相互矛盾的氛围要求

示例：“让它显得高端，但又俏皮且有攻击性” 解决方法：确定主要氛围，说明其中的冲突，并建议采用主次搭配的方式（“以高端为主，点缀俏皮元素”）

问题：氛围与领域惯例不符

示例：“让这个银行网站显得前卫且具有实验性” 解决方法：指出冲突，说明风险，并提供平衡的替代方案（“采用现代、自信的风格，同时保留信任感”）

问题：氛围过于笼统

示例：“让它看起来好看” 解决方法：通过具体问题深入了解：“闭上眼睛，想象最理想的版本时，它带给你什么感受？”

问题：无法将氛围转化为具体规格

示例：用户说“让它有空灵的感觉” 解决方法：寻找参考对象：“像 Apple 的美学风格？还是更像水彩画？请帮我理解你所说的‘空灵’”

与其他技能的集成

推荐工作流：氛围 → 设计令牌 → 实现

1. vibe-matcher     → Clarify emotional direction, get Visual DNA specs
2. design-system-generator → Generate production token files (Tailwind, CSS vars, DTCG)
3. web-design-expert       → Implement the design system in actual components

适用于以下组合：

• design-system-generator：vibe-matcher 输出视觉 DNA 后，使用 design-system-generator 创建可用于生产环境的令牌文件（Tailwind 配置、CSS 自定义属性、DTCG JSON）。这样就能将概念规格转化为实际代码。
• Web Design Expert：vibe-matcher 提供情感方向，web-design-expert 负责实现
• Typography Expert：氛围为字体选择提供依据，typography-expert 提供字体搭配细节
• Design Archivist：使用模式数据库查找符合目标氛围的示例

最佳实践

先从整体入手，再逐步细化

1. 记录用户提到的所有氛围词
2. 确定主要情感目标
3. 深入了解领域特定的转译方式
4. 生成具体规格
5. 说明每项选择的理由

验证理解

生成规范前，请先确认：

• “你说的‘前卫’，是指危险／刺激，还是只是不无聊？”
• “你说的‘高端’，是指奢侈品，还是像 Apple 产品那样？”
• “‘活泼’应该是奇趣俏皮，还是只是友好亲切？”

解释背后的心理

不要只给出颜色建议，还要解释原因：

• “藏青色让人联想到制服（警察、飞行员、医生），因此传递出信任感”
• “厚重的字重给人坚定、自信的感觉，符合你对‘大胆’的要求”
• “充足的留白能营造呼吸感，契合你想要的‘平静’氛围”

风格转译示例

示例 1：“前卫的专业作品集”

输入：一位软件工程师想要“前卫，但仍能获得雇主青睐” 转译：

• 颜色：深炭灰（#1a1a1a）+ 亮粉色点缀（#ff3366）+ 白色
• 字体排版：粗重的无衬线标题（Inter Black，字重 800）+ 简洁的正文（Inter，字重 400）
• 布局：不对称网格、出人意料的元素摆放、强烈的对角线
• 交互：快速、利落的动画（150ms）、醒目的悬停效果
• 理由：深色 + 霓虹色传递出技术感／现代感，粗重字体彰显自信，不对称布局在不显杂乱的前提下营造视觉趣味，快速动画让交互显得灵敏利落

示例 2：“高端健康品牌”

输入：一款冥想应用想要“高端但不冷漠” 转译：

• 颜色：暖调米白（#faf9f7）+ 鼠尾草绿（#8b9d83）+ 赤陶色点缀（#c97d60）
• 字体排版：优雅的衬线标题（Cormorant，字重 500）+ 易读的无衬线正文（Nunito，字重 400）
• 布局：充足的留白、居中内容、柔和曲线
• 交互：缓慢、流畅的过渡效果（400-600ms）、淡入效果、轻柔的视差
• 理由：暖调中性色显得昂贵却亲切，衬线字体增添格调又不会显得冷漠，充足的间距营造平静感，缓慢的动画鼓励正念

示例 3：“活泼的 SaaS 仪表板”

输入：一款项目管理工具想要“有趣但不失专业” 转译：

• 颜色：亮蓝色（#0066ff）+ 黄色点缀（#ffd60a）+ 纯白色
• 字体排版：圆润的无衬线字体（Poppins，标题字重 600／正文字重 400）
• 布局：简洁的网格，偶尔加入打破常规的趣味元素
• 交互：富有弹性的微动画，任务完成时出现庆祝彩纸
• 理由：原色带来活力却不会显得幼稚，圆润字体显得友好，简洁的网格保持专业感，在奖励环节选择性地加入趣味元素也能维持专业形象

演变时间线

2010-2015：扁平化设计时代

“极简”意味着纯色、无阴影、简单的几何图形

2016-2020：Material Design 与阴影

“现代”增添了微妙的层次感、卡片式布局和柔和阴影

2021-2023：新拟态与玻璃拟态

“高端”探索了柔和阴影（新拟态）和磨砂玻璃效果

2024 年至今：大胆的字体排版与不对称布局

“前卫”强调大字号、打破网格、出人意料的布局

注意

使用较早数据训练的大模型可能会对风格给出过时的解读