@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/industry-anti-patterns.md

@@ -0,0 +1,281 @@
+# Industry-Specific Anti-Patterns
+
+行业特定的设计禁忌，避免不专业的视觉效果。
+
+---
+
+## 🔴 核心原则
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  行业反模式黄金法则                                               │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 每个行业有特定的视觉语言和用户期望                            │
+│  ✅ 违反行业惯例会降低用户信任度                                  │
+│  ✅ 先查阅行业反模式，再开始设计                                  │
+│  ❌ 不要将游戏风格用于医疗应用                                    │
+│  ❌ 不要将可爱风格用于金融产品                                    │
+│  ❌ 不要将深色模式用于需要信任感的行业                            │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## SaaS / 技术产品
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Minimalism, Glassmorphism, Bento Grid |
+| **配色** | 蓝紫渐变, 冷色调, 高对比度 |
+| **字体** | Plus Jakarta Sans, Inter, Satoshi |
+| **圆角** | 8-12px (现代感) |
+| **效果** | 微妙渐变, 玻璃效果, 平滑过渡 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 过度装饰性字体 | 降低专业感 |
+| 霓虹色/荧光色 | 不适合商务场景 |
+| 过多动画 (>3个同时) | 分散注意力 |
+| 卡通图标/插图 | 降低可信度 |
+| 纯黑背景 (#000) | 过于生硬 |
+| 彩虹渐变 | 看起来不专业 |
+
+---
+
+## 电商 / 零售
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Flat Design 2.0, Minimalism |
+| **配色** | 品牌色为主, 红/橙促销色 |
+| **字体** | Montserrat, Poppins, Lato |
+| **圆角** | 4-8px (产品聚焦) |
+| **效果** | 产品阴影, 悬停放大, 快速过渡 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 深色模式作为默认 | 产品颜色失真 |
+| 过小的产品图 | 无法看清细节 |
+| 复杂的导航结构 | 增加购买阻力 |
+| 自动播放视频 | 干扰购物体验 |
+| 过多弹窗 | 用户反感 |
+| 隐藏价格信息 | 降低信任度 |
+
+---
+
+## 医疗 / 健康
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Minimalism, Scandinavian Design |
+| **配色** | 蓝色(信任), 绿色(健康), 白色(洁净) |
+| **字体** | Rubik, Open Sans, Lato |
+| **圆角** | 8-16px (柔和感) |
+| **效果** | 平滑过渡, 呼吸动画, 柔和阴影 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 红色作为主色 | 联想到危险/血液 |
+| 深色/暗黑模式 | 不适合医疗场景 |
+| 锐利的边角 | 感觉不友好 |
+| 复杂的动画 | 可能引起不适 |
+| 霓虹色/荧光色 | 不专业 |
+| 卡通/可爱风格 | 降低专业信任 |
+| 过小的字体 (<16px) | 老年用户难以阅读 |
+
+---
+
+## 金融 / 银行
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Corporate Modern, Swiss Design |
+| **配色** | 深蓝(信任), 金色(财富), 绿色(增长) |
+| **字体** | Merriweather, IBM Plex Sans, Source Sans Pro |
+| **圆角** | 4-8px (专业感) |
+| **效果** | 微妙阴影, 数据可视化, 精确动画 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 鲜艳的霓虹色 | 不严肃 |
+| 卡通图标 | 降低信任度 |
+| 过度动画 | 感觉不稳重 |
+| 不对称布局 | 感觉不精确 |
+| 手写字体 | 不专业 |
+| 模糊的数字显示 | 财务数据必须清晰 |
+| 隐藏重要信息 | 法规要求透明 |
+
+---
+
+## 美容 / SPA / 健康
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Soft UI, Organic Design |
+| **配色** | 柔粉(#E8B4B8), 鼠尾草绿(#A8D5BA), 金色(#D4AF37) |
+| **字体** | Cormorant Garamond, Montserrat |
+| **圆角** | 12-24px (柔和感) |
+| **效果** | 柔和阴影, 渐变过渡, 呼吸动画 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 明亮霓虹色 | 破坏放松氛围 |
+| 生硬/快速动画 | 感觉不平静 |
+| 深色模式 | 不适合美容行业 |
+| AI紫粉渐变 | 看起来廉价 |
+| 锐利边角 | 感觉不柔和 |
+| 过多文字 | 应以视觉为主 |
+
+---
+
+## 创意 / 作品集
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Brutalism, Neo-Brutalism, Maximalism |
+| **配色** | 大胆对比, 非传统组合 |
+| **字体** | Clash Display, Bebas Neue, Anton |
+| **圆角** | 0px 或 24px+ (极端选择) |
+| **效果** | 硬阴影, 大胆动画, 视差滚动 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 模板化布局 | 缺乏创意 |
+| 安全的配色 | 不够独特 |
+| 标准字体 (Arial, Roboto) | 太普通 |
+| 过度一致性 | 缺乏个性 |
+| 库存图片 | 不够原创 |
+
+---
+
+## 游戏 / 娱乐
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Cyberpunk, Vaporwave, Pixel Art |
+| **配色** | 霓虹色, 高对比, 发光效果 |
+| **字体** | Orbitron, Press Start 2P, Bebas Neue |
+| **圆角** | 0-4px (锐利) 或 16px+ (圆润) |
+| **效果** | 霓虹发光, 故障效果, 粒子动画 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 企业风格 | 太无聊 |
+| 柔和色调 | 缺乏能量 |
+| 衬线字体 | 不够现代 |
+| 静态界面 | 缺乏互动感 |
+| 过多文字 | 应以视觉为主 |
+
+---
+
+## 餐饮 / 食品
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Organic Design, Retro/Vintage |
+| **配色** | 暖色调(橙/红/棕), 自然色 |
+| **字体** | Playfair Display, Lora, Josefin Sans |
+| **圆角** | 8-16px |
+| **效果** | 食物摄影, 温暖滤镜, 微妙动画 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 蓝色作为主色 | 抑制食欲 |
+| 冷色调 | 食物看起来不新鲜 |
+| 过度处理的图片 | 食物看起来不真实 |
+| 小尺寸食物图 | 无法展示细节 |
+| 复杂的导航 | 用户想快速找到菜单 |
+
+---
+
+## 教育 / 学习
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Friendly Modern, Illustrated |
+| **配色** | 明亮但不刺眼, 多彩但协调 |
+| **字体** | Nunito, Quicksand, Poppins |
+| **圆角** | 12-20px (友好感) |
+| **效果** | 进度动画, 成就反馈, 引导动画 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 深色模式作为默认 | 长时间阅读疲劳 |
+| 过小字体 | 阅读困难 |
+| 复杂布局 | 分散学习注意力 |
+| 过多动画 | 干扰学习 |
+| 缺乏进度指示 | 用户不知道学习进度 |
+
+---
+
+## Web3 / NFT / 加密
+
+### 推荐
+| 维度 | 推荐选择 |
+|------|----------|
+| **风格** | Cyberpunk, Glassmorphism, 3D |
+| **配色** | 紫色渐变, 霓虹蓝, 深色背景 |
+| **字体** | Space Grotesk, Outfit, Syne |
+| **圆角** | 12-24px |
+| **效果** | 3D元素, 渐变动画, 粒子效果 |
+
+### ❌ 禁止
+| 禁止项 | 原因 |
+|--------|------|
+| 传统企业风格 | 不符合社区文化 |
+| 过于保守的配色 | 缺乏创新感 |
+| 静态设计 | 缺乏科技感 |
+| 复杂的入门流程 | 新用户流失 |
+
+---
+
+## 快速查询表
+
+| 行业 | 禁止主色 | 禁止风格 | 禁止效果 |
+|------|----------|----------|----------|
+| **医疗** | 红色, 黑色 | 深色模式, 卡通 | 快速动画 |
+| **金融** | 霓虹色 | 卡通, 手写 | 过度动画 |
+| **美容** | 霓虹色 | 深色模式 | 生硬动画 |
+| **餐饮** | 蓝色 | 冷色调 | 过度滤镜 |
+| **游戏** | 柔和色 | 企业风格 | 静态界面 |
+| **教育** | - | 深色默认 | 过多动画 |
+| **电商** | - | 深色默认 | 自动播放 |
+
+---
+
+## 使用方法
+
+1. **识别行业**: 确定产品所属行业
+2. **查阅禁忌**: 阅读该行业的"禁止"列表
+3. **检查设计**: 确保设计不违反任何禁忌
+4. **交叉验证**: 如果产品跨行业，取交集
+
+```markdown
+## 设计检查清单
+
+**产品行业**: [填写]
+
+### 行业禁忌检查
+- [ ] 未使用禁止的主色
+- [ ] 未使用禁止的风格
+- [ ] 未使用禁止的效果
+- [ ] 符合行业用户期望
+```