SuperDesign - 前端 UI 设计指南

# 前端设计技能\n\n在创建 UI 组件、落地页、仪表盘或任何前端设计工作时使用本技能。\n\n## 设计工作流\n\n遵循以下结构化的 UI 设计流程：\n\n- 布局设计 — 思考组件结构，绘制 ASCII 线框图\n- 主题设计 — 定义配色、字体、间距、阴影\n- 动画设计 — 规划微交互和过渡效果\n- 实现 — 生成实际代码\n\n### 1. 布局设计\n\n编码前，用 ASCII 格式草绘布局：\n\n```\n┌─────────────────────────────────────┐\n│ HEADER / NAV BAR │\n├─────────────────────────────────────┤\n│ │\n│ HERO SECTION │\n│ (Title + CTA) │\n│ │\n├─────────────────────────────────────┤\n│ FEATURE │ FEATURE │ FEATURE │\n│ CARD │ CARD │ CARD │\n├─────────────────────────────────────┤\n│ FOOTER │\n└─────────────────────────────────────┘\n``\n\n### 2. 主题指南\n\n#### 配色规则：\n\n- 勿使用通用的 Bootstrap 风格蓝色 (#007bff) — 该颜色已显陈旧\n- 建议使用 oklch() 定义现代配色\n- 使用语义化的颜色变量（--primary、--secondary、--muted 等）\n- 从一开始就考虑光暗模式\n\n#### 字体选择（Google Fonts）：\n\n- 无衬线：Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk\n- 等宽字体：JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono\n- 衬线：Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville\n- 显示字体：Architects Daughter, Oxanium\n\n#### 间距与阴影：\n\n- 使用统一的间距尺度（基准 0.25rem）\n- 阴影应保持柔和 — 避免使用沉重的投影\n- 阴影颜色亦可使用 oklch()\n\n### 3. 主题模式\n\n#### 现代暗色模式（Vercel/Linear 风格）：\n\n`css\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.970 0 0);\n --muted: oklch(0.970 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --border: oklch(0.922 0 0);\n --radius: 0.625rem;\n --font-sans: Inter, system-ui, sans-serif;\n}\n`\n\n#### 新粗野主义（90 年代网络复兴）：\n\n`css\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0 0 0);\n --primary: oklch(0.649 0.237 26.97);\n --secondary: oklch(0.968 0.211 109.77);\n --accent: oklch(0.564 0.241 260.82);\n --border: oklch(0 0 0);\n --radius: 0px;\n --shadow: 4px 4px 0px 0px hsl(0 0% 0%);\n --font-sans: DM Sans, sans-serif;\n --font-mono: Space Mono, monospace;\n}\n`\n\n#### 玻璃拟态（Glassmorphism）：\n\n`css\n.glass {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 1rem;\n}\n`\n\n### 4. 动画指南\n\n#### 规划的微语法：\n\n`\nbutton: 150ms [S1→0.95→1] press\nhover: 200ms [Y0→-2, shadow↗]\nfadeIn: 400ms ease-out [Y+20→0, α0→1]\nslideIn: 350ms ease-out [X-100→0, α0→1]\nbounce: 600ms [S0.95→1.05→1]\n`\n\n#### 常见模式：\n\n- 入场动画：300-500ms，ease-out\n- 悬停状态：150-200ms\n- 按钮按下：100-150ms\n- 页面切换：300-400ms\n\n### 5. 实现规范\n\n#### Tailwind CSS：\n\n`html\n\n\n`\n\n#### Flowbite（组件库）：\n\n`html\n\n\n`\n\n#### 图标（Lucide）：\n\n`html\n\n\n`\n\n#### 图片：\n\n- 使用真实的占位图服务：Unsplash、placehold.co\n- 切勿伪造图片 URL\n- 示例：https://images.unsplash.com/photo-xxx?w=800&h=600\n\n### 6. 响应式设计\n\n始终采用移动优先的响应式设计：\n\n`css\n/ Mobile first /\n.container { padding: 1rem; }\n\n/ Tablet /\n@media (min-width: 768px) {\n .container { padding: 2rem; }\n}\n\n/ Desktop /\n@media (min-width: 1024px) {\n .container { max-width: 1200px; margin: 0 auto; }\n}\n``\n\n### 7. 可访问性\n\n- 使用语义化 HTML（header、main、nav、section、article）\n- 正确的标题层级（h1 → h2 → h3）\n- 为交互元素添加 aria-label\n- 确保颜色对比度符合最低 4.5:1\n- 支持键盘导航\n\n### 8. 组件设计要点\n\n#### 卡片（Cards）：\n\n- 阴影柔和，避免沉重投影\n- 保持一致的内边距（p-4 至 p-6）\n- 悬停状态：轻微提升并增强阴影\n\n#### 按钮（Buttons）：\n\n- 明确的视觉层级（primary、secondary、ghost）\n- 触控目标尺寸不少于 44x44px\n- 包含加载和禁用状态\n\n#### 表单（Forms）：\n\n- 标签置于输入框上方\n- 明显的焦点状态\n- 行内校验反馈\n- 字段之间留有足够间距\n\n#### 导航（Navigation）：\n\n- 长页面使用固定头部\n- 明确的激活状态指示\n- 移动端友好的汉堡菜单\n\n## 快速参考\n\n| 元素 | 推荐方案 |\n|------|----------|\n| 主字体 | Inter, Outfit, DM Sans |\n| 代码字体 | JetBrains Mono, Fira Code |\n| 圆角 | 0.5rem - 1rem（现代），0（粗野） |\n| 阴影 | 柔和，最多 1-2 层 |\n| 间距 | 4px 基础单元（0.25rem） |\n| 动画 | 150-400ms，ease-out |\n| 颜色 | 使用 oklch()，避免通用蓝色 |\n\n基于 SuperDesign 模式 — https://superdesign.dev