mcpField
M
mesh-gradient-dark-blue-clean

mesh-gradient-dark-blue-clean

github.com/boraoztunc设计与 UI43496 次安装11 周前更新
代码仓库

关于 mesh-gradient-dark-blue-clean

用于构建深蓝网格渐变暗色页面的设计技能，强调主视觉容器中的程序化网格、克制的导航和技术感结构。适合需要整体页面视觉方向和缓慢动态效果的界面设计。

主要功能

  1. 01深蓝程序化网格背景
  2. 02带渐变边框的 Hero 容器
  3. 03节点、轨道与标记布局
  4. 04缓慢动态与减少动态适配
  5. 05深色配色与层级规范

适用场景

  1. 01设计深色技术产品首页
  2. 02构建带网格光场的 Hero 区
  3. 03为页面添加克制的网络节点与轨道

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill mesh-gradient-dark-blue-clean

安装后在 Claude Code 中输入/mesh-gradient-dark-blue-clean确认已加载。

详细介绍

网格渐变深蓝简洁风格

适用场景

  • 整个页面应呈现未来感、高级感、简洁感和基础设施感。
  • 深蓝网格渐变应成为构图的核心，而不是作为通用背景衬托内容。
  • 界面需要中央主视觉外壳、克制的导航、悬浮的网络提示、带边框的分区，以及缓慢的技术感动效。

设计方向

以近黑色为基底，融入深海军蓝或钢蓝色调。在主视觉外壳内放置类着色器网格渐变、CPPN 风格场、抽象 WebGL 薄雾或 Canvas 光场。周围的系统元素应保持克制：清晰的排版、纤细的导轨、角标、微小的状态圆点、低调的边框，以及稀疏的节点标注。

这不是一张轻盈通透的蓝色页面，也不是千篇一律的玻璃拟态。网格是极简系统外壳内部的视觉引擎。

系统配方

  1. 基底：近黑色海军蓝，而非纯黑。
  2. 主视觉外壳：大型圆角容器，带有微妙的白色至透明渐变边框和更深色的内层填充。
  3. 网格场：外壳内由蓝色主导的程序化 Canvas 或 WebGL 图层。
  4. 排版：白色标题、灰蓝色辅助文案、克制的强调色。
  5. 导航：紧凑的深色半透明胶囊，边缘带浅色渐变。
  6. 节点：少量悬浮玻璃质感胶囊、激活状态圆点、微小标签和连接线。
  7. 结构：纤细的垂直导轨、角落方块、数字标记和带边框的下方分区。
  8. CTA：一个明亮的纯色胶囊按钮，加一个带微弱渐变边框的幽灵按钮或玻璃质感胶囊按钮。
  9. 动效：缓慢的网格漂移、微妙的扫描光带、蒙版文字显现，或微小的节点闪烁。

颜色令牌

:root {
  --mesh-bg: #030712;
  --mesh-bg-blue: #07111f;
  --mesh-shell: rgba(7, 13, 25, 0.82);
  --mesh-shell-inner: rgba(4, 9, 18, 0.72);
  --mesh-line: rgba(191, 219, 254, 0.14);
  --mesh-line-strong: rgba(226, 232, 240, 0.28);
  --mesh-text: #f8fafc;
  --mesh-copy: #9fb2ca;
  --mesh-muted: #64748b;
  --mesh-accent: #dbeafe;
  --mesh-cobalt: #1d4ed8;
  --mesh-indigo: #312e81;
  --mesh-steel: #385a7c;
}

页面基底

.mesh-page {
  min-height: 100vh;
  color: var(--mesh-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 78, 216, 0.18), transparent 34rem),
    linear-gradient(180deg, var(--mesh-bg-blue), var(--mesh-bg) 48%, #01030a);
}

.mesh-page::selection {
  color: #020617;
  background: var(--mesh-accent);
}

主视觉外壳

使用渐变边框包裹层和更深色的内容表面。网格 Canvas 位于外壳内部、内容后方。

.mesh-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 32px;
  background:
    linear-gradient(var(--mesh-shell), var(--mesh-shell)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(147, 197, 253, 0.18), rgba(255, 255, 255, 0.04)) border-box;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.mesh-shell__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  pointer-events: none;
}

.mesh-shell__content {
  position: relative;
  z-index: 2;
  min-height: clamp(560px, 72vh, 820px);
  padding: clamp(28px, 6vw, 84px);
  background:
    linear-gradient(180deg, rgba(4, 9, 18, 0.22), rgba(4, 9, 18, 0.62)),
    var(--mesh-shell-inner);
}

<section class="mesh-shell">
  <canvas class="mesh-shell__field" data-dark-blue-mesh></canvas>
  <div class="mesh-shell__content">
    <nav class="mesh-nav">...</nav>
    <h1>Infrastructure for intelligent interfaces.</h1>
    <p>...</p>
  </div>
</section>

Canvas 网格场

条件允许时，最终构建请使用 WebGL 或 Three.js。此 2D Canvas 图案可作为备选方案，用于创建扭曲渐变、柔和的网格运动和烟雾般的蓝色高光。

function initDarkBlueMesh(canvas) {
  const ctx = canvas.getContext("2d");
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  let width = 0;
  let height = 0;
  let frame = 0;
  let rafId = 0;

  const points = [
    { x: 0.18, y: 0.30, r: 0.45, color: "rgba(29, 78, 216, 0.55)" },
    { x: 0.68, y: 0.22, r: 0.38, color: "rgba(49, 46, 129, 0.58)" },
    { x: 0.78, y: 0.72, r: 0.52, color: "rgba(56, 90, 124, 0.48)" },
    { x: 0.42, y: 0.58, r: 0.34, color: "rgba(219, 234, 254, 0.18)" },
  ];

  function resize() {
    const rect = canvas.getBoundingClientRect();
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    width = Math.max(1, rect.width);
    height = Math.max(1, rect.height);
    canvas.width = Math.floor(width * dpr);
    canvas.height = Math.floor(height * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  function draw(time = 0) {
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "#030712";
    ctx.fillRect(0, 0, width, height);
    ctx.globalCompositeOperation = "screen";

    points.forEach((point, index) => {
      const drift = reduceMotion ? 0 : Math.sin(time * 0.00018 + index) * 24;
      const x = point.x * width + drift;
      const y = point.y * height + Math.cos(time * 0.00016 + index) * 18;
      const radius = Math.max(width, height) * point.r;
      const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
      gradient.addColorStop(0, point.color);
      gradient.addColorStop(1, "rgba(3, 7, 18, 0)");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, width, height);
    });

    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(255, 255, 255, 0.035)";
    for (let y = (frame % 28); y < height; y += 28) {
      ctx.fillRect(0, y, width, 1);
    }

    frame += 1;
    if (!reduceMotion) rafId = requestAnimationFrame(draw);
  }

  function handleResize() {
    cancelAnimationFrame(rafId);
    resize();
    draw();
  }

  resize();
  draw();
  window.addEventListener("resize", handleResize);

  return () => {
    cancelAnimationFrame(rafId);
    window.removeEventListener("resize", handleResize);
  };
}

导航

.mesh-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(5, 12, 24, 0.76), rgba(5, 12, 24, 0.76)) padding-box,
    linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.16), rgba(255, 255, 255, 0.04)) border-box;
  backdrop-filter: blur(18px);
}

.mesh-nav a {
  color: var(--mesh-copy);
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
}

.mesh-nav a:hover,
.mesh-nav a[aria-current="page"] {
  color: var(--mesh-text);
  background: rgba(255, 255, 255, 0.08);
}

节点与导轨

.mesh-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(191, 219, 254, 0.18);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--mesh-copy);
  background: rgba(5, 12, 24, 0.58);
  backdrop-filter: blur(14px);
  font-size: 12px;
}

.mesh-node::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bfdbfe;
  box-shadow: 0 0 18px rgba(147, 197, 253, 0.72);
}

.mesh-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--mesh-line), transparent);
}

.mesh-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--mesh-line-strong);
}

CTA 组合

.mesh-cta-primary {
  color: #020617;
  background: #f8fafc;
  box-shadow: 0 16px 36px rgba(219, 234, 254, 0.18);
}

.mesh-cta-secondary {
  color: var(--mesh-text);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(5, 12, 24, 0.62), rgba(5, 12, 24, 0.62)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.04)) border-box;
}

动效默认设置

  • 网格漂移：速度极慢，循环时长为 12s 至 28s，避免生硬的缓动。
  • 扫描光带：稀疏的垂直光带或水平线条，透明度较低。
  • 文字：仅为主视觉标题和分区标签添加蒙版显现效果。
  • 节点：以低强度闪烁或脉冲，不要持续闪烁。
  • 减少动态效果：冻结网格，移除闪烁效果，同时保持布局和对比度不变。

调节项

  • 网格可见度：仅在氛围清晰可辨时提高不透明度；文案始终是视觉重点。
  • 蓝色色调：在靛蓝、海军蓝、钴蓝和钢蓝之间调整，同时保留深色基底。
  • 外壳对比度：调整外边框、内层填充和 Canvas 不透明度，直到各图层清晰分明。
  • 网络密度：减少节点以营造高级感，增加标记以突出技术基础设施感。
  • 动效强度：缓慢且富有氛围，绝不呈现游戏感。

避免事项

  • 避免使用缺乏网格纵深感或程序化特征的纯色 CSS 渐变。
  • 避免过度使用明亮的青色，或让电光蓝光效无处不在。
  • 避免拥挤的仪表盘、过多的悬浮组件或相互争抢注意力的卡片。
  • 避免缺少导轨、边框、标记或系统结构的通用半透明色块。
  • 避免过度复杂、影响可读性的着色器效果。
  • 避免轻盈的浅蓝色分区破坏深色高级氛围。

快速检查

  • 网格在主视觉外壳内清晰可见，并具有立体感。
  • 基底呈现近黑色海军蓝，而非纯黑或明亮的蓝色。
  • 外壳具有清晰的渐变边框和更深色的内层表面。
  • 排版在网格场上依然明亮、清晰且易读。
  • 节点、导轨、标记和扫描线数量克制且对齐整齐。
  • CTA 对比明确：主要按钮为纯色，次要按钮为玻璃质感。

评论

支持 Markdown