whimsical-design

奇趣设计技能

条件式专家技能

当用户请求的体验需要个性、愉悦感或鲜明的品牌风格时使用。仅有营销页面、作品集或风格变体练习还不够：用户任务和需求说明必须支持这一选择。跳过常规工具型 UI、状态修复和已定型的美学风格。ADS 负责任务和审核；不要开启另一轮迭代。

在构思美学风格前，先确认期望的个性特征和用户认可的示例。沉静、静态、熟悉也可能是正确的结果。不要使用装饰性圆点或全大写视觉处理；保留当前用户偏好和项目设计令牌。以下技巧可供选择，并非必备要素。

标准

所选个性是否能帮助目标受众理解、记住或享受体验，同时不妨碍完成任务？新奇感和 Agent 的自我满意测试不等于用户认可。

核心原则

1. 奇趣，拒绝刻板

默认避免企业 SaaS 风格，转而追求温暖、个性与惊喜。想想打开 Playdate 包装盒时的感受，或者第一次看到 Teenage Engineering 产品页面时的感觉。

• 像素艺术、手绘纹理、俏皮插画
• 选用温暖的配色，而非冰冷的中性灰
• 在空状态、加载画面和错误消息中展现个性
• 加入能让细心的人发现并会心一笑的小细节

2. 灵动的个性

有意义的反馈可以强化触感或个性。使用 web-animation-design，处理时机、中断、减少动态效果和目标浏览器验证。高频操作控件应保持静止。不要仅仅为了让界面显得鲜活，就添加闲置时的上下浮动、持续脉冲、移动的表格行或动画数据。

可选方案包括：为合适的控件添加轻微的按压反馈；以有限的动效揭示新内容并加以说明；或在需求说明允许时采用由手势驱动的弹簧效果。与现有设计令牌保持一致，保留键盘操作和焦点状态，且不要延迟实际内容的呈现。声音只能作为可选项，且不能成为理解结果的必要条件。

3. 大胆确立美学方向

若要采用新的鲜明风格，请在现有需求说明中明确一种具体美学方向。已有定型方向时应沿用，避免强迫用户再次决策。可选方向包括：

• 极简主义（只保留不可或缺的内容）
• 极繁主义混乱风格（密集、层叠，以最好的方式令人目不暇接）
• 复古未来主义（旧式科技美学，现代功能）
• 有机／自然风格（纹理、温暖、不完美）
• 奢华／精致风格（纤细字重、宽裕留白、珍贵材质）
• 俏皮／玩具风格（圆润、轻快、鲜艳、有触感）
• 编辑／杂志风格（以字体为主、比例醒目、阅读节奏鲜明）
• 粗野主义／原始风格（结构外露、毫无装饰、直面观者）
• 工业／实用主义风格（功能至上、信息密集、直截了当）

明确的意图比强烈的表现更重要。克制的处理也可能是最精准的选择；避免随意混搭无关风格。

只有缺失的选择会实质性影响结果时，才确认设计方向。不要把范围明确的工艺调整变成一场美学访谈。

4. 背景氛围

背景可以营造氛围。如果纯色有助于清晰呈现，就保持纯色；只有当纹理有助于表现预期材质或氛围时，才添加纹理。

技巧：

• 噪点／颗粒纹理；使用 background-image: url("data:image/svg+xml,...")，添加不透明度为 3-5% 的细微噪点图案，让纯色更有触感。
• 渐变网格；以较低不透明度叠加 2-3 个径向渐变，在不显浮夸的前提下营造纵深感。
• 细微图案；以 2-4% 的不透明度加入线条或几何形状，在不造成干扰的前提下增加纹理。
• 多层透明效果；在背景中叠加半透明形状，营造纵深感和氛围。

/* noise texture overlay */
.textured {
  position: relative;
}
.textured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* gradient mesh */
.atmospheric {
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(232, 114, 58, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45, 106, 79, 0.06) 0%, transparent 50%),
    #FAFAF8;
}

不要在每个界面区域都使用这些效果。将它们用于页面背景和主视觉区域。内部组件应保持简洁。

5. 工艺细节

只选择适合产品和参考对象的工艺细节。这些是可选技巧，不代表出处或质量标准：

• 颗粒纹理、噪点叠加、微妙的纸张质感
• 刻意的不完美；略微不均、仿佛手工摆放、自然有机
• 将衬线字体点缀与简洁的无衬线字体混用（不要只用其中一种）
• 构图经过精心设计而非随意拼凑的不对称布局
• 尽可能使用定制插画，而非图库图标
• 能响应光标或滚动的 SVG 元素

6. 用色彩传递情绪

色彩应营造氛围，而不只是区分元素。

• 主色 + 点缀色，而非均匀分布；一种主色主导整个页面。一种鲜明的点缀色吸引视线，突出重点。胆怯、均匀铺开的配色是 Agent 的默认选择。大胆决定：别人会记住的那一种颜色是什么？
• 吉卜力工作室配色：温暖的土色调、饱和的天空蓝、森林绿
• Pantone 色卡般的能量：具体、用心命名
• 避免：灰底白字的企业虚无感、深色背景搭配霓虹色的“开发者工具”风格
• 深色模式应营造舒适感（深靛蓝、暖黑），而非冷冰冰的感觉

具体配方：

• 暖色浅色模式：背景 #FAFAF8（而非纯白），文字 #1A1A1A（而非纯黑），点缀色 #E8723A（暖橙色）或 #2D6A4F（森林绿）
• 舒适的深色模式：背景 #1C1917（暖黑，而非 zinc-900），文字 #E7E5E4，点缀色 #F59E0B（琥珀色）或 #818CF8（柔和靛蓝）
• 插画风格数据配色（暖色调，请在具体使用中确认系列区分度和对比度）：#E8723A、#2D6A4F、#D4A373、#588157、#BC6C25；大地色系；仅凭十六进制值无法确定是否符合无障碍要求
• 数据可视化配色（冷色调）：#3B82F6、#8B5CF6、#06B6D4、#6366F1、#14B8A6；有科技感，但不冰冷
• 状态颜色：成功 #16A34A（而非霓虹绿），警告 #D97706（而非黄色），错误 #DC2626（而非粉色），信息 #2563EB
• 渐变（微妙，而非艳俗）：暖色区块使用 from-amber-50 to-orange-50，冷色区块使用 from-slate-50 to-blue-50；仅用于背景，绝不用于文字

7. 以字体塑造个性

在任何人读到文字之前，字体就已传达个性。

• 强烈混搭不同字重（纤细的标题搭配粗壮的正文，或反过来）
• 标题可考虑使用展示字体；不要只用系统字体
• 字距和行高是设计决策，而非默认设置
• 数据和代码使用等宽字体，但要让它显得经过刻意设计（而不是“忘了给这里加样式”）

参考对象（请研究）

产品 / 实体

• Teenage Engineering；将产品打造为令人向往的物件，精心设计每一处表面
• Panic / Playdate；让每次互动都充满乐趣，将惊喜与愉悦作为核心价值
• Nothing Phone；用字符图案和透明设计，让科技更有人情味

数字产品

• Perplexity 营销页面；自信的留白、编辑感、插画
• Linear 更新日志；兼具信息密度与精致工艺，每个细节都经过考量
• Vercel 发布页面；动效、戏剧感、自信的字体设计
• Raycast；将命令面板打造成一种艺术形式
• Arc Browser；将侧边栏作为表达方式

视觉语言

• 早期 Apple 广告（Think Different 时代）；简洁而有灵魂
• 吉卜力工作室的色彩调校；温暖、贴近生活、自然光感
• 独立游戏界面（Celeste、Hollow Knight、Slay the Spire）；让每个像素都充满个性
• Poolsuite / Poolsuite FM；复古未来主义，将怀旧作为设计语言

结合具体情境审视以下模式

• 为了玻璃拟态而使用玻璃拟态（模糊 ≠ 设计）
• 用霓虹渐变代替个性
• 带投影的通用卡片网格
• 未经审视的框架默认样式，与产品预期相冲突
• 把“简洁现代”当作完整的设计简报
• 无法说明产品特点的通用图片
• 到处都是 gray-200 背景和 gray-300 边框
• 未经定制的 Tailwind 默认样式
• 千篇一律的首屏区块（标题 + 副标题 + CTA + 产品模型图）
• 与意义无关的动画（旋转的 logo、漂浮的图形）

在 ADS 中审查

对照原始简报检查选定角色，并保留已有的有效设计。检查可读性、主要操作、真实准确的错误状态和空状态文案、响应式布局，以及实际存在的动效。移除与内容争夺注意力的装饰。纹理、多种字体、动画和隐藏彩蛋都不是验收要求。

记录通过的示例，说明其有效的具体原因及实际审批状态。对反馈进行分类：明确偏好、项目决策、重复缺陷或单次修正。只有在理由充分时才更新现有负责人；不要在每次构建后都添加永久规则。