@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/design-system-generator.md

@@ -0,0 +1,285 @@
+# Design System Generator
+
+根据产品类型和行业自动生成完整设计系统的指南。
+
+---
+
+## 设计系统生成流程
+
+```
+1. 识别产品类型/行业
+       ↓
+2. 选择 UI 风格 (→ ui-styles-full.md)
+       ↓
+3. 选择颜色调色板 (→ color-palettes-full.md)
+       ↓
+4. 选择字体配对 (→ font-pairings-full.md)
+       ↓
+5. 定义间距系统
+       ↓
+6. 定义圆角系统
+       ↓
+7. 定义阴影系统
+       ↓
+8. 生成 CSS 变量
+```
+
+---
+
+## 行业 → 设计系统映射
+
+### SaaS / 技术产品
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Minimalism, Glassmorphism, Bento Grid |
+| 调色板 | Modern SaaS Blue (#3B82F6), Purple Tech (#8B5CF6) |
+| 字体 | Plus Jakarta Sans, Inter, Satoshi |
+| 圆角 | 8-12px (现代感) |
+| 阴影 | 轻柔阴影 |
+
+### 电商 / 零售
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Flat Design 2.0, Minimalism |
+| 调色板 | Classic E-commerce (#DC2626), Fashion Luxury (#000000) |
+| 字体 | Montserrat, Poppins, Lato |
+| 圆角 | 4-8px (产品聚焦) |
+| 阴影 | 卡片阴影 |
+
+### 医疗 / 健康
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Minimalism, Scandinavian Design |
+| 调色板 | Medical Trust (#0EA5E9), Calm Wellness (#5EEAD4) |
+| 字体 | Rubik, Open Sans, Lato |
+| 圆角 | 8-16px (柔和感) |
+| 阴影 | 极轻阴影 |
+
+### 金融 / 银行
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Corporate Modern, Swiss Design |
+| 调色板 | Traditional Bank (#1E3A5F), Modern Fintech (#6366F1) |
+| 字体 | Merriweather + Source Sans Pro, IBM Plex Sans |
+| 圆角 | 4-8px (专业感) |
+| 阴影 | 微妙阴影 |
+
+### 创意 / 作品集
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Brutalism, Neo-Brutalism, Maximalism |
+| 调色板 | Bold Creative (#EC4899), Warm Creative (#F97316) |
+| 字体 | Clash Display, Bebas Neue, Anton |
+| 圆角 | 0px 或 24px+ (极端选择) |
+| 阴影 | 硬阴影或无阴影 |
+
+### 游戏 / 娱乐
+
+| 维度 | 推荐选择 |
+|------|----------|
+| UI 风格 | Cyberpunk, Vaporwave, Pixel Art |
+| 调色板 | Gaming Dark (#7C3AED), Neon Cyberpunk (#00FF00) |
+| 字体 | Orbitron, Press Start 2P, Bebas Neue |
+| 圆角 | 0-4px (锐利) 或 16px+ (圆润) |
+| 阴影 | 霓虹发光效果 |
+
+---
+
+## 间距系统 (Spacing Scale)
+
+基于 4px 基础单位的间距系统：
+
+```css
+:root {
+  --space-0: 0;
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-5: 1.25rem;  /* 20px */
+  --space-6: 1.5rem;   /* 24px */
+  --space-8: 2rem;     /* 32px */
+  --space-10: 2.5rem;  /* 40px */
+  --space-12: 3rem;    /* 48px */
+  --space-16: 4rem;    /* 64px */
+  --space-20: 5rem;    /* 80px */
+  --space-24: 6rem;    /* 96px */
+}
+```
+
+---
+
+## 圆角系统 (Border Radius)
+
+```css
+:root {
+  --radius-none: 0;
+  --radius-sm: 0.125rem;   /* 2px */
+  --radius-md: 0.375rem;   /* 6px */
+  --radius-lg: 0.5rem;     /* 8px */
+  --radius-xl: 0.75rem;    /* 12px */
+  --radius-2xl: 1rem;      /* 16px */
+  --radius-3xl: 1.5rem;    /* 24px */
+  --radius-full: 9999px;   /* 圆形 */
+}
+```
+
+### 圆角风格指南
+
+| 风格 | 推荐圆角 |
+|------|----------|
+| 锐利/专业 | 0-4px |
+| 现代/平衡 | 6-12px |
+| 柔和/友好 | 12-24px |
+| 圆润/可爱 | 24px+ |
+
+---
+
+## 阴影系统 (Box Shadow)
+
+```css
+:root {
+  /* 轻柔阴影 (SaaS/现代) */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* 硬阴影 (Brutalism) */
+  --shadow-brutal-sm: 2px 2px 0 #000;
+  --shadow-brutal-md: 4px 4px 0 #000;
+  --shadow-brutal-lg: 8px 8px 0 #000;
+
+  /* 发光效果 (Cyberpunk/Gaming) */
+  --shadow-glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
+  --shadow-glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5);
+  --shadow-glow-green: 0 0 20px rgba(0, 255, 0, 0.5);
+
+  /* Neumorphism */
+  --shadow-neu-light: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+  --shadow-neu-dark: 8px 8px 16px #1a1a2e, -8px -8px 16px #2a2a4e;
+}
+```
+
+---
+
+## 完整设计系统模板
+
+```css
+:root {
+  /* ===== 颜色系统 ===== */
+  --color-primary: #3B82F6;
+  --color-primary-hover: #2563EB;
+  --color-primary-active: #1D4ED8;
+
+  --color-secondary: #1E40AF;
+  --color-accent: #F59E0B;
+
+  --color-background: #F8FAFC;
+  --color-surface: #FFFFFF;
+  --color-surface-elevated: #FFFFFF;
+
+  --color-text-primary: #1E293B;
+  --color-text-secondary: #64748B;
+  --color-text-muted: #94A3B8;
+
+  --color-border: #E2E8F0;
+  --color-divider: #F1F5F9;
+
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #0EA5E9;
+
+  /* ===== 字体系统 ===== */
+  --font-display: 'Plus Jakarta Sans', sans-serif;
+  --font-body: 'Plus Jakarta Sans', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
+  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
+  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
+  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
+  --text-4xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
+
+  /* ===== 间距系统 ===== */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* ===== 圆角系统 ===== */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* ===== 阴影系统 ===== */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+  /* ===== 过渡系统 ===== */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+
+  /* ===== Z-Index 系统 ===== */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+```
+
+---
+
+## 设计决策记录模板
+
+```markdown
+## 设计系统决策
+
+**产品类型**: [SaaS/电商/医疗/金融/创意/游戏]
+**目标用户**: [描述]
+**品牌调性**: [专业/友好/大胆/优雅/有趣]
+
+### 选择理由
+
+**UI 风格**: [选择]
+- 理由: [为什么选择这个风格]
+
+**颜色调色板**: [选择]
+- 理由: [为什么选择这个调色板]
+
+**字体配对**: [选择]
+- 理由: [为什么选择这个字体组合]
+
+**圆角风格**: [数值]
+- 理由: [为什么选择这个圆角大小]
+
+### 关键技术
+
+- [使用的特殊 CSS 技术]
+- [动画/过渡效果]
+- [响应式策略]
+
+### 定制说明
+
+- [如何根据品牌调整]
+```