colorful-dark-style

name	colorful-dark-style
description	Generate dark-tech colorful HTML pages for presentations, PPT-style pages, feature introductions, and workflow comparisons. Keywords: dark theme, deep color page, tech style, colorful cards, dark display page. NOTE: This skill has NO scripts. Do NOT call run_skill_script. The LLM must generate HTML directly based on the design spec in this file.

多彩暗黑 Skills

概述

这是一个用于生成 深色科技风多彩暗黑风格 HTML 页面的 Skill。适用于生成展示页面、PPT 风格页面、功能介绍页面、工作流对比页面等。

触发条件：当用户需要生成深色科技风、暗黑多彩风格的展示页面、PPT 页面、介绍页面时使用。关键词：暗黑风格、深色页面、科技风、多彩卡片、暗色展示页。

设计规范

1. 页面基础

• 固定画布: width:1920px; height:1080px; overflow:hidden（PPT 比例）
• 背景色: #12141e（深蓝黑色）
• 字体栈: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif
• 默认文字色: #e0e0e0

2. 背景装饰

• 网格点纹理（通过 body::before）:

body::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none; z-index:0;
}

• 左上角光晕（通过 body::after）:

body::after {
  content:''; position:absolute;
  top:-200px; left:-200px;
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(74,125,255,0.06) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

3. 色彩体系（6色调色板）

名称	主色	用途
蓝色	#4a7dff / #7cacff	主品牌色、AI 核心能力、链接
紫色	#a855f7 / #6c5ce7 / #c084fc	渐变搭配、特殊强调
绿色	#00fb8a	AI/改进/正向指标
红色	#ff5757 / #ff8a8a	痛点/问题/警告
橙色	#ff9000	耗时/风险/前提条件
青色	#38bdf8	辅助强调色

颜色使用规则：

• 背景填充：使用 rgba(主色, 0.03~0.12) 的低透明度
• 边框：使用 rgba(主色, 0.1~0.4)
• Hover 状态：背景透明度提升到 0.04~0.08，边框透明度提升到 0.3~0.5
• 文字：直接使用主色或其亮色变体

4. 页面标题

.page-header {
  position:absolute; top:60px; left:60px; right:60px;
  display:flex; align-items:center; gap:16px;
  z-index:10;
}
.page-header .icon {
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, #4a7dff, #6c5ce7);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.page-header h1 {
  font-size:26px; font-weight:700;
  background: linear-gradient(90deg, #fff, #a0b4ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:1px;
}

5. 卡片组件

通用卡片样式：

• 背景：rgba(主色, 0.02~0.04)
• 边框：1px solid rgba(主色, 0.08~0.15)
• 圆角：10px~16px
• 内边距：20px 18px 或 32px 28px（大卡片）
• Hover 效果：transform:translateY(-2px~-4px) + 边框/背景色增强 + box-shadow

带顶部彩色条的卡片：

.card { border-top: 2px solid rgba(主色, 0.4); }
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:16px 16px 0 0;
  background: linear-gradient(90deg, 色1, 色2);
  opacity:0; transition:opacity .3s;
}
.card:hover::before { opacity:1; }

6. 多彩序号卡片（适用于功能列表等）

• 大号序号：font-size:48px; font-weight:800; color:rgba(主色, 0.25)
• 图标容器：52x52px; border-radius:14px; background:rgba(主色, 0.1)
• 标题：font-size:17px; font-weight:700; color:主色亮色变体
• 描述：font-size:13px; color:#8b8fa3; line-height:1.8
• 内联标签：padding:2px 8px; border-radius:4px; font-size:11px; background:rgba(主色, 0.12); color:主色亮色变体

7. 流程步骤

.flow-step {
  padding:12px 14px; font-size:12px; font-weight:600;
  border-radius:6px; white-space:nowrap;
}
.flow-step.normal { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#c0c4d6; }
.flow-step.pain { background:rgba(255,87,87,0.12); border:1px solid rgba(255,87,87,0.35); color:#ff5757; }
.flow-step.ai { background:rgba(0,251,138,0.1); border:1px solid rgba(0,,,); :; }
 { :(,(,,,),(,,,)); : solid (,,,); :; }
 { :(,,,); :; : ; }

8. 分隔线

.divider {
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(74,125,255,0.3), rgba(0,251,138,0.3), transparent);
}
.divider-arrow {
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,251,138,0.12);
  border:1px solid rgba(0,251,138,0.3);
  box-shadow:0 0 20px rgba(0,251,138,0.2);
}

9. 标签/徽章

.efficiency-tag {
  padding:3px 8px; border-radius:4px;
  font-size:10px; font-weight:600;
  background:rgba(0,251,138,0.1); color:#00fb8a;
}
.vs-badge {
  padding:3px 12px; border-radius:10px;
  font-size:11px; font-weight:700;
  background: linear-gradient(135deg, #4a7dff, #6c5ce7);
  color:#fff;
  box-shadow:0 0 16px rgba(74,125,255,0.3);
}

10. 前提/警告条

.prerequisite {
  padding:14px 16px;
  background:rgba(255,144,0,0.06);
  border:1px solid rgba(255,144,0,0.2);
  border-radius:8px;
  font-size:11.5px; color:#ff9000; line-height:1.6;
  display:flex; align-items:center; gap:8px;
}

11. 图例与装饰

.legend { display:flex; gap:20px; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#8b8fa3; }
.legend-dot { width:8px; height:8px; border-radius:50%; }
.decoration {
  position:absolute; bottom:20px; right:60px;
  font-size:11px; color:rgba(255,255,255,0.15);
}

12. 辅助文字

• 标签文字：font-size:11px; color:#8b8fa3
• 描述文字：font-size:11.5px~13px; color:#8b8fa3; line-height:1.7~1.8
• 内容文字：font-size:12px; color:#c0c4d6; line-height:1.6
• 强调文字：color:#7cacff（蓝色强调）、color:#ff9000（橙色强调）、color:#ff5757（红色强调）

页面布局原则

1. 绝对定位布局：主要区域使用 position:absolute 精确控制位置
2. 标准间距：页面边距 60px，元素间距 12px~20px
3. z-index 层级：背景装饰 0，内容区域 5，分隔线 5~6，标题/装饰 10
4. Grid 布局：卡片使用 grid-template-columns:repeat(N, 1fr) 等分排列
5. Flex 布局：流程步骤、标题、图例等使用 flex 横向排列

动效规范

• 过渡时间：0.3s~0.4s
• 缓动函数：cubic-bezier(.4,0,.2,1) 或默认 ease
• Hover 上浮：transform:translateY(-2px) 小卡片，translateY(-4px) 大卡片
• Hover 阴影：box-shadow:0 12px 40px rgba(0,0,0,0.3)
• 顶部渐变条淡入：通过 ::before 伪元素，hover 时 opacity:0→1

生成规则

1. 所有页面必须是单文件 HTML，CSS 内联在 <style> 标签中
2. 图标优先使用 emoji，如需 SVG 则内联
3. 页面语言设为 zh-CN
4. 根据内容自动选择合适的布局：
   • 功能列表类 → 多彩序号卡片横排
   • 流程对比类 → 上下分区 + 分隔线
   • 信息展示类 → 卡片网格
5. 每个页面右下角加装饰文字
6. 每张卡片使用不同主题色，按顺序循环使用调色板中的颜色