{
  "version": "1.0.0",
  "category": "core",
  "name": "Core Design Systems",
  "families": [
    {
      "id": "core-flatDesign",
      "familyId": "flatDesign",
      "category": "core",
      "title": {
        "zh-CN": "平面设计系统",
        "en-US": "Flat Design System"
      },
      "description": {
        "zh-CN": "简洁高效的扁平系统，无阴影或渐变，强谾内容优先和简洁美学。通过极简布局、清晰排版和必要元素的精心选择创造现代化介面。适合当代应用和用户友好的训讈，体现\"少即是多\"的哲学。通过清晰的排版、去除阴影和渐变效果，强调内容优先。采用简洁高效的设计理念，创造现代化扁平设计系统，提供全面的视觉指导和系统化组件建议。",
        "en-US": "Clean and efficient flat design system with no shadows or gradients, emphasizing content and creating immersive and engaging digital experiences through thoughtful design principles, modern aesthetics, and user-centered approach to interface development Ideal for web and mobile applications requiring clean interfaces and rapid development Emphasizes usability through clear visual hierarchy and intuitive interaction patterns This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. modern simplicity and content-focused clarity."
      },
      "tags": [
        "contemporary",
        "flat",
        "minimal",
        "bold",
        "colorful"
      ],
      "templatesCount": 3,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「扁平化（Flat Design）」核心样式卡展示界面风格高度接近的 Flat Design 风格 UI。\n请使用 TailwindCSS 创建一个扁平化（Flat Design）风格的界面，使用纯色和简洁几何形状，完全去除阴影、渐变和纹理等装饰效果。\n\n**核心设计要求**\n\n1. **零装饰原则**\n   - 完全移除阴影: box-shadow: none;\n   - 禁用渐变: 仅使用纯色背景（background: #3498db;）\n   - 无纹理效果: 保持纯色平面，不使用 background-image\n   - 无边框或极简边框: border: none; 或 border: 1px solid #ecf0f1;\n\n2. **纯色配色系统**\n   - 主色使用纯色: background: #3498db;（不使用 rgba 或 gradient）\n   - 高对比度配色: 白底黑字 (#ffffff + #2c3e50) 或深底白字 (#2c3e50 + #ffffff)\n   - 色彩分块明确: 每个区域使用单一纯色，边界清晰\n   - 颜色即层级: 通过颜色深浅区分重要性，而非阴影深度\n\n3. **简洁几何形状**\n   - 统一圆角: border-radius: 4px;（小圆角）或 8px（中圆角）\n   - 矩形为主: 使用 <div> 矩形容器承载内容\n   - 圆形图标: border-radius: 50%;（头像、按钮）\n   - 直线分隔: border-bottom: 1px solid #ecf0f1;（替代阴影）\n\n4. **视觉层次建立**\n   - 颜色对比: 使用不同亮度的颜色区分层级（#3498db 主按钮 vs #95a5a6 次要按钮）\n   - 尺寸对比: font-size: 24px（标题）vs 16px（正文）vs 14px（辅助文字）\n   - 留白分隔: padding: 24px; margin: 16px;（用留白代替边框）\n   - 排版层次: font-weight: 700（重要）vs 400（常规）vs 300（轻量）\n\n5. **大胆色彩应用**\n   - 鲜明主色: #3498db（蓝）, #e74c3c（红）, #2ecc71（绿）, #f39c12（黄）\n   - 冷暖对比: 蓝色系（#3498db, #2980b9）vs 橙色系（#e67e22, #d35400）\n   - 有限色板: 每个界面使用 2-4 种主要颜色\n   - 中性色辅助: #ecf0f1（浅灰背景）, #2c3e50（深灰文字）\n\n**配色方案（鲜明纯色）**\n\n主色调：\n- 蓝色: #3498db, #2980b9\n- 红色: #e74c3c, #c0392b\n- 绿色: #2ecc71, #27ae60\n- 黄色: #f39c12, #f1c40f\n\n中性色：\n- 深灰: #2c3e50, #34495e\n- 浅灰: #ecf0f1, #bdc3c7\n- 纯白: #ffffff\n- 纯黑: #000000\n\n强调色：\n- 紫色: #9b59b6, #8e44ad\n- 橙色: #e67e22, #d35400\n- 青色: #1abc9c, #16a085\n\n**关键 CSS 类示例**\n\n\\`\\`\\`css\n/* 扁平化按钮 */\n.flat-button {\n  background: #3498db;\n  color: #ffffff;\n  border: none;\n  border-radius: 4px;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n  box-shadow: none; /* 关键：无阴影 */\n}\n\n.flat-button:hover {\n  background: #2980b9; /* 仅改变颜色 */\n}\n\n.flat-button:active {\n  background: #21618c; /* 按下时更深 */\n}\n\n/* 扁平化卡片 */\n.flat-card {\n  background: #ffffff;\n  border: 1px solid #ecf0f1;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: none; /* 关键：无阴影 */\n}\n\n/* 扁平化导航栏 */\n.flat-navbar {\n  background: #2c3e50;\n  color: #ffffff;\n  padding: 16px 24px;\n  border-bottom: 3px solid #3498db; /* 使用彩色边框代替阴影 */\n}\n\n/* 扁平化输入框 */\n.flat-input {\n  background: #ecf0f1;\n  border: 2px solid #bdc3c7;\n  border-radius: 4px;\n  padding: 12px 16px;\n  font-size: 16px;\n  transition: border-color 0.2s ease;\n  box-shadow: none;\n}\n\n.flat-input:focus {\n  border-color: #3498db;\n  outline: none;\n}\n\\`\\`\\`\n\n**图标系统**\n- 使用线性图标（Feather Icons、Heroicons）\n- 统一线宽: stroke-width: 2px;\n- 单色填充: color: #3498db; 或 fill: #3498db;\n- 尺寸统一: width: 24px; height: 24px;\n\n**重要提示**\n- 绝对不使用 box-shadow（扁平化的核心特征）\n- 所有背景必须是纯色，不使用渐变\n- 通过颜色对比和留白建立层次，而非视觉深度\n- 保持高对比度，确保文字可读性（WCAG AA 标准）\n- 交互反馈仅通过颜色变化，不使用阴影或位移\n\n\n---",
        "en-US": "Please create a Flat Design style interface using TailwindCSS, with solid colors and simple geometric shapes, completely removing shadows, gradients, and textures.\n\n**Core Design Requirements**\n\n1. **Zero Decoration Principle**\n   - Completely remove shadows: box-shadow: none;\n   - No gradients: Use only solid colors (background: #3498db;)\n   - No textures: Keep solid color planes, no background-image\n   - No borders or minimal borders: border: none; or border: 1px solid #ecf0f1;\n\n2. **Solid Color System**\n   - Primary colors as solid: background: #3498db; (no rgba or gradient)\n   - High contrast pairing: White bg + dark text (#ffffff + #2c3e50) or dark bg + white text\n   - Clear color blocks: Each area uses single solid color with clear boundaries\n   - Color as hierarchy: Use color depth for importance, not shadow depth\n\n3. **Simple Geometric Shapes**\n   - Unified border radius: border-radius: 4px; (small) or 8px (medium)\n   - Rectangle dominant: Use <div> rectangular containers\n   - Circular icons: border-radius: 50%; (avatars, buttons)\n   - Straight dividers: border-bottom: 1px solid #ecf0f1; (replace shadows)\n\n4. **Visual Hierarchy Establishment**\n   - Color contrast: Different brightness for hierarchy (#3498db primary vs #95a5a6 secondary)\n   - Size contrast: font-size: 24px (heading) vs 16px (body) vs 14px (auxiliary)\n   - Whitespace separation: padding: 24px; margin: 16px; (replace borders)\n   - Typography hierarchy: font-weight: 700 (important) vs 400 (regular) vs 300 (light)\n\n5. **Bold Color Application**\n   - Vivid primary colors: #3498db (blue), #e74c3c (red), #2ecc71 (green), #f39c12 (yellow)\n   - Warm/cool contrast: Blue (#3498db, #2980b9) vs Orange (#e67e22, #d35400)\n   - Limited palette: Use 2-4 main colors per interface\n   - Neutral support: #ecf0f1 (light gray bg), #2c3e50 (dark gray text)\n\n**Color Scheme (Vivid Solid Colors)**\n\nPrimary colors:\n- Blue: #3498db, #2980b9\n- Red: #e74c3c, #c0392b\n- Green: #2ecc71, #27ae60\n- Yellow: #f39c12, #f1c40f\n\nNeutral colors:\n- Dark gray: #2c3e50, #34495e\n- Light gray: #ecf0f1, #bdc3c7\n- Pure white: #ffffff\n- Pure black: #000000\n\nAccent colors:\n- Purple: #9b59b6, #8e44ad\n- Orange: #e67e22, #d35400\n- Teal: #1abc9c, #16a085\n\n**Key CSS Class Examples**\n\n\\`\\`\\`css\n/* Flat Button */\n.flat-button {\n  background: #3498db;\n  color: #ffffff;\n  border: none;\n  border-radius: 4px;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n  box-shadow: none; /* Key: no shadow */\n}\n\n.flat-button:hover {\n  background: #2980b9; /* Only change color */\n}\n\n.flat-button:active {\n  background: #21618c; /* Darker when pressed */\n}\n\n/* Flat Card */\n.flat-card {\n  background: #ffffff;\n  border: 1px solid #ecf0f1;\n  border-radius: 8px;\n  padding: 24px;\n  box-shadow: none; /* Key: no shadow */\n}\n\n/* Flat Navbar */\n.flat-navbar {\n  background: #2c3e50;\n  color: #ffffff;\n  padding: 16px 24px;\n  border-bottom: 3px solid #3498db; /* Use colored border instead of shadow */\n}\n\n/* Flat Input */\n.flat-input {\n  background: #ecf0f1;\n  border: 2px solid #bdc3c7;\n  border-radius: 4px;\n  padding: 12px 16px;\n  font-size: 16px;\n  transition: border-color 0.2s ease;\n  box-shadow: none;\n}\n\n.flat-input:focus {\n  border-color: #3498db;\n  outline: none;\n}\n\\`\\`\\`\n\n**Icon System**\n- Use linear icons (Feather Icons, Heroicons)\n- Uniform stroke width: stroke-width: 2px;\n- Single color fill: color: #3498db; or fill: #3498db;\n- Uniform size: width: 24px; height: 24px;\n\n**Important Notes**\n- Absolutely no box-shadow (core characteristic of flat design)\n- All backgrounds must be solid colors, no gradients\n- Establish hierarchy through color contrast and whitespace, not visual depth\n- Maintain high contrast for text readability (WCAG AA standard)\n- Interaction feedback only through color changes, no shadows or translations"
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名追求信息清晰与界面效率的产品设计师，负责为 B 端后台、营销落地页和工具型产品设计扁平化（Flat Design）风格界面。你需要用通俗但专业的语言，向团队说明 Flat Design 家族的视觉原则和使用边界。\n\n场景定位：扁平化家族适合希望界面「直接、干净、易读」的产品场景，例如企业控制台、数据看板、SaaS 营销页和教育平台等。它强调内容本身，而不是界面装饰；目标是让用户迅速理解信息结构和操作路径，而不会被复杂质感或动画分散注意力。\n\n视觉设计理念：Flat Design 的核心是「用色块和排版替代阴影和质感」。界面抛弃了体积感和真实材质，只保留简单几何、纯色背景和清晰的对比关系。层级不再依赖投影和立体结构，而是通过字号、粗细、颜色深浅和留白来表达；按钮只是颜色不同的矩形，而不是有厚度的实体按键。整体画面更接近信息设计海报，而不是实物场景。\n\n材质与质感：在扁平化家族中，材质几乎被压缩到「一层纯色平面」，阴影、渐变、纹理大幅减少甚至完全禁用。大色块之间用清晰的边界和对比形成节奏：主色块承载关键信息，浅色背景为内容留出呼吸空间，深色文字确保可读性。少量线性图标取代复杂插画，轮廓干净，线宽统一，使整个界面看起来轻盈、现代且易扩展。\n\n交互体验：交互反馈以颜色变化为主，而不是位置或形状的大幅改变。按钮在悬停时稍微变深或变亮，文字可微调色值或出现下划线，但不会突然产生阴影或立体效果。状态变化通过色块的切换、标签高亮和简单的过渡来表达，动效时间通常较短，曲线简单，目的是让用户迅速感知状态变化而不产生额外认知负担。\n\n整体氛围：Flat Design 家族呈现的是一种轻量而理性的现代感——界面像一张排版工整的信息海报，干净、有秩序、无多余装饰。用户进入页面时，不会被复杂装饰或「质感秀」分心，而是能快速扫读标题、分区和按钮，感受到产品的效率与专业。\n\n---",
        "en-US": "Role: You are a product designer who values clarity and efficiency, responsible for creating flat-design interfaces for dashboards, marketing pages and utility products. You need to explain to the team how the Flat Design family should look and where it is most appropriate.\n\nScene: The flat family is ideal for products that need to feel direct, clean and easy to read: admin consoles, analytics dashboards, SaaS marketing sites, learning platforms and simple productivity tools. It focuses attention on content and structure rather than decoration, helping users understand layout and actions at a glance.\n\nVisual philosophy: Flat design replaces depth and texture with color blocks and typography. The interface discards volume and material realism, relying instead on simple geometry, solid backgrounds and strong contrast. Hierarchy is expressed through font size, weight, color value and whitespace rather than shadows or bevels. Buttons are simply colored rectangles, not sculpted objects. The whole UI behaves more like a well-composed information poster than a representation of physical objects.\n\nMaterial and texture: In the flat family, “material” is reduced to a single layer of solid color. Shadows, gradients and textures are minimized or removed entirely. Large areas of flat color divide the page into zones: primary hues carry key actions and highlights, light neutrals preserve breathing room and dark text maintains legibility. Linear icons with consistent stroke width replace detailed illustrations, keeping the visual language light, modern and easy to scale.\n\nInteraction experience: Interaction feedback is communicated mainly through color shifts, not dramatic movement or dimensional changes. On hover, buttons may darken or lighten slightly; text links may change tone or gain an underline, but they do not suddenly acquire glow or heavy shadows. State changes are shown through toggled fills, highlighted tabs and simple transitions, with short timings and straightforward easing so users notice what changed without being distracted.\n\nOverall mood: The Flat Design family conveys a calm, contemporary and rational mood. Interfaces feel sharp and tidy, with clear sections and minimal ornamentation. When users land on a flat-style page, they should immediately see headlines, groups and actions without visual noise, perceiving the product as efficient, focused and professional."
      }
    },
    {
      "id": "core-fluent2",
      "familyId": "fluent2",
      "category": "core",
      "title": {
        "zh-CN": "Fluent Design 2.0",
        "en-US": "Fluent Design 2.0"
      },
      "description": {
        "zh-CN": "微软最新系统，展现Acrylic和Mica材质的现代玻璃态效果。融合当代美学与功能训讈，创造精致洗练的用户体验。具有现代化材质训讈和精约优雅的视觉语言。微软最新设计系统，具备亚克力和云母材料效果，展现现代玻璃态美学和当代优雅设计。",
        "en-US": "Microsoft's latest design system featuring Acrylic and Mica materials with modern glassmorphism effects. Showcases contemporary design language with transparency, depth, and soft shadows for professional applications and translucency effects ideal for contemporary applications Designed for Microsoft ecosystem applications and modern enterprise software Combines contemporary aesthetic with functional depth for sophisticated user experiences This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. modern material design and contemporary elegance."
      },
      "tags": [],
      "templatesCount": 3,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「Fluent Design 2.0」核心样式卡展示界面风格高度接近的 Fluent 2 风格 UI。\n要求：保持整体视觉气质（浅色渐变背景 + 亚克力卡片 + Fluent 蓝）与光影 / 圆角语言基本一致，只允许替换文案、图标和具体模块内容。输出使用语义化 HTML 结构和 TailwindCSS 风格的原子类（或等价的工具类方案）。\n\n【使用场景】\n- 场景：Windows 11 风格的轻量信息面板 / 控制面板（如：小仪表板、状态总览卡片）。\n- 用户：日常使用桌面应用或 Web 控制台的知识型工作者。\n- 目标：在一个紧凑的卡片中展示标题、副标题、状态信息（进度条）和两枚主要操作按钮。\n\n【整体布局结构（参考当前 demo 卡片）】\n1. 外层容器\n   - 居中展示卡片，周围留有充足空白。\n   - 最外层背景使用浅色斜向渐变，例如：from-gray-50 via-slate-50 to-slate-100。\n2. 主卡片（Fluent 2 卡片）\n   - 最大宽度约 320–400px，左右留出固定内边距（如 p-6）。\n   - 卡片内部划分为三部分：\n     - 头部：图标方块 + 标题文本。\n     - 内容区：说明文字 + 进度条。\n     - 底部：两枚操作按钮（主按钮 + 次按钮）。\n3. 头部区域\n   - 左侧方形图标容器：40x40 像素左右，使用品牌蓝背景 + 白色图标。\n   - 右侧为标题文字，字号中等，字体加粗。\n4. 内容区\n   - 一行说明文字，描述当前状态（例如 “Windows 11 Acrylic Material”）。\n   - 一条水平进度条（高度较细），填充为从 Fluent 蓝到浅青色的线性渐变。\n5. 底部操作区\n   - 两枚按钮水平并排，主按钮使用品牌色填充，次按钮使用浅灰背景。\n\n【色彩与材质】\n1. 背景与卡片\n   - 页面背景：柔和浅色渐变，如 #f5f7fa → #e8ebf0。\n   - 卡片背景：使用半透明浅灰 + 模糊的亚克力材质：\n     - background: rgba(243,243,243,0.7)\n     - backdrop-filter: blur(30px) saturate(180%);\n2. 品牌与强调色\n   - Fluent 蓝：#0078D4 作为主按钮和图标底色。\n   - 渐变进度条：从 #0078D4 过渡到 #50E6FF。\n3. 文本颜色\n   - 标题：#242424 深灰。\n   - 正文：#605E5C 中灰。\n\n【圆角、阴影与 Fluent 2 光影语言】\n1. 圆角系统\n   - 卡片与图标容器统一使用 8px 圆角。\n   - 按钮使用 4–6px 圆角，保持柔和但不过度圆润。\n2. 阴影与高光\n   - 卡片阴影：类似 box-shadow: 0 4px 8px rgba(0,0,0,0.12)，营造轻微悬浮感。\n   - hover 时阴影加深为 0 8px 16px rgba(0,0,0,0.14)，同时可以略微上移 4px。\n3. 边框与描边光\n   - 卡片可使用一层细边框 + 外圈渐变描边高光（如当前 demo 中的 ::before 渐变边缘）。\n\n【动效与交互反馈】\n1. 动效曲线\n   - 所有 hover / active / 宽度变化使用 Fluent 曲线：\n     - cubic-bezier(0.4, 0, 0.2, 1) 或 (0.25, 0.46, 0.45, 0.94)，时长 150–300ms。\n2. 悬停效果\n   - 卡片 hover：轻微上移 + 阴影加深 + 描边高光显现。\n   - 主按钮 hover：背景色稍微加深，增加轻微阴影。\n   - 次按钮 hover：浅灰背景略微加深，增加轻微阴影。\n3. 进度条动画\n   - 进度条宽度变化应使用平滑过渡（例如 500ms），避免瞬间跳变。\n\n【输出要求】\n- 使用语义化 HTML：外层容器 + 卡片 + header / main / footer 层次清晰。\n- 使用 TailwindCSS 原子类描述布局、间距、对齐和颜色（若使用原生 CSS，可在类名中体现语义）。\n- 生成的 UI 在「浅色渐变背景 + 亚克力卡片 + Fluent 蓝按钮 + 进度条 + 双按钮布局」这些关键特征上，应与当前 Fluent 2 样式卡的 demo 界面高度接近。\n\n\n---",
        "en-US": "You are a senior UI designer and front-end engineer. Generate a Fluent Design 2 style UI that looks very close to the current “Fluent Design 2.0” core style card demo.\nKeep the overall visual character (light gradient background, acrylic card, Fluent blue accents), light and shadow language and rounded corner system essentially unchanged. You may replace text, icons and specific module content, but not the global composition or Fluent 2 visual style. Output semantic HTML and TailwindCSS-style utility classes (or an equivalent utility-first system).\n\n[Usage scenario]\n- Context: Windows 11 style lightweight information or control panel (for example a small dashboard or status overview card).\n- Users: knowledge workers using desktop apps or web consoles.\n- Goal: show a compact summary card with title, subtitle, status information (progress bar) and two main action buttons.\n\n[Layout]\n1. Center the card within a full-page light diagonal gradient background, leaving generous whitespace around it.\n2. Main card with maximum width around the current demo (roughly 320–400 pixels) and comfortable padding; internally it is divided into:\n   - Header row with square icon container on the left and title text on the right.\n   - Content row with one line of descriptive text and a thin horizontal progress bar.\n   - Footer row with two horizontally aligned buttons (primary and secondary).\n3. Icon container is a small square filled with Fluent blue and a simple white glyph; the title text sits to the right with medium size and strong weight.\n\n[Visual style]\n1. Page background uses a very soft light gradient (for example from grey to slate tones) to create depth without distraction.\n2. Card background is a semi-transparent light grey acrylic surface with noticeable blur and saturation, plus a subtle inner highlight.\n3. Use Fluent blue as the main accent for icons, primary button and part of the progress bar; extend to a lighter aqua tint at the end of the bar.\n4. Text colors are dark grey for titles and medium grey for body copy so readability stays high on light surfaces.\n\n[Corners, shadows and lighting]\n1. Use consistent 8px corner radius on card and icon container; use slightly smaller radii (around 4–6px) on buttons.\n2. Cards have a soft shadow that suggests light elevation; on hover, increase shadow and slightly shift the card upward to reinforce depth.\n3. Optionally add a subtle outer gradient border or glow around the card, similar to the current demo’s highlight edge.\n\n[Interaction]\n1. All hover and active transitions follow Fluent motion curves with durations around 150–300ms.\n2. On hover, the card lifts slightly, its shadow deepens and edge highlight becomes more visible; primary button darkens a bit and may gain a slight shadow, while the secondary button’s light grey background deepens subtly.\n3. Progress bar width changes should animate smoothly (for example around 500ms) rather than jumping instantly.\n\n[Output requirements]\n- Use semantic HTML: outer container, card, and header/main/footer-like inner structure.\n- Use Tailwind-style utility classes to describe layout, spacing, alignment and colors; if using plain CSS, ensure class names remain semantic.\n- The generated UI must preserve the recognisable traits of the current Fluent 2 core demo: light gradient background, acrylic card, Fluent blue accents, a progress bar and dual-button footer layout."
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名熟悉 Windows 11 与 Fluent 2 生态的设计师，需要向团队说明 Fluent 2 家族在本项目中的角色——既要保留微软体系的视觉 DNA，又要适应 Web 产品的实际场景。\n\n场景定位：Fluent 2 家族适用于希望界面「现代、轻盈、系统感强」的产品，例如云服务控制台、效率工具、系统设置面板和桌面应用配套 Web 端。它特别适合需要和 Windows 生态产生视觉亲和的场景，让用户一眼就感到「这和我熟悉的系统是一家人」。\n\n视觉设计理念：Fluent 2 的视觉核心是「柔和渐变背景 + 亚克力玻璃卡片 + 清晰轮廓与圆角系统」。相比旧版 Fluent，新的风格减少了多余装饰，更强调几何简洁和舒适的层次结构。页面背景通常是浅色渐变或柔和纹理，主体内容放在半透明的卡片上，边缘有细腻的高光描边或色彩渐变，让界面既有现代感又不过分炫技。\n\n材质与质感：在 Fluent 2 家族中，最具代表性的材质是「亚克力」——半透明、略微模糊、带有一定饱和度和光泽。卡片背景使用高透明度浅色叠加模糊滤镜，边缘常带一圈高光或柔和渐变，模拟光线在塑料或玻璃上的折射。按钮、图标和进度条多用 Fluent 蓝及相近色系，搭配干净的线性图标和等距圆角，使整体视觉看起来轻盈、柔和并且科技感适中。\n\n交互体验：交互强调「轻量的空间变化」而非厚重的拟物反馈。卡片在悬停时略微上浮、阴影稍深，按钮在 Hover 时颜色加深、阴影增强，但不会大幅移动或夸张弹跳。动效遵循 Fluent 常用缓动曲线，时间范围在 150–300ms 之间，让视觉反馈顺滑但不过度拖沓。进度条、切换控件和状态指示变化通常伴随柔和的宽度变化或渐变过渡，突出「系统级」的稳定与细腻。\n\n整体氛围：Fluent 2 家族营造的是一种温和、友好、现代而不过分张扬的操作系统式气质。用户进入界面时，会看到蓝色系为主的轻盈渐变背景、漂浮的亚克力卡片和熟悉的圆角按钮，感觉像在使用系统自带的控制面板或小组件，而不是随机设计的网页。它尤其适合作为「系统伴侣」或「控制中枢」类型产品的视觉基底。\n\n---",
        "en-US": "Role: You are a designer fluent in the Windows 11 / Fluent 2 ecosystem, and you need to explain how the Fluent 2 family should behave in this project—keeping Microsoft’s visual DNA while fitting real-world web product needs.\n\nScene: The Fluent 2 family suits products that want to feel modern, light and system-like: cloud dashboards, productivity tools, settings and companion web apps for desktop software. It is especially appropriate where visual affinity with the Windows environment is important, so users immediately recognise the interface as part of the same universe.\n\nVisual philosophy: Fluent 2 revolves around “soft gradients, acrylic cards and a disciplined corner/outline system.” Compared with earlier Fluent styles, it reduces ornamental detail and pushes toward clean geometry and gentle layering. Page backgrounds are usually light gradients or subtle textures; primary content lives inside semi-transparent cards with fine highlight edges or gradient strokes, making the UI look contemporary without being flashy.\n\nMaterial and texture: The signature material is acrylic—translucent, slightly blurred and mildly saturated. Cards use light, semi-transparent fills combined with backdrop blur and saturation, while edges often carry a thin ring of highlight or a color gradient to mimic light on plastic or glass. Buttons, icons and progress bars rely heavily on Fluent blue and related hues, paired with simple line-based icons and consistent rounded corners so the visual system feels airy, soft and moderately high-tech.\n\nInteraction experience: Interaction focuses on gentle spatial changes rather than heavy skeuomorphic feedback. Cards lift slightly and deepen their shadows on hover; buttons darken and gain a touch more depth, but they do not jump or bounce dramatically. Motions follow Fluent-style easing curves with durations around 150–300ms, so transitions feel smooth but not sluggish. Progress bars, toggles and state indicators tend to animate via width and color transitions, emphasising the calm, system-level refinement of Fluent rather than showy animation.\n\nOverall mood: The Fluent 2 family projects a warm, approachable modernity with a clear operating-system flavour. Users are greeted by light blue gradients, floating acrylic surfaces and familiar rounded controls, as if they were interacting with native system panels or widgets rather than an arbitrary web page. It works particularly well as a visual foundation for “control center” or companion experiences that want to sit comfortably alongside Windows itself."
      }
    },
    {
      "id": "core-materialDesign",
      "familyId": "materialDesign",
      "category": "core",
      "title": {
        "zh-CN": "Material Design 系统",
        "en-US": "Material Design System"
      },
      "description": {
        "zh-CN": "完整的 Material Design 系统指南，展示设计原则、组件和交互模式。提供现代化的卡片布局、阴影阶层和涟漪反馈效果。综合性 Material Design 系统指南，展示设计原理、组件和交互模式。提供详细的设计系统指导和系统化组件规范。",
        "en-US": "A comprehensive Material Design system guide showcasing design principles, components, and interaction patterns Features modern card layouts, shadow hierarchy, and ripple effects for enterprise applications and multi-platform products in professional enterprise environments Widely adopted in enterprise applications, cross-platform development, and content-heavy systems Provides comprehensive component library and interaction guidelines This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. comprehensive design system with systematic component guidance."
      },
      "tags": [
        "contemporary",
        "depth",
        "geometric",
        "enterprise",
        "interactive"
      ],
      "templatesCount": 3,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「Material Design」核心样式卡展示界面风格高度接近的 Material 风格 UI。\n请使用 TailwindCSS 创建一个 Material Design 风格的界面，使用纸片隐喻（Paper Metaphor）和层级阴影（Elevation）系统模拟现实世界的纸张层叠。\n\n**核心设计要求**\n\n1. **层级阴影系统（Elevation）**\n   - 1dp (静止表面): box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);\n   - 2dp (凸起按钮): box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);\n   - 4dp (卡片): box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);\n   - 8dp (菜单、对话框): box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);\n   - 16dp (FAB 浮动按钮): box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);\n   - 24dp (最高层级): box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);\n\n2. **触摸涟漪效果（Ripple）**\n   - 涟漪动画: 从触点扩散的圆形波纹（300-600ms 动画时长）\n   - 涟漪颜色: rgba(主色, 0.2) 或 rgba(255,255,255,0.3)\n   - CSS 实现:\n     background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 50%);\n     animation: ripple 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n\n3. **大胆色彩体系（Material Design 色板）**\n   - Primary 主色: #6200ee（主要操作、品牌元素）\n   - Secondary 次要色: #03dac6（次要操作、点缀）\n   - Accent 强调色: #ff0266（错误、警告、高亮）\n   - Surface 表面色: #ffffff（卡片、对话框）\n   - Background 背景色: #fafafa（页面背景）\n   - 文字颜色: rgba(0,0,0,0.87) 主要文字, rgba(0,0,0,0.60) 次要文字\n\n4. **FAB 浮动按钮（Floating Action Button）**\n   - 圆形按钮: width: 56px; height: 56px; border-radius: 50%;\n   - 最高阴影层级: 使用 16dp 阴影\n   - 固定位置: position: fixed; bottom: 24px; right: 24px;\n   - 悬停提升: 阴影提升至 24dp\n   - 图标居中: display: flex; align-items: center; justify-content: center;\n\n5. **卡片式布局（Card）**\n   - 白色背景: background: #ffffff;\n   - 圆角: border-radius: 4px;\n   - 4dp 阴影: 使用 Elevation 4 阴影\n   - 内边距: padding: 16px 或 24px;\n   - 悬停效果: 阴影提升至 8dp\n\n**配色方案（Material Design 标准色板）**\n\n主色调（Primary）:\n- 主紫色: #6200ee\n- 深紫色: #3700b3\n- 浅紫色: #bb86fc\n\n次要色（Secondary / Accent）:\n- 青色: #03dac6\n- 深青色: #018786\n- 浅青色: #03dac5\n\n功能色:\n- 错误红: #b00020, #cf6679\n- 成功绿: #4caf50\n- 警告橙: #ff9800\n\n中性色:\n- 背景白: #ffffff\n- 表面白: #ffffff\n- 深色背景: #121212\n- 文字黑: rgba(0,0,0,0.87)\n- 次要文字: rgba(0,0,0,0.60)\n- 禁用文字: rgba(0,0,0,0.38)\n\n**关键 CSS 类示例**\n\n\\`\\`\\`css\n/* Material Design 卡片 */\n.md-card {\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),\n              0 1px 10px 0 rgba(0,0,0,0.12),\n              0 2px 4px -1px rgba(0,0,0,0.20);\n  padding: 16px;\n  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-card:hover {\n  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),\n              0 3px 14px 2px rgba(0,0,0,0.12),\n              0 5px 5px -3px rgba(0,0,0,0.20);\n}\n\n/* FAB 浮动按钮 */\n.md-fab {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: #6200ee;\n  color: #ffffff;\n  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),\n              0 6px 30px 5px rgba(0,0,0,0.12),\n              0 8px 10px -5px rgba(0,0,0,0.20);\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-fab:hover {\n  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),\n              0 9px 46px 8px rgba(0,0,0,0.12),\n              0 11px 15px -7px rgba(0,0,0,0.20);\n  transform: scale(1.05);\n}\n\n/* 触摸涟漪效果 */\n.md-ripple {\n  position: relative;\n  overflow: hidden;\n}\n\n.md-ripple::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background: rgba(98, 0, 238, 0.2);\n  transform: translate(-50%, -50%);\n  transition: width 0.6s, height 0.6s;\n}\n\n.md-ripple:active::after {\n  width: 300px;\n  height: 300px;\n}\n\n/* Material Design 按钮 */\n.md-button {\n  padding: 8px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-button-primary {\n  background: #6200ee;\n  color: #ffffff;\n  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),\n              0 3px 1px -2px rgba(0,0,0,0.12),\n              0 1px 5px 0 rgba(0,0,0,0.20);\n}\n\n.md-button-primary:hover {\n  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),\n              0 1px 10px 0 rgba(0,0,0,0.12),\n              0 2px 4px -1px rgba(0,0,0,0.20);\n}\n\\`\\`\\`\n\n**动效规范**\n- 快速动效: 100ms - 200ms（小元素）\n- 中等动效: 280ms - 300ms（常规元素）\n- 慢速动效: 400ms - 600ms（大元素）\n- 缓动函数: cubic-bezier(0.4, 0, 0.2, 1)（标准 Material Design 缓动）\n\n**重要提示**\n- 遵循 Google Material Design Guidelines (material.io/design)\n- 使用精确的 Elevation 阴影值，不要自定义阴影\n- 确保触摸目标至少 48x48dp\n- 所有交互必须有涟漪反馈\n- 色彩对比度符合 WCAG AA 标准（文字至少 4.5:1）\n\n\n---",
        "en-US": "Please create a Material Design style interface using TailwindCSS, using paper metaphor and elevation shadow system to simulate real-world paper stacking.\n\n**Core Design Requirements**\n\n1. **Elevation Shadow System**\n   - 1dp (resting): box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);\n   - 2dp (raised button): box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);\n   - 4dp (card): box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);\n   - 8dp (menu, dialog): box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);\n   - 16dp (FAB): box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);\n   - 24dp (highest): box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);\n\n2. **Touch Ripple Effect**\n   - Ripple animation: Circular wave expanding from touch point (300-600ms duration)\n   - Ripple color: rgba(primary, 0.2) or rgba(255,255,255,0.3)\n   - CSS implementation:\n     background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 50%);\n     animation: ripple 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n\n3. **Bold Color System (Material Design Palette)**\n   - Primary: #6200ee (main actions, brand elements)\n   - Secondary: #03dac6 (secondary actions, accents)\n   - Accent: #ff0266 (errors, warnings, highlights)\n   - Surface: #ffffff (cards, dialogs)\n   - Background: #fafafa (page background)\n   - Text: rgba(0,0,0,0.87) primary, rgba(0,0,0,0.60) secondary\n\n4. **FAB Floating Action Button**\n   - Circular button: width: 56px; height: 56px; border-radius: 50%;\n   - Highest shadow: Use 16dp elevation\n   - Fixed position: position: fixed; bottom: 24px; right: 24px;\n   - Hover elevation: Shadow lifts to 24dp\n   - Center icon: display: flex; align-items: center; justify-content: center;\n\n5. **Card Layout**\n   - White background: background: #ffffff;\n   - Border radius: border-radius: 4px;\n   - 4dp shadow: Use Elevation 4\n   - Padding: padding: 16px or 24px;\n   - Hover effect: Shadow lifts to 8dp\n\n**Color Scheme (Material Design Standard Palette)**\n\nPrimary colors:\n- Primary Purple: #6200ee\n- Dark Purple: #3700b3\n- Light Purple: #bb86fc\n\nSecondary / Accent colors:\n- Teal: #03dac6\n- Dark Teal: #018786\n- Light Teal: #03dac5\n\nFunctional colors:\n- Error Red: #b00020, #cf6679\n- Success Green: #4caf50\n- Warning Orange: #ff9800\n\nNeutral colors:\n- Background White: #ffffff\n- Surface White: #ffffff\n- Dark Background: #121212\n- Text Black: rgba(0,0,0,0.87)\n- Secondary Text: rgba(0,0,0,0.60)\n- Disabled Text: rgba(0,0,0,0.38)\n\n**Key CSS Class Examples**\n\n\\`\\`\\`css\n/* Material Design Card */\n.md-card {\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),\n              0 1px 10px 0 rgba(0,0,0,0.12),\n              0 2px 4px -1px rgba(0,0,0,0.20);\n  padding: 16px;\n  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-card:hover {\n  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),\n              0 3px 14px 2px rgba(0,0,0,0.12),\n              0 5px 5px -3px rgba(0,0,0,0.20);\n}\n\n/* FAB Floating Button */\n.md-fab {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: #6200ee;\n  color: #ffffff;\n  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),\n              0 6px 30px 5px rgba(0,0,0,0.12),\n              0 8px 10px -5px rgba(0,0,0,0.20);\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-fab:hover {\n  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),\n              0 9px 46px 8px rgba(0,0,0,0.12),\n              0 11px 15px -7px rgba(0,0,0,0.20);\n  transform: scale(1.05);\n}\n\n/* Touch Ripple Effect */\n.md-ripple {\n  position: relative;\n  overflow: hidden;\n}\n\n.md-ripple::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background: rgba(98, 0, 238, 0.2);\n  transform: translate(-50%, -50%);\n  transition: width 0.6s, height 0.6s;\n}\n\n.md-ripple:active::after {\n  width: 300px;\n  height: 300px;\n}\n\n/* Material Design Button */\n.md-button {\n  padding: 8px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.md-button-primary {\n  background: #6200ee;\n  color: #ffffff;\n  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),\n              0 3px 1px -2px rgba(0,0,0,0.12),\n              0 1px 5px 0 rgba(0,0,0,0.20);\n}\n\n.md-button-primary:hover {\n  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),\n              0 1px 10px 0 rgba(0,0,0,0.12),\n              0 2px 4px -1px rgba(0,0,0,0.20);\n}\n\\`\\`\\`\n\n**Animation Timing**\n- Fast: 100ms - 200ms (small elements)\n- Medium: 280ms - 300ms (regular elements)\n- Slow: 400ms - 600ms (large elements)\n- Easing: cubic-bezier(0.4, 0, 0.2, 1) (standard Material Design easing)\n\n**Important Notes**\n- Follow Google Material Design Guidelines (material.io/design)\n- Use precise Elevation shadow values, don't customize shadows\n- Ensure touch targets at least 48x48dp\n- All interactions must have ripple feedback\n- Color contrast meets WCAG AA standard (text at least 4.5:1)"
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名熟悉 Google Material Design 规范的界面设计师，需要向团队解释 Material Design 家族在本项目中的视觉定位与体验特征，让不看规范文档的人也能理解「这类界面应该长什么样」。\n\n场景定位：Material Design 家族适用于需要在多个平台上保持一致体验的产品，例如跨端应用、管理后台、生产力工具和内容型产品。它强调可用性与一致性，适合有较多组件和复杂信息层级的系统，让用户通过熟悉的卡片、按钮和浮动操作按钮（FAB）快速建立心理模型。\n\n视觉设计理念：Material 的核心理念是「纸张隐喻 + 层级阴影」。界面由多张「纸片」组成，每一张都有自己的高度（Elevation），可以重叠、滑动和浮起。不同层级的阴影代表不同的重要性和交互状态：底层背景几乎没有阴影，卡片有中等阴影，对话框和菜单有更高的阴影，而 FAB 浮动按钮处在最高层级。这种「拟物但抽象」的纸片世界，让界面既有层次感又避免过度真实。\n\n材质与质感：在 Material 家族中，表面颜色多为白色或浅灰，搭配高饱和的主色和强调色。卡片、按钮和菜单都像干净的纸张，边缘圆角小而克制，阴影柔和、略微模糊，不会抢走内容的注意力。色彩系统遵循主色 / 次色 / 功能色的结构：例如主紫、辅青、错误红等，搭配明确的文字不透明度规则，让不同层级的信息在「纸片」上清晰分布。\n\n交互体验：交互强调「触摸反馈」和「层级变化」。点击主按钮或卡片时，会看到典型的涟漪动画从触点扩散，告诉用户「点击已生效」；卡片和菜单在出现与消失时，有轻微的缩放与透明度变化，像纸片在空中略微移动。不同 Elevation 的组件在交互中会暂时提升阴影层级，例如卡片悬停时阴影加深，强调它与背景的分离。整体动效节奏遵循 Material 的缓动曲线，感觉自然而稳定。\n\n整体氛围：Material Design 家族营造的是一种「现代、友好、略带系统感」的氛围。用户进入界面时，会看到一层层有秩序的卡片、清晰的主色按钮和舒适的留白与阴影关系，感觉像在使用一套熟悉的应用生态。它既不像传统拟物那样厚重，也不像极简扁平那样完全无质感，而是在「有纸张、有光影但仍然抽象」的平衡点上，为复杂产品提供可靠的视觉基底。\n\n---",
        "en-US": "Role: You are a UI designer well-versed in Google’s Material Design guidelines, and you need to explain how the Material Design family should look and behave in this project, in a way that teammates can understand without reading the spec.\n\nScene: The Material family is suited for multi-platform products that require consistency and clear structure: cross-device apps, admin consoles, productivity tools and content-heavy systems. It works best where there are many components and layers of information, giving users familiar cards, buttons and FABs so they can quickly recognise patterns and affordances.\n\nVisual philosophy: Material is built on the idea of “paper surfaces + elevation shadows.” The interface is composed of abstract sheets of paper, each with its own elevation level. Different levels of shadow reflect different roles and interaction states: backgrounds are nearly flat; cards sit above them with moderate shadows; menus and dialogs float even higher; FABs occupy the topmost layer. This creates a world that is slightly skeuomorphic—there is depth and layering—but still abstract and minimal enough to feel like a UI system rather than a literal physical scene.\n\nMaterial and texture: Surfaces are typically white or very light neutrals, with bold primary and secondary colors used for key accents. Cards, buttons and menus resemble clean pieces of card stock: small, consistent corner radii, soft blurred shadows and no visible noise or texture. Color follows a defined palette of primary, secondary and functional hues—such as deep purple, teal and red—paired with clear rules for text opacity so hierarchy is visible at a glance.\n\nInteraction experience: Interaction focuses on touch feedback and elevation changes. When users tap a button or card, a ripple effect expands from the touch point, signalling that the action has been registered. Cards and menus appear and disappear with gentle scale and opacity transitions, as if sheets of paper were lifting off or settling back onto the stack. Components temporarily increase their elevation on hover or focus, deepening shadows to emphasise separation from the background. All motions follow Material’s easing curves, feeling smooth, responsive and consistent across the system.\n\nOverall mood: The Material Design family creates a modern, friendly and system-like atmosphere. Users see layers of well-ordered cards, clear primary actions and comfortable spacing tied together by consistent light and shadow. It feels like operating within a coherent ecosystem rather than a one-off website: not as heavy as full skeuomorphism, but richer and more tactile than pure flat design, striking a balance where complex products can remain approachable and legible."
      }
    },
    {
      "id": "core-minimalism",
      "familyId": "minimalism",
      "category": "core",
      "title": {
        "zh-CN": "极简主义",
        "en-US": "Minimalism"
      },
      "description": {
        "zh-CN": "\"少即是多\"哲学，强谾留白、简洁排版和本质元素。透过极简风格和简洁构图建立优雅介面。创造注重内容和用户体验的现代训讈。简洁高效的扁平设计系统，无阴影无渐变，强调内容和创建高效界面。",
        "en-US": "\"Less is more\" design philosophy emphasizing white space, clean typography, and essential elements Builds elegant interfaces through radical simplification, neutral color palettes, and maximum visual clarity for sophisticated, timeless design solutions Ideal for luxury brands, editorial products, and content-focused applications. Maximizes visual impact through strategic use of whitespace and restraint This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. essential elegance through thoughtful reduction."
      },
      "tags": [],
      "templatesCount": 4,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「极简主义（Minimalism）」核心样式卡展示界面风格高度接近的极简风格 UI。\n请使用 TailwindCSS 创建一个极简主义（Minimalism）风格的界面，通过大量留白、精确网格和中性色彩创造优雅、纯粹的视觉体验。\n\n**核心设计要求**\n\n1. **大量留白（Whitespace）**\n   - 主要内容区留白: padding: 48px 或 64px;\n   - 段落间距: margin-bottom: 32px 或 48px;\n   - 行高: line-height: 1.8（阅读舒适性）\n   - 字母间距: letter-spacing: 0.02em 或 0.03em;\n   - 负空间比例: 内容区域占页面 40-50%，留白占 50-60%\n\n2. **精确网格系统**\n   - 12 列网格: grid-template-columns: repeat(12, 1fr);\n   - 栏间距: gap: 24px 或 32px;\n   - 模块化间距: 使用 8px 基础单位（8, 16, 24, 32, 48, 64, 96px）\n   - 对齐精确: 所有元素遵循网格对齐，避免像素偏移\n   - 垂直韵律: 使用 baseline grid 创造垂直节奏感\n\n3. **中性色彩为主**\n   - 纯黑: #000000（标题）\n   - 纯白: #ffffff（背景）\n   - 深灰: #1a1a1a, #2d2d2d, #404040（文字层级）\n   - 中灰: #666666, #808080, #999999（次要信息）\n   - 浅灰: #cccccc, #e5e5e5, #f5f5f5（边框、分隔线）\n   - 点缀色（极少使用）: #0066ff（链接）, #ff0000（强调）\n\n4. **排版即视觉**\n   - 标题: font-size: 48px - 72px; font-weight: 300 或 700; letter-spacing: -0.02em;\n   - 副标题: font-size: 24px - 36px; font-weight: 400; letter-spacing: 0.01em;\n   - 正文: font-size: 16px - 18px; font-weight: 400; line-height: 1.8;\n   - 辅助文字: font-size: 12px - 14px; font-weight: 300; color: #999999;\n   - 字体选择: Helvetica Neue, Inter, SF Pro Display（无衬线，干净）\n\n5. **减法设计哲学**\n   - 移除所有装饰: box-shadow: none; border: none;\n   - 仅保留必要元素: 只显示核心内容和功能\n   - 简化交互: 悬停仅改变透明度（opacity: 0.7）或颜色\n   - 隐藏复杂性: 使用渐进式披露，避免一次性展示过多信息\n   - 极简图标: 使用简单线性图标，stroke-width: 1px 或 1.5px;\n\n**配色方案（中性色为主）**\n\n主要中性色:\n- 纯黑: #000000\n- 纯白: #ffffff\n- 深灰: #1a1a1a, #2d2d2d, #404040\n- 中灰: #666666, #808080, #999999\n- 浅灰: #cccccc, #e5e5e5, #f5f5f5\n\n点缀色（极少使用）:\n- 蓝色: #0066ff（链接、主要操作）\n- 黑色: #000000（强调）\n- 红色: #ff0000（警告、删除）\n\n**关键 CSS 类示例**\n\n\\`\\`\\`css\n/* 极简主义容器 */\n.minimal-container {\n  max-width: 800px; /* 限制阅读宽度 */\n  margin: 0 auto;\n  padding: 64px 32px;\n  background: #ffffff;\n}\n\n/* 极简主义标题 */\n.minimal-heading {\n  font-size: 48px;\n  font-weight: 300;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n  color: #000000;\n  margin-bottom: 48px;\n}\n\n/* 极简主义正文 */\n.minimal-text {\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.8;\n  letter-spacing: 0.02em;\n  color: #404040;\n  margin-bottom: 32px;\n}\n\n/* 极简主义按钮 */\n.minimal-button {\n  padding: 16px 32px;\n  font-size: 16px;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  color: #000000;\n  background: #ffffff;\n  border: 1px solid #000000;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.minimal-button:hover {\n  background: #000000;\n  color: #ffffff;\n}\n\n/* 极简主义分隔线 */\n.minimal-divider {\n  width: 100%;\n  height: 1px;\n  background: #e5e5e5;\n  margin: 64px 0;\n  border: none;\n}\n\n/* 极简主义网格 */\n.minimal-grid {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 32px;\n  margin-bottom: 64px;\n}\n\n/* 极简主义卡片 */\n.minimal-card {\n  background: #ffffff;\n  padding: 32px;\n  border: 1px solid #e5e5e5;\n  transition: border-color 0.3s ease;\n}\n\n.minimal-card:hover {\n  border-color: #000000;\n}\n\\`\\`\\`\n\n**间距系统（8px 基础单位）**\n- xs: 8px（紧密元素）\n- sm: 16px（相关元素）\n- md: 24px（组件间距）\n- lg: 32px（节间距）\n- xl: 48px（区块间距）\n- 2xl: 64px（主要区域）\n- 3xl: 96px（页面级间距）\n\n**微型交互细节**\n- 悬停过渡: transition: all 0.3s ease;\n- 透明度变化: opacity: 1 → opacity: 0.7;\n- 颜色渐变: color: #000000 → color: #666666;\n- 边框变化: border-color: #e5e5e5 → border-color: #000000;\n- 避免复杂动画: 不使用 transform: scale() 或 translateY()\n\n**重要提示**\n- 留白是设计的一部分，不是浪费空间\n- 每个元素必须有存在的理由，否则移除\n- 使用网格对齐所有元素，保持精确的视觉秩序\n- 色彩极度克制，黑白灰为主，点缀色仅用于强调\n- 排版是极简主义的灵魂，通过字体大小、粗细、间距创造层次\n- 交互细腻但不夸张，保持优雅和克制\n\n\n---",
        "en-US": "Please create a Minimalism style interface using TailwindCSS, with abundant whitespace, precise grid, and neutral colors to create elegant, pure visual experience.\n\n**Core Design Requirements**\n\n1. **Abundant Whitespace**\n   - Main content padding: padding: 48px or 64px;\n   - Paragraph spacing: margin-bottom: 32px or 48px;\n   - Line height: line-height: 1.8 (reading comfort)\n   - Letter spacing: letter-spacing: 0.02em or 0.03em;\n   - Negative space ratio: Content 40-50%, whitespace 50-60%\n\n2. **Precise Grid System**\n   - 12-column grid: grid-template-columns: repeat(12, 1fr);\n   - Gap: gap: 24px or 32px;\n   - Modular spacing: Use 8px base unit (8, 16, 24, 32, 48, 64, 96px)\n   - Precise alignment: All elements follow grid, avoid pixel drift\n   - Vertical rhythm: Use baseline grid for vertical rhythm\n\n3. **Neutral Color Dominance**\n   - Pure black: #000000 (headings)\n   - Pure white: #ffffff (background)\n   - Dark gray: #1a1a1a, #2d2d2d, #404040 (text hierarchy)\n   - Mid gray: #666666, #808080, #999999 (secondary info)\n   - Light gray: #cccccc, #e5e5e5, #f5f5f5 (borders, dividers)\n   - Accent color (minimal use): #0066ff (links), #ff0000 (emphasis)\n\n4. **Typography as Visual**\n   - Headings: font-size: 48px - 72px; font-weight: 300 or 700; letter-spacing: -0.02em;\n   - Subheadings: font-size: 24px - 36px; font-weight: 400; letter-spacing: 0.01em;\n   - Body: font-size: 16px - 18px; font-weight: 400; line-height: 1.8;\n   - Auxiliary: font-size: 12px - 14px; font-weight: 300; color: #999999;\n   - Font choice: Helvetica Neue, Inter, SF Pro Display (sans-serif, clean)\n\n5. **Subtractive Design Philosophy**\n   - Remove all decoration: box-shadow: none; border: none;\n   - Keep only essentials: Show only core content and functions\n   - Simplify interactions: Hover only changes opacity (opacity: 0.7) or color\n   - Hide complexity: Use progressive disclosure, avoid showing too much at once\n   - Minimal icons: Simple linear icons, stroke-width: 1px or 1.5px;\n\n**Color Scheme (Neutral Dominance)**\n\nPrimary neutral colors:\n- Pure black: #000000\n- Pure white: #ffffff\n- Dark gray: #1a1a1a, #2d2d2d, #404040\n- Mid gray: #666666, #808080, #999999\n- Light gray: #cccccc, #e5e5e5, #f5f5f5\n\nAccent colors (minimal use):\n- Blue: #0066ff (links, primary actions)\n- Black: #000000 (emphasis)\n- Red: #ff0000 (warnings, delete)\n\n**Key CSS Class Examples**\n\n\\`\\`\\`css\n/* Minimalist Container */\n.minimal-container {\n  max-width: 800px; /* Limit reading width */\n  margin: 0 auto;\n  padding: 64px 32px;\n  background: #ffffff;\n}\n\n/* Minimalist Heading */\n.minimal-heading {\n  font-size: 48px;\n  font-weight: 300;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n  color: #000000;\n  margin-bottom: 48px;\n}\n\n/* Minimalist Text */\n.minimal-text {\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.8;\n  letter-spacing: 0.02em;\n  color: #404040;\n  margin-bottom: 32px;\n}\n\n/* Minimalist Button */\n.minimal-button {\n  padding: 16px 32px;\n  font-size: 16px;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  color: #000000;\n  background: #ffffff;\n  border: 1px solid #000000;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.minimal-button:hover {\n  background: #000000;\n  color: #ffffff;\n}\n\n/* Minimalist Divider */\n.minimal-divider {\n  width: 100%;\n  height: 1px;\n  background: #e5e5e5;\n  margin: 64px 0;\n  border: none;\n}\n\n/* Minimalist Grid */\n.minimal-grid {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 32px;\n  margin-bottom: 64px;\n}\n\n/* Minimalist Card */\n.minimal-card {\n  background: #ffffff;\n  padding: 32px;\n  border: 1px solid #e5e5e5;\n  transition: border-color 0.3s ease;\n}\n\n.minimal-card:hover {\n  border-color: #000000;\n}\n\\`\\`\\`\n\n**Spacing System (8px base unit)**\n- xs: 8px (tight elements)\n- sm: 16px (related elements)\n- md: 24px (component spacing)\n- lg: 32px (section spacing)\n- xl: 48px (block spacing)\n- 2xl: 64px (main areas)\n- 3xl: 96px (page-level spacing)\n\n**Micro-interaction Details**\n- Hover transition: transition: all 0.3s ease;\n- Opacity change: opacity: 1 → opacity: 0.7;\n- Color fade: color: #000000 → color: #666666;\n- Border change: border-color: #e5e5e5 → border-color: #000000;\n- Avoid complex animations: No transform: scale() or translateY()\n\n**Important Notes**\n- Whitespace is part of the design, not wasted space\n- Every element must have a reason to exist, otherwise remove it\n- Use grid to align all elements, maintain precise visual order\n- Extremely restrained colors, black/white/gray primary, accents only for emphasis\n- Typography is the soul of minimalism, create hierarchy through font size, weight, spacing\n- Interactions are subtle but not exaggerated, maintain elegance and restraint"
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名偏爱「少即是多」的极简主义 UI 设计师，需要为产品团队说明 Minimalism 家族的视觉原则和适用场景，避免大家误把「简单」理解成「随便」或「什么都删掉」。\n\n场景定位：极简家族适合信息结构清晰、内容质量高、品牌气质偏理性或高端的产品，例如文档工具、写作平台、作品集网站、高端品牌落地页和数据故事页面。它特别适合需要长时间阅读或思考的场景，让用户在没有视觉噪音干扰的情况下专注于内容本身。\n\n视觉设计理念：极简主义不是「空白越多越好」，而是通过有意识地删减装饰，把视觉注意力集中在核心元素上。界面以黑白灰为主，辅以极少数强调色；结构上依靠网格、基线和明确的层级关系组织信息，而不是靠边框、阴影和复杂背景。标题、正文和辅助信息在排版上有清晰的节奏，让用户能一眼看出「哪里最重要」「哪里是说明」「哪里是补充」。\n\n材质与质感：在 Minimalism 家族中，材质被压缩到几乎看不见——没有明显的纹理和渐变，阴影如果存在也非常轻微。页面主要由干净的白色背景、细线分隔和少量浅灰区块构成，辅以清晰的黑色文字。所有元素的边框、线条和图标都保持细而稳定的线宽，避免粗重轮廓打破整体的轻盈感。页面的「质感」来自版面秩序和留白，而不是来自表面的华丽效果。\n\n交互体验：交互反馈在极简风格中是克制而明确的。按钮悬停后可能只改变边框颜色、文字颜色或透明度，而不会出现大幅缩放、阴影爆发或炫目渐变。链接在 hover 时出现简单下划线即可；卡片在交互时可以轻微调整背景色或边框颜色，但仍然保持「安静」。动画节奏通常偏慢且流畅，避免频繁闪烁，让长时间阅读不被打扰。\n\n整体氛围：Minimalism 家族营造的是一种安静、清晰、带有思考空间的界面气质。用户进入页面时不会被视觉效果轰炸，而是感受到宽阔的留白、整齐的文字和少量有力的视觉焦点。它非常适合作为内容或品牌的「画廊空间」，让真正重要的文字、图像和数据成为舞台主角。\n\n---",
        "en-US": "Role: You are a minimalist UI designer who believes in “less but better”, and you need to explain the Minimalism family to your team so they don’t confuse “simple” with “careless” or “empty.”\n\nScene: The minimalist family is ideal for products with clear structure, strong content and brands that lean toward rational, refined or premium positioning: document tools, writing platforms, portfolios, high-end marketing pages and narrative data experiences. It is especially suitable for long-form reading and focused work, where visual noise must be kept to a minimum.\n\nVisual philosophy: Minimalism is not about removing everything; it is about removing everything that does not support the message. Interfaces are built on a foundation of black, white and greys, with extremely limited accent colors. Information hierarchy is created through typography, spacing and alignment, not borders and heavy decoration. Headings, body text and auxiliary details form a deliberate rhythm so users can instantly tell what is primary, what is explanatory and what is secondary.\n\nMaterial and texture: In the Minimalism family, material almost disappears. There are no obvious textures or gradients; shadows, if present, are very subtle. The page is composed of clean white backgrounds, fine dividers and a few light-grey panels, with crisp black text on top. Borders, lines and icons share a consistent, slender stroke width so the layout feels light rather than heavy. The “texture” comes from structure and whitespace instead of graphic embellishment.\n\nInteraction experience: Interaction feedback is restrained yet precise. Buttons on hover may only adjust border or text color, or slightly reduce opacity, rather than jumping, glowing or casting heavy shadows. Links gain a simple underline or tone change; cards might shift to a slightly different background or border color. Animations, when used, are smooth and modest—short fades or small movements—so they support focus instead of competing with it.\n\nOverall mood: The Minimalism family creates a quiet, clear atmosphere with plenty of room for thought. Users are not bombarded with effects; they see generous whitespace, carefully set type and a small number of strong visual anchors. It feels like a gallery or reading room for content and ideas where the interface steps back, allowing text, imagery and data to take centre stage."
      }
    },
    {
      "id": "core-scrollNarrative",
      "familyId": "scrollNarrative",
      "category": "core",
      "title": {
        "zh-CN": "滚动叙事",
        "en-US": "Scroll Narrative"
      },
      "description": {
        "zh-CN": "滚动驱动的叙事，采用视差效果和滚动互动讲述沉浸式故事。通过动态视觉和互动元素创造引人入胜的用户体验。适合叙事驱动的内容和创意呈现。滚动驱动的叙事设计，采用视差效果和滚动交互讲述沉浸式故事。",
        "en-US": "Scroll-driven narrative design with parallax effects and scroll interactions to tell immersive stories Creates engaging user experiences through synchronized animations, progressive reveals, and interactive storytelling techniques for immersive page-based experiences Effective for storytelling websites, portfolios, and narrative-driven content platforms. Engages users through continuous visual revelation and progressive information disclosure This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. immersive storytelling through scroll-driven interaction. Excellence in design."
      },
      "tags": [],
      "templatesCount": 4,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "请使用 TailwindCSS 创建一个「滚动叙事 Scroll Narrative」页面，让用户在滚动中体验分镜式故事与可视化重点。\n\n**核心设计要求**\n\n1. **封面 Hero（层叠视差）**\n   - 前景：标题 40-64px、子标题 18-22px、主次 CTA（主色填充 + 反色描边）。\n   - 背景：2-3 层视差渐变/网格，速度 0.3x/0.6x/1x。\n   - 参考 CSS：\n     ```css\n     .scroll-hero { position: relative; min-height: 80vh; }\n     .scroll-hero::before { content: \"\"; position: absolute; inset: -10% 0 0; background: radial-gradient(circle at 20% 30%, #5eead4 0%, transparent 40%), radial-gradient(circle at 80% 40%, #60a5fa 0%, transparent 35%); filter: blur(40px); transform: translateY(-6vh); }\n     .scroll-hero .cta-primary { @apply bg-indigo-500 text-white rounded-full px-6 py-3 shadow-[0_10px_40px_rgba(76,106,255,0.35)]; }\n     .scroll-hero .cta-secondary { @apply border border-white/40 text-white/90 rounded-full px-5 py-2; }\n     ```\n\n2. **节奏分镜 (3-5 段)**\n   - 每段：章节编号 + 标题 28-34px + 2-3 行正文 + 深链按钮。\n   - 左文右图或左右交错；图可用插画/数据卡片。\n   - 滚动动画：`translate-y-10` → `translate-y-0` 与淡入，duration 500-700ms，stagger 120ms。\n   - 参考 CSS：\n     ```css\n     .story-step { @apply grid grid-cols-1 lg:grid-cols-2 gap-10 items-center; }\n     .story-step[data-active=\"true\"] { @apply translate-y-0 opacity-100; transition: all 0.6s ease; }\n     .story-step[data-active=\"false\"] { @apply translate-y-8 opacity-0; }\n     ```\n\n3. **Sticky / Pinned 关键信息**\n   - 右侧或左侧保留「摘要/进度」栏，滚动时保持视口内。\n   - 包含章节导航点、当前章节标题、操作按钮。\n   - 参考 CSS：\n     ```css\n     .sticky-nav { position: sticky; top: 96px; }\n     .progress-rail { @apply relative h-full w-[2px] bg-white/10; }\n     .progress-dot { @apply w-3 h-3 rounded-full bg-sky-400 shadow-[0_0_0_6px_rgba(125,211,252,0.18)]; }\n     ```\n\n4. **可视化/媒体插入**\n   - 支持图表、视频或 3D 截图，统一留 16-24px 内边距，圆角 20px。\n   - 为视频/图表添加遮罩渐变，避免与文本冲突。\n   - 参考 CSS：\n     ```css\n     .media-card { @apply relative rounded-2xl overflow-hidden bg-slate-900/60 border border-white/10 shadow-[0_20px_80px_rgba(0,0,0,0.35)]; }\n     .media-card::after { content:\"\"; @apply absolute inset-0 bg-gradient-to-t from-slate-950/50 to-transparent; }\n     ```\n\n5. **滚动引导与分隔**\n   - 在段落之间加入「轻分隔」：细线 + 小徽章文本。\n   - 在首屏底部放置「Scroll 提示」动画 (chevron+dot)。\n\n6. **响应式与降级**\n   - <768px：禁用重度视差，改用静态渐变；图文改为上下排。\n   - 控制阴影/模糊强度，移动端减半，确保性能。\n\n7. **交互与可访问性**\n   - 所有 CTA 有 `:hover` 提升亮度与轻微擡升，`:focus-visible` 外框。\n   - 对比度 >= 4.5:1；文本行高 1.6-1.8，字距 0.01-0.04em。\n\n**配色方案（夜空霓虹）**\n\n主色调：\n- 靛蓝高光：#6366f1, #4f46e5\n- 青绿流光：#22d3ee, #5eead4\n- 玫红点缀：#f472b6, #fb7185\n\n中性色/功能色：\n- 背景：#0b1020, #0f172a, #111827\n- 文本：#e5e7eb, #cbd5e1\n- 分隔/描边：rgba(255,255,255,0.08-0.16)\n\n**关键 CSS 类示例**\n\n```css\n.scroll-shell { @apply min-h-screen bg-[#0b1020] text-slate-100 overflow-hidden; }\n.scroll-grid { @apply max-w-6xl mx-auto px-6 lg:px-10 py-16 lg:py-24; }\n.chapter-badge { @apply inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-sky-200 bg-white/5 border border-white/10 rounded-full px-3 py-1; }\n.cta-ghost { @apply inline-flex items-center gap-2 text-sky-100 border border-sky-200/40 rounded-full px-4 py-2 hover:border-sky-200/70 hover:bg-sky-200/10 transition; }\n.scrim { background: radial-gradient(circle at 30% 20%, rgba(94,234,212,0.25), transparent 40%), radial-gradient(circle at 70% 10%, rgba(99,102,241,0.25), transparent 45%); filter: blur(32px); }\n```\n\n**版式与节奏**\n- 基线网格：8px；段落间距 48-72px；段落内行距 20-28px。\n- 标题层级：H1 48-64px / H2 32-40px / H3 22-26px；字体粗细 600-800。\n- 容器宽度：1200-1280px；行宽 58-72 字符。\n\n**重要提示**\n- sticky 区域预留 top = header 高度 + 24px。\n- 视差层控制 transform: translateY(-10vh~-4vh)，避免过度眩晕。\n- 移动端关闭 heavy blur（>20px）与大阴影。\n- CTA 最多两个，保持层级明确。\n- 确保滚动驱动动画可被关闭（尊重 prefers-reduced-motion）。\n\n\n---",
        "en-US": "Create a “Scroll Narrative” page in TailwindCSS so users experience storyboard-like beats while scrolling.\n\n**Core Design Requirements**\n\n1. **Parallax Hero**\n   - Foreground: headline 40–64px, subhead 18–22px, primary/secondary CTAs.\n   - Background: 2–3 parallax gradient/grid layers at 0.3x/0.6x/1x speeds.\n   - Sample CSS:\n     ```css\n     .scroll-hero { position: relative; min-height: 80vh; }\n     .scroll-hero::before { content: \"\"; position: absolute; inset: -10% 0 0; background: radial-gradient(circle at 20% 30%, #5eead4 0%, transparent 40%), radial-gradient(circle at 80% 40%, #60a5fa 0%, transparent 35%); filter: blur(40px); transform: translateY(-6vh); }\n     .scroll-hero .cta-primary { @apply bg-indigo-500 text-white rounded-full px-6 py-3 shadow-[0_10px_40px_rgba(76,106,255,0.35)]; }\n     .scroll-hero .cta-secondary { @apply border border-white/40 text-white/90 rounded-full px-5 py-2; }\n     ```\n\n2. **Story Beats (3–5)**\n   - Each beat: chapter badge, 28–34px title, 2–3 lines of body, deep-link CTA.\n   - Alternate left/right layouts; pair with illustration/data card.\n   - Scroll animation: fade + translate-y, 500–700ms, stagger 120ms.\n\n3. **Sticky Summary / Progress**\n   - Keep a pinned rail with chapter dots, active label, actions.\n   - Use sticky top 96px; highlight active node.\n\n4. **Media Blocks**\n   - Video/chart blocks with 16–24px padding, 20px radius, gradient scrim overlay.\n   - Keep contrast between text and media.\n\n5. **Scroll Cues & Dividers**\n   - Add light separators between beats and an animated “Scroll” cue at fold.\n\n6. **Responsive & Performance**\n   - Mobile: disable heavy parallax, reduce blur/shadow, stack content vertically.\n   - Prefer GPU-friendly transforms; avoid massive box-shadows.\n\n7. **Interaction & A11y**\n   - Clear hover/focus states; focus-visible outline.\n   - Contrast ≥ 4.5:1; line-height 1.6–1.8; letter-spacing 0.01–0.04em.\n\n**Color System (Night Neon)**\n- Primary: #6366f1, #4f46e5, #22d3ee, #5eead4, #f472b6\n- Base: #0b1020, #0f172a, #111827; Text: #e5e7eb, #cbd5e1; Border: rgba(255,255,255,0.08-0.16)\n\n**Key CSS Classes**\n```css\n.scroll-shell { @apply min-h-screen bg-[#0b1020] text-slate-100 overflow-hidden; }\n.scroll-grid { @apply max-w-6xl mx-auto px-6 lg:px-10 py-16 lg:py-24; }\n.chapter-badge { @apply inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-sky-200 bg-white/5 border border-white/10 rounded-full px-3 py-1; }\n.cta-ghost { @apply inline-flex items-center gap-2 text-sky-100 border border-sky-200/40 rounded-full px-4 py-2 hover:border-sky-200/70 hover:bg-sky-200/10 transition; }\n.scrim { background: radial-gradient(circle at 30% 20%, rgba(94,234,212,0.25), transparent 40%), radial-gradient(circle at 70% 10%, rgba(99,102,241,0.25), transparent 45%); filter: blur(32px); }\n```\n\n**Layout & Rhythm**\n- 8px spacing grid; 48–72px beat spacing; 20–28px paragraph spacing.\n- Headings: H1 48–64px / H2 32–40px / H3 22–26px; weight 600–800.\n- Container 1200–1280px; line length 58–72 characters.\n\n**Important Notes**\n- Reserve sticky offset = header height + 24px.\n- Parallax offsets between -10vh and -4vh; reduce on mobile.\n- Disable heavy blur/shadow on small screens; honor prefers-reduced-motion.\n- Limit CTAs to two levels; keep hierarchy clear.\n- Ensure media overlays keep text legible."
      },
      "stylePrompt": {
        "zh-CN": "角色：你是一位精通滚动叙事（Scrollytelling）的交互设计师，擅长通过分镜式布局和滚动触发动画，将复杂信息转化为引人入胜的视觉故事，让用户在滚动中沉浸式体验内容的展开。\n\n场景定位：\n数据新闻报道、产品发布故事、企业历程展示、年度报告、教育科普长文、品牌故事页。用户期待看到内容像电影分镜一样逐步展开，关键画面固定并伴随文字说明，图层之间产生视差移动，整体节奏清晰且易于跟随。\n\n视觉设计理念：\n滚动叙事的核心是「将垂直滚动转化为时间轴上的叙事推进」。每一段内容对应一个视觉场景或关键信息点,通过 position: sticky 或 Intersection Observer 固定主画面，让文字与图形分离呈现。布局需要明确的分段结构（通常以 100vh 为基础单元），每个段落专注传达一个核心信息，避免在单屏内堆砌过多动态元素。色彩与排版保持克制，让滚动触发的动画成为视觉亮点。\n\n材质与质感：\n视觉元素可以是插画、数据可视化图层、摄影作品或几何图形，但必须与叙事主题紧密结合。背景通常使用大面积纯色、微妙渐变或低饱和度图像，确保滚动过程中的内容变化清晰可见。卡片与容器使用简洁的阴影（0–8px）或无阴影设计，避免厚重感。文字区域可采用半透明背景提升可读性，图层叠加时通过透明度与模糊（backdrop-filter: blur(8px)）区分前后景。\n\n交互体验：\n滚动是唯一的主要交互方式。内容随滚动进度触发淡入（opacity 0→1）、位移（translateY 50px→0）、缩放（scale 0.9→1）或视差移动，动画时长控制在 250–600ms，使用 ease-out 或 cubic-bezier 曲线确保流畅自然。关键画面通过 position: sticky 固定在视口中，配合滚动进度条或章节导航帮助用户理解当前位置。必须支持键盘导航（空格键/方向键）与减少动效偏好（prefers-reduced-motion），在低性能设备上降级为静态分段布局。Hover 状态仅用于导航元素或 CTA 按钮，避免干扰主要叙事流。\n\n氛围营造：\n整体氛围应该像观看一部精心编排的纪录片或交互式杂志：信息逐步揭示，节奏明确，用户始终清楚自己在故事的哪个位置。滚动时有掌控感而非被动观看，可以随时暂停、回看或跳转。视觉上保持专业与克制，让内容本身成为主角，技术手段隐藏在叙事体验之后。\n\n---",
        "en-US": "Role: You are an interaction designer specialized in **Scrollytelling**, adept at transforming complex information into compelling visual stories through storyboard-like layouts and scroll-triggered animations, creating immersive narrative experiences as users scroll.\n\nScene Positioning:\nData journalism, product launch stories, company timeline showcases, annual reports, educational long-form content, brand story pages. Users expect content to unfold like cinematic frames, with key visuals pinned while accompanying text appears, layers moving with parallax effects, and a clear, easy-to-follow rhythm.\n\nVisual Design Philosophy:\nThe core of scroll narrative is \"**transforming vertical scrolling into narrative progression along a timeline**.\" Each content segment corresponds to a visual scene or key information point. Use `position: sticky` or Intersection Observer to pin primary visuals while separating text and graphics. Layout requires clear segmentation (typically based on 100vh units), with each section focused on conveying one core message, avoiding overcrowding dynamic elements on a single screen. Keep colors and typography restrained, letting scroll-triggered animations become the visual highlight.\n\nMaterial and Texture:\nVisual elements can be illustrations, data visualization layers, photography, or geometric shapes, but must closely align with the narrative theme. Backgrounds typically use large areas of solid colors, subtle gradients, or low-saturation images to ensure content changes remain clearly visible during scrolling. Cards and containers use minimal shadows (0–8px) or shadowless designs to avoid heaviness. Text areas may use semi-transparent backgrounds to enhance readability; when overlaying layers, use transparency and blur (`backdrop-filter: blur(8px)`) to distinguish foreground from background.\n\nInteraction Experience:\nScrolling is the primary interaction method. Content triggers fade-in (opacity 0→1), translation (translateY 50px→0), scale (scale 0.9→1), or parallax movement based on scroll progress, with animation durations of 250–600ms using ease-out or cubic-bezier curves for smooth, natural motion. Key visuals stay fixed in the viewport via `position: sticky`, accompanied by progress indicators or chapter navigation to help users understand their current position. Must support keyboard navigation (spacebar/arrow keys) and reduced motion preferences (`prefers-reduced-motion`), degrading to static segmented layouts on low-performance devices. Hover states are only for navigation elements or CTA buttons, avoiding interference with the main narrative flow.\n\nAtmosphere Creation:\nThe overall atmosphere should feel like watching a carefully orchestrated documentary or interactive magazine: information reveals progressively, rhythm is clear, and users always know where they are in the story. Scrolling provides a sense of control rather than passive viewing, allowing users to pause, review, or jump sections anytime. Visually maintain professionalism and restraint, letting content take center stage while technical implementation remains hidden behind the narrative experience."
      }
    },
    {
      "id": "core-skeuomorphism",
      "familyId": "skeuomorphism",
      "category": "core",
      "title": {
        "zh-CN": "拟物化",
        "en-US": "Skeuomorphism"
      },
      "description": {
        "zh-CN": "拟态，模拟真实世界的纹理、阴影和材质创造逼真数字介面。使用深色谾、阴影和3D效果增强视觉深度。适合需要直观操作和触觉反馈的应用。模拟真实纹理、阴影和材质创造逼真数字界面。采用深度设计和触觉逼真度，增强用户体验。",
        "en-US": "Simulates real-world textures, shadows, and materials to create realistic digital interfaces. Uses dimensional effects, realistic gradients, and tactile surfaces to build familiar, intuitive user experiences for intuitive, tactile interface design Particularly useful for touch interfaces and mobile applications where realism aids discoverability. Helps users understand affordances through familiar object metaphors This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. realistic material fidelity and tactile interface design."
      },
      "tags": [],
      "templatesCount": 3,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "此模板用于指导 AI 生成高质量的拟物化（Skeuomorphism）风格界面。\n\n### 核心指令\n**\"请使用 TailwindCSS 创建一个拟物化（Skeuomorphism）风格的界面，模拟真实世界的材质和物理特性。\"**\n\n### 1. 核心设计要求 (Core Design Requirements)\n\n拟物化设计的精髓在于对光影、材质纹理和物理体积的极致模拟。以下是构建此风格必须遵循的 7 个核心要求：\n\n#### 1.1 多层阴影系统 (Multi-layer Shadow System)\n真实的物体不会只有一层简单的阴影。需要通过组合多层 `box-shadow` 来模拟主光源投射的阴影（Drop Shadow）、环境光遮蔽（Ambient Occlusion）以及边缘的高光反射（Specular Highlight）。\n\n*   **光源设定**：通常设定在左上角（135度），导致高光在左上，阴影在右下。\n*   **混合模式**：深色阴影建议使用 `multiply` 混合模式的模拟色，高光建议使用 `screen` 或 `overlay`。\n\n```css\n/* Tailwind 任意值示例 - 复杂按钮阴影 */\n.shadow-skeuo {\n  box-shadow:\n    /* 外部深色投射阴影 (右下) */\n    6px 6px 12px 0px rgba(0, 0, 0, 0.25),\n    /* 外部环境光阴影 (紧贴) */\n    2px 2px 4px 0px rgba(0, 0, 0, 0.15),\n    /* 外部高光反射 (左上) */\n    -6px -6px 12px 0px rgba(255, 255, 255, 0.1),\n    /* 内部高光 (营造边缘倒角感) */\n    inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2),\n    /* 内部反光 (营造体积感) */\n    inset -1px -1px 0px 0px rgba(0, 0, 0, 0.1);\n}\n```\n\n#### 1.2 渐变模拟材质光泽 (Gradient Material Simulation)\n拒绝纯色背景。现实世界的材质表面总是因为曲率变化而呈现微妙的渐变。\n\n*   **金属质感**：使用对角线线性渐变，模拟金属拉丝或光泽漫反射。\n*   **皮革/木纹**：使用深色系的细微径向渐变，中心稍亮，边缘稍暗，模拟老化或光照集中效果。\n\n```css\n/* 金属拉丝银色表面 */\n.bg-metal-gradient {\n  background: linear-gradient(\n    135deg,\n    #e0e0e0 0%,\n    #f5f5f5 50%,\n    #d4d4d4 51%,\n    #c0c0c0 100%\n  );\n}\n\n/* 深空灰磨砂金属 */\n.bg-dark-metal {\n  background: linear-gradient(\n    145deg,\n    #3a4b5f 0%,\n    #2c3e50 100%\n  );\n}\n\n/* 木纹表面 */\n.bg-wood {\n  background: linear-gradient(\n    180deg,\n    #8b4513 0%,\n    #654321 100%\n  );\n}\n\n/* 皮革质感 */\n.bg-leather {\n  background: linear-gradient(\n    180deg,\n    #4a3c31 0%,\n    #2c2117 100%\n  );\n}\n```\n\n#### 1.3 立体边框效果 (3D Border Effects)\n边框不是简单的描边，而是表现物体厚度的关键。通过分别控制上下左右边框的颜色，可以模拟出凸起或凹陷的棱角。\n\n*   **凸起物体**：上/左边框亮（受光面），下/右边框暗（背光面）。\n*   **凹陷物体（如输入框）**：上/左边框暗（内部阴影投射），下/右边框亮（底部边缘反光）。\n\n```css\n/* 凸起边框效果 */\n.border-raised {\n  border-top: 1px solid rgba(255, 255, 255, 0.4);\n  border-left: 1px solid rgba(255, 255, 255, 0.4);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.3);\n  border-right: 1px solid rgba(0, 0, 0, 0.3);\n}\n\n/* 凹陷边框效果 */\n.border-recessed {\n  border-top: 2px solid rgba(0, 0, 0, 0.4);\n  border-left: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  border-right: 1px solid rgba(255, 255, 255, 0.1);\n}\n```\n\n#### 1.4 物理反馈交互 (Physical Feedback Interactions)\n交互不仅仅是颜色变化，更是物理位置和状态的改变。\n\n*   **按下状态（Active）**：凸起的按钮被按下时，阴影范围应缩小（离地面更近），内容向右下方位移（1px-2px），并可能出现内阴影（变为凹陷状态）。\n*   **悬停状态（Hover）**：亮度略微提升，阴影可能略微扩散（物体浮起）。\n\n```css\n/* 按钮默认状态 */\n.skeuo-interactive {\n  transform: translateY(0);\n  box-shadow: 0 4px 8px rgba(0,0,0,0.3);\n  transition: all 0.15s ease;\n}\n\n/* 悬停状态 */\n.skeuo-interactive:hover {\n  filter: brightness(110%);\n  box-shadow: 0 6px 12px rgba(0,0,0,0.35);\n}\n\n/* 按钮点击物理位移 */\n.skeuo-interactive:active {\n  transform: translateY(2px) translateX(1px);\n  box-shadow:\n    inset 2px 2px 5px rgba(0,0,0,0.3),\n    inset -2px -2px 5px rgba(255,255,255,0.1);\n  filter: brightness(90%);\n}\n```\n\n#### 1.5 文字质感效果 (Text Texture Effects)\n文字应该看起来像是雕刻在材质上，或者像是贴在上面的金属铭牌。\n\n*   **雕刻文字（Letterpress）**：文字颜色深于背景，下方有浅色投影（模拟凹槽底部高光），上方有深色投影（模拟凹槽顶部阴影）。\n*   **凸起文字（Embossed）**：文字颜色浅于背景，下方有深色投影。\n\n```css\n/* 雕刻文字效果 */\n.text-engraved {\n  color: rgba(0, 0, 0, 0.6);\n  text-shadow:\n    0px 1px 1px rgba(255, 255, 255, 0.3), /* 底部高光 */\n    0px -1px 0px rgba(0, 0, 0, 0.5);      /* 顶部内阴影 */\n}\n\n/* 凸起文字效果 */\n.text-embossed {\n  color: rgba(255, 255, 255, 0.9);\n  text-shadow:\n    0 1px 0 rgba(255,255,255,0.8),\n    0 2px 3px rgba(0,0,0,0.3);\n}\n\n/* 发光文字效果 */\n.text-glow {\n  text-shadow:\n    0 0 10px rgba(98, 110, 234, 0.8),\n    0 0 20px rgba(98, 110, 234, 0.5);\n}\n```\n\n#### 1.6 材质纹理叠加 (Material Texture Overlays)\n过于光滑的表面会显得像塑料（除非是玻璃）。需要叠加噪点或纹理来增加真实感。\n\n*   **噪点（Noise）**：使用 SVG 或 base64 噪点图片作为背景遮罩。\n*   **皮革/织物**：使用细微的平铺纹理图案。\n\n```css\n/* 噪点纹理叠加类 */\n.texture-noise {\n  position: relative;\n}\n.texture-noise::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  opacity: 0.05;\n  background-image: url(\"data:image/svg+xml,...\"); /* 噪点SVG */\n  pointer-events: none;\n  mix-blend-mode: overlay;\n}\n\n/* 金属拉丝纹理 */\n.texture-brushed::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: repeating-linear-gradient(\n    90deg,\n    transparent,\n    transparent 1px,\n    rgba(255,255,255,0.02) 1px,\n    rgba(255,255,255,0.02) 2px\n  );\n  pointer-events: none;\n}\n```\n\n#### 1.7 光影动态效果 (Dynamic Lighting)\n如果可能，通过简单的 CSS 动画模拟光源的微小移动或金属光泽的流转，增加\"活\"的感觉。\n\n```css\n/* 模拟金属光泽流转 */\n@keyframes sheen {\n  0% { background-position: 0% 50%; }\n  100% { background-position: 100% 50%; }\n}\n.metal-sheen:hover {\n  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);\n  background-size: 200% 100%;\n  animation: sheen 1s linear;\n}\n\n/* 光环扩散效果 */\n@keyframes glow-pulse {\n  0%, 100% { box-shadow: 0 0 10px rgba(102,126,234,0.3); }\n  50% { box-shadow: 0 0 20px rgba(102,126,234,0.6); }\n}\n.glow-pulse {\n  animation: glow-pulse 2s ease-in-out infinite;\n}\n```\n\n### 2. 完整配色方案 (Color Palette)\n\n请在 Tailwind 配置中注册以下颜色，以确保设计的一致性。\n\n#### 基础材质色 (Materials)\n*   **深灰金属 (Metal Base)**: `#2c3e50` (主色调), `#34495e` (亮部), `#4a5568` (环境色)\n*   **深棕木纹 (Wood Base)**: `#4a3c31` (主色调), `#654321` (亮部), `#8b4513` (纹理色)\n*   **深蓝玻璃 (Glass Base)**: `#1e3a5f` (主色调), `#2c5282` (透光色)\n\n#### 光影功能色 (Lighting)\n*   **高光 (Highlight)**:\n    *   强高光: `#ffffff`\n    *   金属高光: `#c0c0c0`\n    *   柔和高光: `rgba(255, 255, 255, 0.5)`\n*   **阴影 (Shadow)**:\n    *   深部阴影: `rgba(0, 0, 0, 0.5)`\n    *   环境阴影: `rgba(0, 0, 0, 0.3)`\n\n#### 交互点缀色 (Accents)\n*   **指示灯蓝 (Indicator Blue)**: `#667eea` (常态), `#7f9cf5` (发光态)\n*   **琥珀金 (Amber Gold)**: `#f59e0b` (警告/高亮), `#fbbf24` (金属铭牌色)\n*   **警示红 (Alert Red)**: `#e53e3e` (开关/错误)\n\n### 3. 关键 CSS 类实现 (Key Component Implementations)\n\n以下是基于 Tailwind CSS 的 5 个核心组件实现示例。\n\n#### 3.1 拟物化按钮 (.skeuo-button)\n*一个带有明显厚度和点击反馈的金属质感按钮。*\n\n```html\n<button class=\"\n  relative overflow-hidden px-8 py-4 rounded-lg font-bold tracking-wider text-gray-200 uppercase\n  /* 基础渐变背景 */\n  bg-gradient-to-b from-[#34495e] to-[#2c3e50]\n  /* 边框高光与阴影 */\n  border-t border-l border-white/10 border-b border-r border-black/40\n  /* 复杂外阴影 */\n  shadow-[6px_6px_12px_rgba(0,0,0,0.4),-4px_-4px_10px_rgba(255,255,255,0.05)]\n  /* 交互状态：Hover */\n  hover:brightness-110 hover:shadow-[8px_8px_16px_rgba(0,0,0,0.45),-6px_-6px_14px_rgba(255,255,255,0.08)]\n  /* 交互状态：Active (按下) */\n  active:translate-y-[2px] active:translate-x-[1px]\n  active:shadow-[inset_4px_4px_8px_rgba(0,0,0,0.5),inset_-4px_-4px_8px_rgba(255,255,255,0.05)]\n  active:border-t-black/30 active:border-b-white/10\n  transition-all duration-150 ease-out\n\">\n  <!-- 内部文字雕刻效果 -->\n  <span class=\"drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] text-shadow-[0_-1px_0_rgba(0,0,0,1)]\">\n    Execute\n  </span>\n</button>\n```\n\n#### 3.2 拟物化卡片 (.skeuo-card)\n*作为内容容器，模拟放置在桌面上的实体面板，具有柔和的边缘和纹理。*\n\n```html\n<div class=\"\n  relative p-6 rounded-xl\n  /* 深色哑光金属背景 */\n  bg-[#2c3e50]\n  /* 噪点纹理叠加 (假设已配置texture-noise) */\n  texture-noise\n  /* 混合边框：顶部亮线，底部暗线 */\n  ring-1 ring-white/5 ring-inset\n  /* 深度阴影 */\n  shadow-[10px_10px_20px_rgba(0,0,0,0.5),-8px_-8px_16px_rgba(255,255,255,0.03)]\n\">\n  <!-- 卡片顶部的凹槽标题栏 -->\n  <div class=\"\n    -mx-2 -mt-2 mb-4 py-2 px-4 rounded bg-black/20\n    border-b border-white/5 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]\n  \">\n    <h3 class=\"text-gray-400 text-sm font-bold uppercase tracking-widest drop-shadow-md\">\n      System Control\n    </h3>\n  </div>\n  <!-- 卡片内容 -->\n  <div class=\"text-gray-300\">\n    Content goes here...\n  </div>\n</div>\n```\n\n#### 3.3 拟物化输入框 (.skeuo-input)\n*模拟嵌入面板内部的凹槽显示屏或输入区域。*\n\n```html\n<div class=\"relative group\">\n  <input type=\"text\" placeholder=\"Enter command...\" class=\"\n    w-full px-5 py-3 rounded-lg outline-none\n    /* 深色凹陷背景 */\n    bg-[#1a2634] text-gray-200\n    /* 强烈的内阴影模拟凹陷深度 */\n    shadow-[inset_4px_4px_10px_rgba(0,0,0,0.6),inset_-2px_-2px_6px_rgba(255,255,255,0.05)]\n    /* 边框处理：底部反光，顶部阴影 */\n    border-b border-white/10 border-t border-black/50 border-x border-black/30\n    /* 占位符样式 */\n    placeholder-gray-600\n    /* 聚焦状态：内发光 */\n    focus:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.7),0_0_10px_rgba(102,126,234,0.3)]\n    focus:text-blue-200\n    transition-all duration-200\n  \" />\n</div>\n```\n\n#### 3.4 拟物化开关 (.skeuo-switch)\n*一个真实的物理拨动开关，具有清晰的开/关状态和机械感。*\n\n```html\n<!-- 开关底座 -->\n<label class=\"\n  relative inline-flex items-center cursor-pointer\n  w-20 h-10 rounded-full\n  /* 凹陷底座轨道 */\n  bg-[#1a2634]\n  shadow-[inset_3px_3px_6px_rgba(0,0,0,0.6),inset_-1px_-1px_2px_rgba(255,255,255,0.05)]\n  border border-black/20\n\">\n  <input type=\"checkbox\" class=\"sr-only peer\">\n\n  <!-- 拨杆 (Thumb) -->\n  <div class=\"\n    absolute left-1 top-1 w-8 h-8 rounded-full\n    /* 拨杆材质：凸起的金属/塑料球体 */\n    bg-gradient-to-br from-[#4a5568] to-[#2d3748]\n    /* 拨杆立体感 */\n    shadow-[2px_2px_5px_rgba(0,0,0,0.5),inset_2px_2px_4px_rgba(255,255,255,0.2)]\n    border border-t-white/10 border-b-black/40\n    /* 状态过渡 */\n    transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]\n    /* 选中状态位置与样式 */\n    peer-checked:translate-x-10\n    peer-checked:bg-gradient-to-br peer-checked:from-[#667eea] peer-checked:to-[#5a67d8]\n    peer-checked:shadow-[0_0_15px_rgba(102,126,234,0.6),2px_2px_5px_rgba(0,0,0,0.4)]\n  \">\n    <!-- 拨杆上的防滑纹理细节 -->\n    <div class=\"absolute inset-0 flex items-center justify-center gap-[2px] opacity-30\">\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n    </div>\n  </div>\n</label>\n```\n\n#### 3.5 拟物化面板 (.skeuo-panel)\n*多层级的大型控制面板，包含螺丝钉装饰。*\n\n```html\n<div class=\"\n  relative rounded-2xl p-8\n  /* 面板主材质 */\n  bg-[#2c3e50]\n  /* 边缘高光倒角 */\n  border-t-2 border-l border-white/10 border-b-4 border-r-2 border-black/50\n  /* 巨大的投影，使其看起来浮在背景之上 */\n  shadow-[20px_20px_60px_rgba(0,0,0,0.6),-10px_-10px_30px_rgba(255,255,255,0.05)]\n\">\n  <!-- 装饰性螺丝钉 (四角) -->\n  <div class=\"absolute top-4 left-4 w-3 h-3 rounded-full bg-gray-400 shadow-[inset_1px_1px_2px_rgba(0,0,0,0.8),1px_1px_0_rgba(255,255,255,0.2)] flex items-center justify-center\">\n    <div class=\"w-full h-[1px] bg-gray-600 rotate-45\"></div>\n    <div class=\"w-full h-[1px] bg-gray-600 -rotate-45\"></div>\n  </div>\n  <div class=\"absolute top-4 right-4 w-3 h-3 rounded-full bg-gray-400 shadow-[inset_1px_1px_2px_rgba(0,0,0,0.8),1px_1px_0_rgba(255,255,255,0.2)] flex items-center justify-center\">\n    <div class=\"w-full h-[1px] bg-gray-600 rotate-12\"></div> <!-- 随机角度 -->\n    <div class=\"w-full h-[1px] bg-gray-600 -rotate-[78deg]\"></div>\n  </div>\n\n  <!-- 面板内容区域 -->\n  <div class=\"h-full w-full bg-[#243342] rounded-lg shadow-[inset_2px_2px_8px_rgba(0,0,0,0.4)] border border-white/5 p-4\">\n    <!-- Content -->\n  </div>\n</div>\n```\n\n### 4. Tailwind CSS 配置 (Configuration)\n\n在 `tailwind.config.js` 中扩展以下配置以支持复杂的拟物化效果。\n\n```javascript\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        skeuo: {\n          dark: '#2c3e50',\n          darker: '#1a2634',\n          light: '#34495e',\n          highlight: 'rgba(255, 255, 255, 0.1)',\n          shadow: 'rgba(0, 0, 0, 0.4)',\n          accent: '#667eea',\n          gold: '#f59e0b',\n        }\n      },\n      boxShadow: {\n        'skeuo-raised': '6px 6px 12px 0px rgba(0, 0, 0, 0.3), -4px -4px 10px 0px rgba(255, 255, 255, 0.05)',\n        'skeuo-recessed': 'inset 4px 4px 8px 0px rgba(0, 0, 0, 0.4), inset -3px -3px 6px 0px rgba(255, 255, 255, 0.05)',\n        'skeuo-flat': '2px 2px 5px 0px rgba(0, 0, 0, 0.2), -1px -1px 2px 0px rgba(255, 255, 255, 0.05)',\n      },\n      backgroundImage: {\n        'metal-brushed': \"linear-gradient(135deg, #34495e 0%, #2c3e50 100%)\",\n        'noise': \"url('/path/to/noise.png')\", // 需要准备噪点素材\n      }\n    }\n  }\n}\n```\n\n### 5. 重要提示 (Important Tips)\n\n1.  **拒绝纯黑和纯白**：在拟物化风格中，几乎不使用 `#000` 或 `#fff` 作为背景色。使用深灰、深蓝或米色作为基础，纯色仅用于极亮的高光点。\n2.  **光源一致性**：必须严格遵守光源方向（通常是左上角）。如果一个按钮的阴影在右下，那么所有元素的阴影都必须在右下，凹陷元素的内阴影则相反（左上深，右下亮）。\n3.  **对比度控制**：拟物化界面由于包含大量阴影和渐变，容易导致视觉杂乱。务必保持文本与背景的足够对比度，必要时给文字加外发光或投影以提升可读性。\n4.  **圆角处理**：圆角（Border Radius）越明显，物体的实体感越强。避免使用直角，那看起来像平面设计。\n5.  **细节决定成败**：添加细微的杂色（Noise）、划痕纹理、螺丝钉、接缝线等细节，能极大提升真实感。\n6.  **物理动效**：所有的过渡动画都应该是线性的或缓出的（ease-out），模拟物体在物理世界中的惯性。不要使用瞬间变化的动画。\n7.  **层级观念**：始终思考 Z 轴。背景是地基，面板是地板，卡片是桌子，按钮是桌上的物体。层级越高，投影越扩散。\n8.  **排版留白**：由于拟物化元素视觉比重很大（Heavy），需要比扁平化设计更多的留白来呼吸，否则界面会显得非常拥挤压抑。\n\n---",
        "en-US": "This template is designed to guide AI in generating high-quality Skeuomorphism style interfaces.\n\n### Core Instruction\n**\"Please create a Skeuomorphism style interface using TailwindCSS, simulating real-world materials and physical properties.\"**\n\n### 1. Core Design Requirements\n\nThe essence of Skeuomorphism lies in the extreme simulation of light, shadow, material texture, and physical volume. The following 7 core requirements must be adhered to when building this style:\n\n#### 1.1 Multi-layer Shadow System\nReal objects never have just a single layer of simple shadow. You need to combine multiple `box-shadow` layers to simulate the Drop Shadow cast by the main light source, Ambient Occlusion, and the Specular Highlight on the edges.\n\n*   **Light Source**: Usually set at the top-left (135 degrees), resulting in highlights on the top-left and shadows on the bottom-right.\n*   **Blending Modes**: It is recommended to use `multiply` mode for dark shadows and `screen` or `overlay` for highlights.\n\n```css\n/* Tailwind Arbitrary Value Example - Complex Button Shadow */\n.shadow-skeuo {\n  box-shadow:\n    /* External Dark Drop Shadow (Bottom Right) */\n    6px 6px 12px 0px rgba(0, 0, 0, 0.25),\n    /* External Ambient Shadow (Close) */\n    2px 2px 4px 0px rgba(0, 0, 0, 0.15),\n    /* External Highlight Reflection (Top Left) */\n    -6px -6px 12px 0px rgba(255, 255, 255, 0.1),\n    /* Internal Highlight (Creates Bevel Feel) */\n    inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2),\n    /* Internal Reflection (Creates Volume) */\n    inset -1px -1px 0px 0px rgba(0, 0, 0, 0.1);\n}\n```\n\n#### 1.2 Gradient Material Simulation\nAvoid solid background colors. Surfaces in the real world always show subtle gradients due to curvature changes.\n\n*   **Metal Texture**: Use diagonal linear gradients to simulate brushed metal or diffuse light reflection.\n*   **Leather/Wood**: Use subtle radial gradients in dark tones, lighter in the center and darker at the edges, to simulate aging or focused lighting.\n\n```css\n/* Brushed Silver Metal Surface */\n.bg-metal-gradient {\n  background: linear-gradient(\n    135deg,\n    #e0e0e0 0%,\n    #f5f5f5 50%,\n    #d4d4d4 51%,\n    #c0c0c0 100%\n  );\n}\n\n/* Deep Space Grey Matte Metal */\n.bg-dark-metal {\n  background: linear-gradient(\n    145deg,\n    #3a4b5f 0%,\n    #2c3e50 100%\n  );\n}\n\n/* Wood Surface */\n.bg-wood {\n  background: linear-gradient(\n    180deg,\n    #8b4513 0%,\n    #654321 100%\n  );\n}\n\n/* Leather Texture */\n.bg-leather {\n  background: linear-gradient(\n    180deg,\n    #4a3c31 0%,\n    #2c2117 100%\n  );\n}\n```\n\n#### 1.3 3D Border Effects\nBorders are not just simple strokes; they are key to expressing object thickness. By controlling the colors of the top, bottom, left, and right borders separately, you can simulate raised or recessed edges.\n\n*   **Raised Object**: Top/Left borders are light (lit side), Bottom/Right borders are dark (shadow side).\n*   **Recessed Object (e.g., Input)**: Top/Left borders are dark (internal shadow cast), Bottom/Right borders are light (bottom edge reflection).\n\n```css\n/* Raised Border Effect */\n.border-raised {\n  border-top: 1px solid rgba(255, 255, 255, 0.4);\n  border-left: 1px solid rgba(255, 255, 255, 0.4);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.3);\n  border-right: 1px solid rgba(0, 0, 0, 0.3);\n}\n\n/* Recessed Border Effect */\n.border-recessed {\n  border-top: 2px solid rgba(0, 0, 0, 0.4);\n  border-left: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  border-right: 1px solid rgba(255, 255, 255, 0.1);\n}\n```\n\n#### 1.4 Physical Feedback Interactions\nInteraction is not just a change in color, but a change in physical position and state.\n\n*   **Active State (Pressed)**: When a raised button is pressed, the shadow range should decrease (closer to the surface), the content shifts to the bottom-right (1px-2px), and an inner shadow may appear (becoming recessed).\n*   **Hover State**: Brightness increases slightly, and shadows may diffuse slightly (object lifts up).\n\n```css\n/* Button Default State */\n.skeuo-interactive {\n  transform: translateY(0);\n  box-shadow: 0 4px 8px rgba(0,0,0,0.3);\n  transition: all 0.15s ease;\n}\n\n/* Hover State */\n.skeuo-interactive:hover {\n  filter: brightness(110%);\n  box-shadow: 0 6px 12px rgba(0,0,0,0.35);\n}\n\n/* Button Click Physical Displacement */\n.skeuo-interactive:active {\n  transform: translateY(2px) translateX(1px);\n  box-shadow:\n    inset 2px 2px 5px rgba(0,0,0,0.3),\n    inset -2px -2px 5px rgba(255,255,255,0.1);\n  filter: brightness(90%);\n}\n```\n\n#### 1.5 Text Texture Effects\nText should look like it is engraved into the material or like a metal plate attached to it.\n\n*   **Letterpress (Engraved)**: Text color is darker than the background, with a light shadow below (simulating the highlight at the bottom of the groove) and a dark shadow above (simulating the shadow at the top of the groove).\n*   **Embossed (Raised)**: Text color is lighter than the background, with a dark shadow below.\n\n```css\n/* Engraved Text Effect */\n.text-engraved {\n  color: rgba(0, 0, 0, 0.6);\n  text-shadow:\n    0px 1px 1px rgba(255, 255, 255, 0.3), /* Bottom Highlight */\n    0px -1px 0px rgba(0, 0, 0, 0.5);      /* Top Inner Shadow */\n}\n\n/* Embossed Text Effect */\n.text-embossed {\n  color: rgba(255, 255, 255, 0.9);\n  text-shadow:\n    0 1px 0 rgba(255,255,255,0.8),\n    0 2px 3px rgba(0,0,0,0.3);\n}\n\n/* Glowing Text Effect */\n.text-glow {\n  text-shadow:\n    0 0 10px rgba(98, 110, 234, 0.8),\n    0 0 20px rgba(98, 110, 234, 0.5);\n}\n```\n\n#### 1.6 Material Texture Overlays\nSurfaces that are too smooth look like plastic (unless it's glass). You need to overlay noise or textures to add realism.\n\n*   **Noise**: Use an SVG or base64 noise image as a background mask.\n*   **Leather/Fabric**: Use subtle tiling texture patterns.\n\n```css\n/* Noise Texture Overlay Class */\n.texture-noise {\n  position: relative;\n}\n.texture-noise::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  opacity: 0.05;\n  background-image: url(\"data:image/svg+xml,...\"); /* Noise SVG */\n  pointer-events: none;\n  mix-blend-mode: overlay;\n}\n\n/* Brushed Metal Texture */\n.texture-brushed::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: repeating-linear-gradient(\n    90deg,\n    transparent,\n    transparent 1px,\n    rgba(255,255,255,0.02) 1px,\n    rgba(255,255,255,0.02) 2px\n  );\n  pointer-events: none;\n}\n```\n\n#### 1.7 Dynamic Lighting Effects\nIf possible, use simple CSS animations to simulate the slight movement of a light source or the shifting sheen on metal, adding a sense of \"life\".\n\n```css\n/* Simulating Metal Sheen Flow */\n@keyframes sheen {\n  0% { background-position: 0% 50%; }\n  100% { background-position: 100% 50%; }\n}\n.metal-sheen:hover {\n  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);\n  background-size: 200% 100%;\n  animation: sheen 1s linear;\n}\n\n/* Glow Pulse Effect */\n@keyframes glow-pulse {\n  0%, 100% { box-shadow: 0 0 10px rgba(102,126,234,0.3); }\n  50% { box-shadow: 0 0 20px rgba(102,126,234,0.6); }\n}\n.glow-pulse {\n  animation: glow-pulse 2s ease-in-out infinite;\n}\n```\n\n### 2. Complete Color Palette\n\nPlease register the following colors in your Tailwind configuration to ensure design consistency.\n\n#### Material Bases\n*   **Metal Base**: `#2c3e50` (Main), `#34495e` (Light), `#4a5568` (Ambient)\n*   **Wood Base**: `#4a3c31` (Main), `#654321` (Light), `#8b4513` (Texture)\n*   **Glass Base**: `#1e3a5f` (Main), `#2c5282` (Translucent)\n\n#### Lighting & Shadows\n*   **Highlight**:\n    *   Strong Highlight: `#ffffff`\n    *   Metal Highlight: `#c0c0c0`\n    *   Soft Highlight: `rgba(255, 255, 255, 0.5)`\n*   **Shadow**:\n    *   Deep Shadow: `rgba(0, 0, 0, 0.5)`\n    *   Ambient Shadow: `rgba(0, 0, 0, 0.3)`\n\n#### Interaction Accents\n*   **Indicator Blue**: `#667eea` (Normal), `#7f9cf5` (Glowing)\n*   **Amber Gold**: `#f59e0b` (Warning/Highlight), `#fbbf24` (Plate Color)\n*   **Alert Red**: `#e53e3e` (Switch/Error)\n\n### 3. Key Component Implementations\n\nHere are 5 core component implementation examples based on Tailwind CSS.\n\n#### 3.1 Skeuomorphic Button (.skeuo-button)\n*A metal-textured button with distinct thickness and click feedback.*\n\n```html\n<button class=\"\n  relative overflow-hidden px-8 py-4 rounded-lg font-bold tracking-wider text-gray-200 uppercase\n  /* Base Gradient Background */\n  bg-gradient-to-b from-[#34495e] to-[#2c3e50]\n  /* Border Highlights & Shadows */\n  border-t border-l border-white/10 border-b border-r border-black/40\n  /* Complex Drop Shadows */\n  shadow-[6px_6px_12px_rgba(0,0,0,0.4),-4px_-4px_10px_rgba(255,255,255,0.05)]\n  /* Interaction State: Hover */\n  hover:brightness-110 hover:shadow-[8px_8px_16px_rgba(0,0,0,0.45),-6px_-6px_14px_rgba(255,255,255,0.08)]\n  /* Interaction State: Active (Pressed) */\n  active:translate-y-[2px] active:translate-x-[1px]\n  active:shadow-[inset_4px_4px_8px_rgba(0,0,0,0.5),inset_-4px_-4px_8px_rgba(255,255,255,0.05)]\n  active:border-t-black/30 active:border-b-white/10\n  transition-all duration-150 ease-out\n\">\n  <!-- Internal Text Engraving Effect -->\n  <span class=\"drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] text-shadow-[0_-1px_0_rgba(0,0,0,1)]\">\n    Execute\n  </span>\n</button>\n```\n\n#### 3.2 Skeuomorphic Card (.skeuo-card)\n*A content container simulating a physical panel placed on a desk, with soft edges and texture.*\n\n```html\n<div class=\"\n  relative p-6 rounded-xl\n  /* Dark Matte Metal Background */\n  bg-[#2c3e50]\n  /* Noise Texture Overlay (Assume texture-noise is configured) */\n  texture-noise\n  /* Mixed Border: Light top line, dark bottom line */\n  ring-1 ring-white/5 ring-inset\n  /* Deep Shadow */\n  shadow-[10px_10px_20px_rgba(0,0,0,0.5),-8px_-8px_16px_rgba(255,255,255,0.03)]\n\">\n  <!-- Recessed Title Bar at the top of the card -->\n  <div class=\"\n    -mx-2 -mt-2 mb-4 py-2 px-4 rounded bg-black/20\n    border-b border-white/5 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]\n  \">\n    <h3 class=\"text-gray-400 text-sm font-bold uppercase tracking-widest drop-shadow-md\">\n      System Control\n    </h3>\n  </div>\n  <!-- Card Content -->\n  <div class=\"text-gray-300\">\n    Content goes here...\n  </div>\n</div>\n```\n\n#### 3.3 Skeuomorphic Input (.skeuo-input)\n*Simulating a recessed display screen or input area embedded within a panel.*\n\n```html\n<div class=\"relative group\">\n  <input type=\"text\" placeholder=\"Enter command...\" class=\"\n    w-full px-5 py-3 rounded-lg outline-none\n    /* Dark Recessed Background */\n    bg-[#1a2634] text-gray-200\n    /* Strong Inner Shadow Simulating Depth */\n    shadow-[inset_4px_4px_10px_rgba(0,0,0,0.6),inset_-2px_-2px_6px_rgba(255,255,255,0.05)]\n    /* Border Treatment: Bottom reflection, Top shadow */\n    border-b border-white/10 border-t border-black/50 border-x border-black/30\n    /* Placeholder Styling */\n    placeholder-gray-600\n    /* Focus State: Inner Glow */\n    focus:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.7),0_0_10px_rgba(102,126,234,0.3)]\n    focus:text-blue-200\n    transition-all duration-200\n  \" />\n</div>\n```\n\n#### 3.4 Skeuomorphic Switch (.skeuo-switch)\n*A realistic physical toggle switch with clear on/off states and mechanical feel.*\n\n```html\n<!-- Switch Base -->\n<label class=\"\n  relative inline-flex items-center cursor-pointer\n  w-20 h-10 rounded-full\n  /* Recessed Base Track */\n  bg-[#1a2634]\n  shadow-[inset_3px_3px_6px_rgba(0,0,0,0.6),inset_-1px_-1px_2px_rgba(255,255,255,0.05)]\n  border border-black/20\n\">\n  <input type=\"checkbox\" class=\"sr-only peer\">\n\n  <!-- Toggle Thumb -->\n  <div class=\"\n    absolute left-1 top-1 w-8 h-8 rounded-full\n    /* Thumb Material: Raised Metal/Plastic Sphere */\n    bg-gradient-to-br from-[#4a5568] to-[#2d3748]\n    /* Thumb 3D Feel */\n    shadow-[2px_2px_5px_rgba(0,0,0,0.5),inset_2px_2px_4px_rgba(255,255,255,0.2)]\n    border border-t-white/10 border-b-black/40\n    /* State Transition */\n    transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]\n    /* Checked State Position & Style */\n    peer-checked:translate-x-10\n    peer-checked:bg-gradient-to-br peer-checked:from-[#667eea] peer-checked:to-[#5a67d8]\n    peer-checked:shadow-[0_0_15px_rgba(102,126,234,0.6),2px_2px_5px_rgba(0,0,0,0.4)]\n  \">\n    <!-- Grip Texture Details on Thumb -->\n    <div class=\"absolute inset-0 flex items-center justify-center gap-[2px] opacity-30\">\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n        <div class=\"w-[1px] h-4 bg-black/50\"></div>\n    </div>\n  </div>\n</label>\n```\n\n#### 3.5 Skeuomorphic Panel (.skeuo-panel)\n*A large-scale control panel with multi-level depth, featuring decorative screws.*\n\n```html\n<div class=\"\n  relative rounded-2xl p-8\n  /* Panel Main Material */\n  bg-[#2c3e50]\n  /* Edge Highlight Bevel */\n  border-t-2 border-l border-white/10 border-b-4 border-r-2 border-black/50\n  /* Massive Drop Shadow, making it float above background */\n  shadow-[20px_20px_60px_rgba(0,0,0,0.6),-10px_-10px_30px_rgba(255,255,255,0.05)]\n\">\n  <!-- Decorative Screws (Corners) -->\n  <div class=\"absolute top-4 left-4 w-3 h-3 rounded-full bg-gray-400 shadow-[inset_1px_1px_2px_rgba(0,0,0,0.8),1px_1px_0_rgba(255,255,255,0.2)] flex items-center justify-center\">\n    <div class=\"w-full h-[1px] bg-gray-600 rotate-45\"></div>\n    <div class=\"w-full h-[1px] bg-gray-600 -rotate-45\"></div>\n  </div>\n  <div class=\"absolute top-4 right-4 w-3 h-3 rounded-full bg-gray-400 shadow-[inset_1px_1px_2px_rgba(0,0,0,0.8),1px_1px_0_rgba(255,255,255,0.2)] flex items-center justify-center\">\n    <div class=\"w-full h-[1px] bg-gray-600 rotate-12\"></div> <!-- Random Angle -->\n    <div class=\"w-full h-[1px] bg-gray-600 -rotate-[78deg]\"></div>\n  </div>\n\n  <!-- Panel Content Area -->\n  <div class=\"h-full w-full bg-[#243342] rounded-lg shadow-[inset_2px_2px_8px_rgba(0,0,0,0.4)] border border-white/5 p-4\">\n    <!-- Content -->\n  </div>\n</div>\n```\n\n### 4. Tailwind CSS Configuration\n\nExtend the following configuration in `tailwind.config.js` to support complex skeuomorphic effects.\n\n```javascript\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        skeuo: {\n          dark: '#2c3e50',\n          darker: '#1a2634',\n          light: '#34495e',\n          highlight: 'rgba(255, 255, 255, 0.1)',\n          shadow: 'rgba(0, 0, 0, 0.4)',\n          accent: '#667eea',\n          gold: '#f59e0b',\n        }\n      },\n      boxShadow: {\n        'skeuo-raised': '6px 6px 12px 0px rgba(0, 0, 0, 0.3), -4px -4px 10px 0px rgba(255, 255, 255, 0.05)',\n        'skeuo-recessed': 'inset 4px 4px 8px 0px rgba(0, 0, 0, 0.4), inset -3px -3px 6px 0px rgba(255, 255, 255, 0.05)',\n        'skeuo-flat': '2px 2px 5px 0px rgba(0, 0, 0, 0.2), -1px -1px 2px 0px rgba(255, 255, 255, 0.05)',\n      },\n      backgroundImage: {\n        'metal-brushed': \"linear-gradient(135deg, #34495e 0%, #2c3e50 100%)\",\n        'noise': \"url('/path/to/noise.png')\", // Noise asset required\n      }\n    }\n  }\n}\n```\n\n### 5. Important Tips\n\n1.  **Avoid Pure Black and White**: In Skeuomorphism, `#000` or `#fff` are rarely used as background colors. Use dark gray, dark blue, or beige as bases, reserving pure colors for extreme highlights only.\n2.  **Lighting Consistency**: You must strictly adhere to the light source direction (usually top-left). If a button's shadow is on the bottom-right, all elements must cast shadows to the bottom-right, and recessed elements must have opposite inner shadows (top-left dark, bottom-right light).\n3.  **Contrast Control**: Skeuomorphic interfaces can easily become visually cluttered due to the abundance of shadows and gradients. Ensure sufficient contrast between text and background, adding an outer glow or drop shadow to text if necessary to improve readability.\n4.  **Rounded Corners**: The more distinct the border radius, the stronger the sense of physical solidity. Avoid sharp right angles, as they look like flat design.\n5.  **Details Matter**: Adding subtle noise, scratch textures, screws, and seam lines can significantly enhance realism.\n6.  **Physical Motion**: All transition animations should be linear or ease-out, simulating the inertia of objects in the physical world. Do not use instant changes.\n7.  **Hierarchy**: Always think in terms of the Z-axis. The background is the foundation, the panel is the floor, the card is the table, and the button is the object on the table. The higher the level, the more diffused the shadow.\n8.  **Whitespace**: Since skeuomorphic elements carry a heavy visual weight, they require more whitespace to breathe compared to flat design; otherwise, the interface will feel very cramped and oppressive."
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名对真实材质和物理交互极度敏感的 UI 设计师，专门为高端设备、专业工具和沉浸式体验设计「拟物化（Skeuomorphism）」界面。你需要向团队解释，这一套拟物风格在产品中的定位、视觉语言和体验原则。\n\n场景定位：拟物化家族适用于需要传达「真实可靠」「高级器物感」的场景，例如音乐播放器、调音台、复古仪表盘、专业控制面板、精密工具仪表界面，或者希望让用户有「上手现成设备」错觉的产品。它不追求极致信息密度，而是强调可触碰的手感与使用仪式感，让用户觉得自己正在操作一件实体作品，而不是一块抽象的平面屏幕。\n\n视觉设计理念：拟物化的核心是用数字界面模拟现实世界的材质和结构，但不是简单贴照片，而是提炼质感特征，重新在 UI 中建立一套「可信的物理世界」。界面中的卡片像金属面板、皮革封套或木质底座，控件像真实按钮、旋钮或滑块：带有厚度、边缘、光泽和阴影。色彩和构图都围绕这些「器物」展开，避免被纯平化削弱立体感，同时又保持一定的秩序和可读性。\n\n材质与质感：在拟物化家族中，金属、木纹、皮革和玻璃是常见主角。金属面板通过冷色渐变和高对比高光表现坚硬与冷感，木纹底板用温暖棕色与细腻纹理营造复古与温度，皮革表面用柔和暗棕与细微噪点传达舒适握持感，玻璃按钮或指示灯则用半透明与内发光强调科技感。所有材质都依靠渐变、内外阴影和高光线条组合完成，而不是依赖复杂图片，目的是既保留质感，又便于在不同分辨率和主题下调整。\n\n交互体验：交互反馈要让用户感觉像「按下真实按钮」或「拨动真实开关」。默认状态下，按钮略微凸起，边缘高光清晰；悬停时高光增强、颜色稍亮，暗示手指靠近；按下时按钮明显下压，阴影变小或转为内阴影，模拟实体按键被压入面板。旋钮和滑块在拖动时，刻度和轨迹条会同步更新，指示灯或读数随之变化。动效节奏通常偏短促但有重量感，类似机械部件的运动，而非轻盈跳跃的扁平动画。\n\n整体氛围：拟物化家族营造的是一种「在操作真实设备」的氛围。用户看到界面时，会感到自己坐在录音棚、驾驶舱或老式控制室前，面前是一块沉稳的金属面板，上面布满旋钮、指示灯和仪表。视觉上强调厚重、可靠、偏暗色的氛围，全局对比度充足，但不会被刺眼高光打断；每一次点击和滑动都像在和物理世界互动，适合那些希望强调质感、工艺和仪式体验的产品。\n\n---",
        "en-US": "Role: You are a UI designer obsessed with real-world materials and physical interactions, specialising in skeuomorphic interfaces for high-end devices, professional tools and immersive experiences. You need to explain how the Skeuomorphism family should look and feel inside a product.\n\nScene: The skeuomorphic family is suited to experiences that must feel tangible and trustworthy: music players and mixing consoles, retro dashboards, control panels for instruments or utilities, and any UI that should resemble a physical piece of equipment rather than an abstract flat screen. It is less about maximum information density and more about tactile feedback and ceremony, making users feel they are operating a crafted object.\n\nVisual philosophy: Skeuomorphic design uses digital graphics to simulate physical objects, but not by pasting photos. Instead it distills the key traits of materials and reconstructs a consistent “miniature physical world” in the interface. Cards look like metal plates, leather covers or wooden bases; controls look like real buttons, knobs or sliders with thickness, edges, gloss and shadow. Color and composition revolve around these objects, avoiding overly flat treatments that would erase depth while still preserving clarity and readability.\n\nMaterial and texture: Metals, wood, leather and glass are the main materials. Metal panels use cool gradients and strong highlights to suggest hardness and precision; wooden surfaces use warm browns and grain to convey heritage and warmth; leather pads use soft dark browns and fine noise to feel comfortable and well-used; glass buttons and indicators use translucency and inner glow to add a subtle tech edge. All of this is built from gradients, inner/outer shadows and highlight lines rather than heavy bitmap textures, so the style remains controllable and adaptable.\n\nInteraction experience: Interactions should feel like pressing real buttons and flipping real switches. At rest, buttons appear slightly raised with crisp highlight edges; on hover, highlights intensify and colors brighten a bit to signal proximity; on press, the element moves visibly inward, outer shadows shrink and inner shadows appear, mimicking mechanical travel. Knobs and sliders visibly track movement through ticks, rails and numeric feedback, often accompanied by indicator LEDs. Motion timings are short but weighty—more like mechanical parts moving than airy, bouncy flat animations.\n\nOverall mood: The Skeuomorphism family creates the sensation of sitting in front of a real instrument panel. Users should feel as if they are in a studio, cockpit or control room, facing a dark, solid surface full of dials, LEDs and gauges. The atmosphere is dense and deliberate: strong contrast for legibility, rich shadows for depth and restrained highlights that feel like reflections on metal or glass. It is a style for products that want to showcase craftsmanship, material richness and a ritualistic sense of interaction rather than pure abstraction."
      }
    },
    {
      "id": "core-typography",
      "familyId": "typography",
      "category": "core",
      "title": {
        "zh-CN": "排版",
        "en-US": "Typography"
      },
      "description": {
        "zh-CN": "排版主导的风格，文字本身的视觉表现传达信息和情感。强谾排版的表现力和训讈性，创造引人注目的视觉语言。适合专注内容的应用。设计风格展现文本视觉表现力，通过排版传达信息和情感。强调文字设计和排版创意。",
        "en-US": "Design styles where the visual expressiveness of text itself conveys information and emotion Emphasizes typographic hierarchy, innovative lettering, and expressive text treatments as primary visual elements as the primary visual communication medium Excellent for editorial platforms, publishing applications, and typography-focused brands Makes typography the hero element of the interface design This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. expressive text design and typographic storytelling."
      },
      "tags": [],
      "templatesCount": 2,
      "primaryCategory": "core",
      "customPrompt": {
        "zh-CN": "你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「Typography」核心样式卡展示界面风格高度接近的「排版驱动设计」风格 UI。\n请使用 TailwindCSS 创建一个排版驱动设计风格的界面，**通过文字本身的视觉表现力传达信息**。\n\n**核心设计要求**\n\n1. **字体层级系统**\n   - 主标题（H1）: \\`text-5xl md:text-7xl font-black\\` (48px-72px)\n   - 副标题（H2）: \\`text-3xl md:text-5xl font-bold\\` (32px-48px)\n   - 小标题（H3）: \\`text-2xl md:text-3xl font-semibold\\` (24px-32px)\n   - 正文（Body）: \\`text-base md:text-lg leading-relaxed\\` (16px-18px, line-height: 1.75)\n   - 辅助文字（Caption）: \\`text-xs md:text-sm tracking-wider\\` (12px-14px, letter-spacing: 0.05em)\n\n2. **动态文字效果（Kinetic Typography）**\n   - 使用 CSS 动画创建文字动态效果：\n     \\`\\`\\`css\n     @keyframes text-pulse {\n       0%, 100% { transform: scale(1); opacity: 1; }\n       50% { transform: scale(1.1); opacity: 0.8; }\n     }\n     .kinetic-text {\n       animation: text-pulse 2s ease-in-out infinite;\n     }\n     \\`\\`\\`\n   - 渐变文字效果：\n     \\`\\`\\`css\n     .gradient-text {\n       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n       -webkit-background-clip: text;\n       background-clip: text;\n       -webkit-text-fill-color: transparent;\n     }\n     \\`\\`\\`\n   - 多层文字阴影营造发光效果：\n     \\`\\`\\`css\n     .glow-text {\n       text-shadow:\n         0 0 10px rgba(102, 126, 234, 0.8),\n         0 0 20px rgba(102, 126, 234, 0.6),\n         0 0 40px rgba(102, 126, 234, 0.4);\n     }\n     \\`\\`\\`\n\n3. **编辑排版系统（Editorial Typography）**\n   - 首字下沉效果：\n     \\`\\`\\`css\n     .drop-cap::first-letter {\n       float: left;\n       font-size: 4em;\n       line-height: 0.85;\n       font-weight: 900;\n       margin-right: 0.15rem;\n       color: #1e3a8a;\n     }\n     \\`\\`\\`\n   - 多列布局（报纸风格）：\n     \\`\\`\\`css\n     .newspaper-columns {\n       column-count: 3;\n       column-gap: 2rem;\n       column-rule: 1px solid #e5e7eb;\n       text-align: justify;\n     }\n     \\`\\`\\`\n   - 经典报纸分隔线：\n     \\`\\`\\`css\n     .newspaper-divider {\n       border-top: 3px double #000;\n       border-bottom: 1px solid #000;\n       padding: 1rem 0;\n     }\n     \\`\\`\\`\n\n4. **字体选择指南**\n   - **衬线字体（Serif）** - 用于传统、权威、文学性内容：\n     - Georgia, Times New Roman, Merriweather\n     - TailwindCSS: \\`font-serif\\`\n   - **无衬线字体（Sans-serif）** - 用于现代、简洁、科技感内容：\n     - -apple-system, Helvetica, Inter, Poppins\n     - TailwindCSS: \\`font-sans\\`\n   - **等宽字体（Monospace）** - 用于代码、数据、技术内容：\n     - Courier New, Monaco, Roboto Mono\n     - TailwindCSS: \\`font-mono\\`\n\n5. **排版节奏与间距**\n   - 使用 8px 基础间距单位：\\`space-y-8\\` (32px), \\`space-y-12\\` (48px)\n   - 段落间距：\\`mb-6\\` (24px) 或 \\`mb-8\\` (32px)\n   - 行高（Leading）：\n     - 标题：\\`leading-tight\\` (1.25) 或 \\`leading-none\\` (1)\n     - 正文：\\`leading-relaxed\\` (1.625) 或 \\`leading-loose\\` (2)\n\n6. **文字装饰与强调**\n   - 文字描边效果：\n     \\`\\`\\`css\n     .text-stroke {\n       -webkit-text-stroke: 2px #000;\n       -webkit-text-fill-color: transparent;\n     }\n     \\`\\`\\`\n   - 文字背景高亮：\n     \\`\\`\\`css\n     .text-highlight {\n       background: linear-gradient(180deg, transparent 50%, #fbbf24 50%);\n       padding: 0 0.2em;\n     }\n     \\`\\`\\`\n   - 文字下划线动画：\n     \\`\\`\\`css\n     .underline-animated {\n       position: relative;\n     }\n     .underline-animated::after {\n       content: '';\n       position: absolute;\n       bottom: 0;\n       left: 0;\n       width: 0;\n       height: 2px;\n       background: #3b82f6;\n       transition: width 0.3s ease;\n     }\n     .underline-animated:hover::after {\n       width: 100%;\n     }\n     \\`\\`\\`\n\n**配色方案**\n\n**动态排版（Kinetic）配色：**\n主色调（霓虹渐变）：\n- 蓝紫色：#667eea, #764ba2\n- 粉紫色：#ec4899, #8b5cf6\n- 彩虹色：#3b82f6 (蓝), #ec4899 (粉), #fbbf24 (黄), #10b981 (绿)\n\n背景与对比：\n- 深色背景：#000000, #0f0f0f\n- 高对比文字：#ffffff\n\n**传统编辑（Editorial）配色：**\n主色调（经典报纸）：\n- 深蓝强调色：#1e3a8a, #1e40af\n- 黑白基调：#000000, #ffffff\n- 米白背景：#faf8f5, #f9fafb\n\n中性色（灰度）：\n- 标题黑：#1f2937, #111827\n- 正文灰：#374151, #4b5563\n- 辅助灰：#6b7280, #9ca3af\n\n**关键 CSS 类示例**\n\n\\`\\`\\`css\n/* 动态标题效果 */\n.kinetic-heading {\n  font-size: clamp(3rem, 10vw, 8rem);\n  font-weight: 900;\n  background: linear-gradient(45deg, #3b82f6, #ec4899, #fbbf24, #10b981);\n  background-size: 300% 300%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: gradient-flow 3s ease infinite, text-float 2s ease-in-out infinite;\n}\n\n@keyframes gradient-flow {\n  0%, 100% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n}\n\n@keyframes text-float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-20px); }\n}\n\n/* 打字机效果 */\n.typewriter {\n  display: inline-block;\n  overflow: hidden;\n  border-right: 2px solid #3b82f6;\n  white-space: nowrap;\n  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;\n}\n\n@keyframes typing {\n  from { width: 0; }\n  to { width: 100%; }\n}\n\n@keyframes blink {\n  0%, 50% { border-color: transparent; }\n  51%, 100% { border-color: #3b82f6; }\n}\n\n/* 报纸标题栏（Masthead） */\n.newspaper-masthead {\n  font-size: clamp(2.5rem, 6vw, 5rem);\n  font-weight: 900;\n  text-align: center;\n  letter-spacing: 0.2em;\n  color: #1e3a8a;\n  text-transform: uppercase;\n  border-top: 4px solid #000;\n  border-bottom: 4px solid #000;\n  padding: 1.5rem 0;\n  font-family: 'Georgia', 'Times New Roman', serif;\n}\n\n/* 首字下沉（Drop Cap） */\n.editorial-dropcap::first-letter {\n  float: left;\n  font-size: 4.5rem;\n  line-height: 0.85;\n  font-weight: 900;\n  color: #1e3a8a;\n  margin-right: 0.15rem;\n  margin-top: 0.1rem;\n}\n\n/* 分栏文字（Multi-column） */\n.editorial-columns {\n  column-count: 3;\n  column-gap: 2rem;\n  column-rule: 1px solid #e5e7eb;\n  text-align: justify;\n  font-size: 0.9375rem;\n  line-height: 1.6;\n}\n\n.editorial-columns p {\n  margin-bottom: 1rem;\n  break-inside: avoid;\n}\n\\`\\`\\`\n\n**TailwindCSS 实用类组合**\n\n**动态排版（Kinetic）：**\n\\`\\`\\`html\n<!-- 主标题 -->\n<h1 class=\"text-6xl md:text-8xl font-black bg-gradient-to-r from-blue-500 via-pink-500 to-yellow-500 bg-clip-text text-transparent animate-pulse\">\n  DYNAMIC TEXT\n</h1>\n\n<!-- 副标题（打字机效果） -->\n<p class=\"text-xl md:text-2xl font-mono border-r-2 border-blue-500 pr-1 overflow-hidden whitespace-nowrap animate-typing\">\n  Next-Gen Typography Engine\n</p>\n\n<!-- 霓虹按钮 -->\n<button class=\"px-8 py-4 text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/70 hover:scale-105 transition-all\">\n  Get Started\n</button>\n\\`\\`\\`\n\n**传统编辑（Editorial）：**\n\\`\\`\\`html\n<!-- 报纸标题栏 -->\n<header class=\"border-t-4 border-b-4 border-black py-6 text-center\">\n  <h1 class=\"text-5xl md:text-7xl font-black tracking-[0.2em] text-blue-900 uppercase font-serif\">\n    THE DAILY CHRONICLE\n  </h1>\n  <p class=\"text-sm italic text-gray-600 mt-2\">All The News Worth Reading</p>\n  <p class=\"text-base text-gray-700 mt-3 pt-3 border-t border-gray-300\">Monday, November 6, 2025</p>\n</header>\n\n<!-- 首字下沉文章 -->\n<article class=\"prose prose-lg max-w-none\">\n  <p class=\"text-justify leading-relaxed\">\n    <span class=\"float-left text-7xl font-black leading-none mr-1 text-blue-900\">I</span>\n    n a groundbreaking development that is reshaping industries worldwide, technology companies have announced unprecedented innovations...\n  </p>\n</article>\n\n<!-- 三栏布局 -->\n<div class=\"columns-3 gap-8 column-rule column-rule-gray-300 text-justify text-sm leading-relaxed\">\n  <p>First column content...</p>\n  <p>Second column content...</p>\n  <p>Third column content...</p>\n</div>\n\\`\\`\\`\n\n**间距系统（8px 基础单位）**\n\n- \\`gap-2\\` (8px) - 紧密间距\n- \\`gap-4\\` (16px) - 小间距\n- \\`gap-6\\` (24px) - 中间距\n- \\`gap-8\\` (32px) - 标准间距\n- \\`gap-12\\` (48px) - 大间距\n- \\`gap-16\\` (64px) - 特大间距\n- \\`gap-24\\` (96px) - 超大间距（章节分隔）\n\n**重要提示**\n\n1. **可读性优先**：\n   - 正文行长度控制在 50-75 字符（约 600-800px）\n   - 使用 \\`max-w-prose\\` 或 \\`max-w-3xl\\` 限制阅读宽度\n   - 行高至少为字体大小的 1.5 倍（\\`leading-normal\\` 或更高）\n\n2. **对比度要求**：\n   - 正文文字与背景对比度至少 4.5:1（WCAG AA）\n   - 大标题文字与背景对比度至少 3:1\n   - 使用工具检查：https://webaim.org/resources/contrastchecker/\n\n3. **响应式排版**：\n   - 使用 \\`clamp()\\` 实现流畅字体缩放：\\`font-size: clamp(1rem, 2.5vw, 1.5rem);\\`\n   - 移动端减少列数：\\`md:columns-3\\` → 小屏单列\n   - 调整间距：\\`space-y-6 md:space-y-12\\`\n\n4. **性能优化**：\n   - 避免过度使用文字阴影和滤镜（影响渲染性能）\n   - 动画优先使用 \\`transform\\` 和 \\`opacity\\`（硬件加速）\n   - 使用 \\`will-change: transform;\\` 提示浏览器优化动画元素\n\n5. **无障碍性（Accessibility）**：\n   - 使用语义化 HTML（\\`<h1>\\`-\\`<h6>\\`, \\`<p>\\`, \\`<article>\\`）\n   - 渐变文字需要设置 fallback 颜色\n   - 支持 \\`prefers-reduced-motion\\` 媒体查询：\n     \\`\\`\\`css\n     @media (prefers-reduced-motion: reduce) {\n       * {\n         animation-duration: 0.01ms !important;\n         animation-iteration-count: 1 !important;\n         transition-duration: 0.01ms !important;\n       }\n     }\n     \\`\\`\\`\n\n6. **字体加载优化**：\n   - 使用 \\`font-display: swap;\\` 避免 FOIT（Flash of Invisible Text）\n   - 预加载关键字体：\\`<link rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\\`\n   - 优先使用系统字体栈减少加载时间\n\n\n---",
        "en-US": "Please create a typography-driven design interface using TailwindCSS, where **the visual expressiveness of text itself conveys information**.\n\n**Core Design Requirements**\n\n1. **Font Hierarchy System**\n   - Primary Heading (H1): \\`text-5xl md:text-7xl font-black\\` (48px-72px)\n   - Secondary Heading (H2): \\`text-3xl md:text-5xl font-bold\\` (32px-48px)\n   - Subheading (H3): \\`text-2xl md:text-3xl font-semibold\\` (24px-32px)\n   - Body Text: \\`text-base md:text-lg leading-relaxed\\` (16px-18px, line-height: 1.75)\n   - Caption Text: \\`text-xs md:text-sm tracking-wider\\` (12px-14px, letter-spacing: 0.05em)\n\n2. **Kinetic Typography Effects**\n   - Create dynamic text effects using CSS animations:\n     \\`\\`\\`css\n     @keyframes text-pulse {\n       0%, 100% { transform: scale(1); opacity: 1; }\n       50% { transform: scale(1.1); opacity: 0.8; }\n     }\n     .kinetic-text {\n       animation: text-pulse 2s ease-in-out infinite;\n     }\n     \\`\\`\\`\n   - Gradient text effects:\n     \\`\\`\\`css\n     .gradient-text {\n       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n       -webkit-background-clip: text;\n       background-clip: text;\n       -webkit-text-fill-color: transparent;\n     }\n     \\`\\`\\`\n   - Multi-layer text shadows for glowing effects:\n     \\`\\`\\`css\n     .glow-text {\n       text-shadow:\n         0 0 10px rgba(102, 126, 234, 0.8),\n         0 0 20px rgba(102, 126, 234, 0.6),\n         0 0 40px rgba(102, 126, 234, 0.4);\n     }\n     \\`\\`\\`\n\n3. **Editorial Typography System**\n   - Drop cap effect:\n     \\`\\`\\`css\n     .drop-cap::first-letter {\n       float: left;\n       font-size: 4em;\n       line-height: 0.85;\n       font-weight: 900;\n       margin-right: 0.15rem;\n       color: #1e3a8a;\n     }\n     \\`\\`\\`\n   - Multi-column layout (newspaper style):\n     \\`\\`\\`css\n     .newspaper-columns {\n       column-count: 3;\n       column-gap: 2rem;\n       column-rule: 1px solid #e5e7eb;\n       text-align: justify;\n     }\n     \\`\\`\\`\n   - Classic newspaper divider:\n     \\`\\`\\`css\n     .newspaper-divider {\n       border-top: 3px double #000;\n       border-bottom: 1px solid #000;\n       padding: 1rem 0;\n     }\n     \\`\\`\\`\n\n4. **Font Selection Guide**\n   - **Serif Fonts** - For traditional, authoritative, literary content:\n     - Georgia, Times New Roman, Merriweather\n     - TailwindCSS: \\`font-serif\\`\n   - **Sans-serif Fonts** - For modern, clean, tech-focused content:\n     - -apple-system, Helvetica, Inter, Poppins\n     - TailwindCSS: \\`font-sans\\`\n   - **Monospace Fonts** - For code, data, technical content:\n     - Courier New, Monaco, Roboto Mono\n     - TailwindCSS: \\`font-mono\\`\n\n5. **Typographic Rhythm & Spacing**\n   - Use 8px base spacing unit: \\`space-y-8\\` (32px), \\`space-y-12\\` (48px)\n   - Paragraph spacing: \\`mb-6\\` (24px) or \\`mb-8\\` (32px)\n   - Line height (Leading):\n     - Headings: \\`leading-tight\\` (1.25) or \\`leading-none\\` (1)\n     - Body text: \\`leading-relaxed\\` (1.625) or \\`leading-loose\\` (2)\n\n6. **Text Decoration & Emphasis**\n   - Text stroke effect:\n     \\`\\`\\`css\n     .text-stroke {\n       -webkit-text-stroke: 2px #000;\n       -webkit-text-fill-color: transparent;\n     }\n     \\`\\`\\`\n   - Text background highlight:\n     \\`\\`\\`css\n     .text-highlight {\n       background: linear-gradient(180deg, transparent 50%, #fbbf24 50%);\n       padding: 0 0.2em;\n     }\n     \\`\\`\\`\n   - Animated underline:\n     \\`\\`\\`css\n     .underline-animated {\n       position: relative;\n     }\n     .underline-animated::after {\n       content: '';\n       position: absolute;\n       bottom: 0;\n       left: 0;\n       width: 0;\n       height: 2px;\n       background: #3b82f6;\n       transition: width 0.3s ease;\n     }\n     .underline-animated:hover::after {\n       width: 100%;\n     }\n     \\`\\`\\`\n\n**Color Schemes**\n\n**Kinetic Typography Colors:**\nPrimary (Neon Gradients):\n- Blue-Purple: #667eea, #764ba2\n- Pink-Purple: #ec4899, #8b5cf6\n- Rainbow: #3b82f6 (Blue), #ec4899 (Pink), #fbbf24 (Yellow), #10b981 (Green)\n\nBackground & Contrast:\n- Dark backgrounds: #000000, #0f0f0f\n- High contrast text: #ffffff\n\n**Editorial Typography Colors:**\nPrimary (Classic Newspaper):\n- Deep blue accent: #1e3a8a, #1e40af\n- Black & white base: #000000, #ffffff\n- Cream background: #faf8f5, #f9fafb\n\nNeutral (Grayscale):\n- Heading black: #1f2937, #111827\n- Body gray: #374151, #4b5563\n- Caption gray: #6b7280, #9ca3af\n\n**Key CSS Class Examples**\n\n\\`\\`\\`css\n/* Kinetic heading effect */\n.kinetic-heading {\n  font-size: clamp(3rem, 10vw, 8rem);\n  font-weight: 900;\n  background: linear-gradient(45deg, #3b82f6, #ec4899, #fbbf24, #10b981);\n  background-size: 300% 300%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: gradient-flow 3s ease infinite, text-float 2s ease-in-out infinite;\n}\n\n@keyframes gradient-flow {\n  0%, 100% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n}\n\n@keyframes text-float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-20px); }\n}\n\n/* Typewriter effect */\n.typewriter {\n  display: inline-block;\n  overflow: hidden;\n  border-right: 2px solid #3b82f6;\n  white-space: nowrap;\n  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;\n}\n\n@keyframes typing {\n  from { width: 0; }\n  to { width: 100%; }\n}\n\n@keyframes blink {\n  0%, 50% { border-color: transparent; }\n  51%, 100% { border-color: #3b82f6; }\n}\n\n/* Newspaper masthead */\n.newspaper-masthead {\n  font-size: clamp(2.5rem, 6vw, 5rem);\n  font-weight: 900;\n  text-align: center;\n  letter-spacing: 0.2em;\n  color: #1e3a8a;\n  text-transform: uppercase;\n  border-top: 4px solid #000;\n  border-bottom: 4px solid #000;\n  padding: 1.5rem 0;\n  font-family: 'Georgia', 'Times New Roman', serif;\n}\n\n/* Drop cap */\n.editorial-dropcap::first-letter {\n  float: left;\n  font-size: 4.5rem;\n  line-height: 0.85;\n  font-weight: 900;\n  color: #1e3a8a;\n  margin-right: 0.15rem;\n  margin-top: 0.1rem;\n}\n\n/* Multi-column text */\n.editorial-columns {\n  column-count: 3;\n  column-gap: 2rem;\n  column-rule: 1px solid #e5e7eb;\n  text-align: justify;\n  font-size: 0.9375rem;\n  line-height: 1.6;\n}\n\n.editorial-columns p {\n  margin-bottom: 1rem;\n  break-inside: avoid;\n}\n\\`\\`\\`\n\n**TailwindCSS Utility Combinations**\n\n**Kinetic Typography:**\n\\`\\`\\`html\n<!-- Main heading -->\n<h1 class=\"text-6xl md:text-8xl font-black bg-gradient-to-r from-blue-500 via-pink-500 to-yellow-500 bg-clip-text text-transparent animate-pulse\">\n  DYNAMIC TEXT\n</h1>\n\n<!-- Subtitle (typewriter effect) -->\n<p class=\"text-xl md:text-2xl font-mono border-r-2 border-blue-500 pr-1 overflow-hidden whitespace-nowrap animate-typing\">\n  Next-Gen Typography Engine\n</p>\n\n<!-- Neon button -->\n<button class=\"px-8 py-4 text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/70 hover:scale-105 transition-all\">\n  Get Started\n</button>\n\\`\\`\\`\n\n**Editorial Typography:**\n\\`\\`\\`html\n<!-- Newspaper masthead -->\n<header class=\"border-t-4 border-b-4 border-black py-6 text-center\">\n  <h1 class=\"text-5xl md:text-7xl font-black tracking-[0.2em] text-blue-900 uppercase font-serif\">\n    THE DAILY CHRONICLE\n  </h1>\n  <p class=\"text-sm italic text-gray-600 mt-2\">All The News Worth Reading</p>\n  <p class=\"text-base text-gray-700 mt-3 pt-3 border-t border-gray-300\">Monday, November 6, 2025</p>\n</header>\n\n<!-- Drop cap article -->\n<article class=\"prose prose-lg max-w-none\">\n  <p class=\"text-justify leading-relaxed\">\n    <span class=\"float-left text-7xl font-black leading-none mr-1 text-blue-900\">I</span>\n    n a groundbreaking development that is reshaping industries worldwide, technology companies have announced unprecedented innovations...\n  </p>\n</article>\n\n<!-- Three-column layout -->\n<div class=\"columns-3 gap-8 column-rule column-rule-gray-300 text-justify text-sm leading-relaxed\">\n  <p>First column content...</p>\n  <p>Second column content...</p>\n  <p>Third column content...</p>\n</div>\n\\`\\`\\`\n\n**Spacing System (8px Base Unit)**\n\n- \\`gap-2\\` (8px) - Tight spacing\n- \\`gap-4\\` (16px) - Small spacing\n- \\`gap-6\\` (24px) - Medium spacing\n- \\`gap-8\\` (32px) - Standard spacing\n- \\`gap-12\\` (48px) - Large spacing\n- \\`gap-16\\` (64px) - Extra-large spacing\n- \\`gap-24\\` (96px) - Section divider\n\n**Important Notes**\n\n1. **Readability First**:\n   - Keep line length between 50-75 characters (~600-800px)\n   - Use \\`max-w-prose\\` or \\`max-w-3xl\\` to limit reading width\n   - Line height should be at least 1.5x font size (\\`leading-normal\\` or higher)\n\n2. **Contrast Requirements**:\n   - Body text vs background: minimum 4.5:1 (WCAG AA)\n   - Large text vs background: minimum 3:1\n   - Check with: https://webaim.org/resources/contrastchecker/\n\n3. **Responsive Typography**:\n   - Use \\`clamp()\\` for fluid font scaling: \\`font-size: clamp(1rem, 2.5vw, 1.5rem);\\`\n   - Reduce columns on mobile: \\`md:columns-3\\` → single column on small screens\n   - Adjust spacing: \\`space-y-6 md:space-y-12\\`\n\n4. **Performance Optimization**:\n   - Avoid excessive text-shadow and filters (impacts rendering)\n   - Prefer \\`transform\\` and \\`opacity\\` for animations (hardware-accelerated)\n   - Use \\`will-change: transform;\\` to hint browser about animated elements\n\n5. **Accessibility**:\n   - Use semantic HTML (\\`<h1>\\`-\\`<h6>\\`, \\`<p>\\`, \\`<article>\\`)\n   - Provide fallback colors for gradient text\n   - Support \\`prefers-reduced-motion\\` media query:\n     \\`\\`\\`css\n     @media (prefers-reduced-motion: reduce) {\n       * {\n         animation-duration: 0.01ms !important;\n         animation-iteration-count: 1 !important;\n         transition-duration: 0.01ms !important;\n       }\n     }\n     \\`\\`\\`\n\n6. **Font Loading Optimization**:\n   - Use \\`font-display: swap;\\` to avoid FOIT (Flash of Invisible Text)\n   - Preload critical fonts: \\`<link rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\\`\n   - Prefer system font stacks to reduce load time"
      },
      "stylePrompt": {
        "zh-CN": "角色设定：你是一名偏重排版实验的设计总监，要向团队说明「Typography 核心样式卡」的气质，让页面靠字体层级和文字动态就能建立主视觉，而不是靠图片或大色块。\n\n场景定位：适用于重内容的落地页、创意作品集、媒体文章、品牌叙事页，以及需要把标语/标题当成主角的场景。受众预期看到「字体即版面」，能读到清晰层级，同时感觉到适度的戏剧张力。\n\n视觉设计理念：所有层级由字级、粗细、字距与留白决定。Hero 标题可用超粗字重、梯度文字或轮廓描边；次级文字保持高对比与节奏分段；正文保持长行可读性（1.6 以上行高），搭配适度的列宽控制。避免背景杂讯喧宾夺主，让版式空间和动态文字成为焦点。\n\n材质与质感：文字本身就是材质，可用渐变填充、发光阴影、轮廓描边或噪点遮罩制造层次；背景保持纯色或低频纹理（深蓝、炭黑、米白），让文字的对比与饱和度自然突出。适度混排 Serif / Sans / Mono，营造编辑感与科技感的对位。\n\n交互体验：动态聚焦在文字，常见模式有「打字机」「渐显/渐隐」「字距呼吸」「滚动分层」等，时长 200–500ms，缓动曲线以 ease-out/ease-in-out 为主。Hover 时可微调字重、描边或底线，避免大幅位移以维持阅读稳定性。\n\n整体氛围：像一本精心排版的杂志封面叠加数位动态效果——干净、有序，又带一点舞台感。用户进入页面时，第一眼应被标题与文字节奏吸引，感受到品牌的立场与态度，而不是被图片或巨型色块分散注意。\n\n---",
        "en-US": "Role: You are a typography-first design lead explaining how the “Typography” core style should feel: the page relies on type hierarchy and kinetic wording as the visual hero rather than heavy imagery.\n\nScene: Best for content-heavy landing pages, creative portfolios, editorial stories and brand narratives where slogans and headlines must carry the main impact. Readers expect “type as layout” with crisp hierarchy and a touch of dramatic tension.\n\nVisual philosophy: Hierarchy is defined by size, weight, letter spacing and whitespace. Hero lines can use ultra-bold weights, gradients or stroked outlines; secondary copy keeps strong contrast and clear grouping; body text prioritizes readability (line-height 1.6+) with controlled measure. Backgrounds stay calm so the rhythm of type and motion stands out.\n\nMaterial and texture: Type itself is the material—use gradient fills, glow shadows, outlines or noise masks for depth. Backgrounds remain solid or subtly textured (navy, charcoal, off-white) so color contrast on text reads clean. Mix serif/sans/mono sparingly to balance editorial flavor with a technical edge.\n\nInteraction experience: Motion lives on the letters: typewriter reveals, fades, breathing letter-spacing or scroll-layered sequences, timed 200–500ms with ease-out/ease-in-out curves. Hover tweaks weight, stroke or underline rather than large shifts to keep reading stable.\n\nOverall mood: A magazine cover composed for the web—orderly yet slightly theatrical. On entry, users should be drawn to the headline cadence and sense the brand’s voice instantly, without being distracted by oversized images or noisy backgrounds."
      }
    }
  ],
  "generatedAt": "2026-09-16T09:04:00.955Z"
}