工具箱

美术设计系统

本文件是可复用的设计规范参考，可直接作为skill使用

环境配置2026-08-04

CodePulse 美术设计系统（Design System Reference）

> 用途：本文件是可复用的设计规范参考，可直接作为提示词上下文注入（"请遵循以下设计系统生成页面/组件"），让 AI 生成视觉一致的页面、组件与动效代码。

> 来源：提炼自《CodePulse 技术博客设计方案 v3.1》（DOCX + PPTX + HTML 原型源码）。

> 风格定位：大胆新潮（Bold & Trendy），清新明亮、有机流动、拒绝模板感。

---

1. 设计哲学（一句话定调）

Organic Flow（有机流动） + Geometric Deconstruct（几何解构）

  • 有机流动：圆润 blob 形状、流体渐变背景、玻璃拟态、柔和彩色阴影。拒绝直角，拥抱自然曲线。
  • 几何解构：卡片轻微倾斜（-3° ~ +3°）、错位网格、层叠遮挡、非对称留白、同网格内混用大小卡片。用不规则创造秩序。
  • 色彩联动：背景色以 8%~15% 低透明度渗透到组件中，玻璃拟态卡片自然"沾染"背景色，形成贯穿始终的视觉语言。

生成页面时的检查清单：

  • [ ] 是否有至少一个有机 blob 元素（非直角容器）？
  • [ ] 卡片是否打破了完全对齐（倾斜/错位/大小不一）？
  • [ ] 阴影是否使用了彩色而非中性灰？
  • [ ] 标题是否使用了渐变文字？

---

2. 色彩系统

2.1 主色板（六色渐变光谱：天蓝 → 柠檬黄）

名称Hex用途
天蓝 Sky Blue#87C4ED渐变起点、Hero 背景
亮青 Cyan#5AD7F2链接、交互元素
碧绿 Turquoise#44E8E2强调色、CTA 按钮
薄荷 Mint#70F4BF成功状态、标签
青柠 Lime#B1FA94装饰、图标
柠檬 Lemon#F9F871高亮、警告

2.2 背景系统（分层制造纵深）

主背景       #F8FBFF   超浅蓝白，主内容区
次级背景     #F0F9FF   略饱和，交替区块
三级背景     #F5FFFA   浅薄荷调，精选内容区
暖调背景     #FAFFF5   浅黄绿调，CTA 区块
卡片背景     rgba(255,255,255,0.85)   玻璃拟态卡片
玻璃背景     rgba(255,255,255,0.7)    覆盖层元素

2.3 文字层级（同一深色基底的四级透明度体系）

一级 #0F172A   标题与关键内容（带蓝底的近黑）
二级 #334155   正文与描述（深岩灰）
三级 #64748B   元信息、时间戳
四级 #94A3B8   占位符、禁用态、装饰文字

2.4 彩色阴影系统（用色板色代替中性灰）

--shadow-soft:   0 4px 20px rgba(135,196,237,0.15);  /* 卡片常规悬浮 */
--shadow-medium: 0 8px 30px rgba(90,215,242,0.2);    /* 悬浮元素 */
--shadow-strong: 0 12px 40px rgba(68,232,226,0.25);  /* 弹窗/模态 */
--shadow-glow:   0 0 15px rgba(90,215,242,0.4);      /* 聚焦/交互发光 */

2.5 渐变组合

全光谱：蓝 → 青 → 绿 → 黄（Hero、核心视觉）
冷色调：天蓝 → 碧绿（主标题渐变文字）
暖色调：碧绿 → 青柠（次级/强调标题渐变文字）
阳光：  薄荷 → 柠檬（装饰点缀）

---

3. 字体系统

角色字体用途
DisplayOutfit标题。几何现代感、大胆、高辨识度
BodySpace Grotesk正文。人文科技感、舒适阅读
CodeJetBrains Mono代码块、行内代码

关键字级：

  • Hero 大标题：96px（桌面）/ 48px（移动），Outfit Bold，leading-tight
  • 文章页标题：48px Outfit Bold
  • 正文：18px Space Grotesk，行高 1.8
  • 副标题可用 300 字重形成粗细对比

渐变文字效果（标题点睛之笔）：

.text-gradient-cool {
  background: linear-gradient(135deg, #87C4ED, #5AD7F2, #44E8E2, #70F4BF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-warm {
  background: linear-gradient(135deg, #44E8E2, #70F4BF, #B1FA94, #F9F871);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

---

4. 组件设计规范

4.1 玻璃拟态卡片（核心容器）

.glass-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow-soft);
  border-radius: 32px;   /* 大圆角，常规卡片 */
}

注意：backdrop-filter 性能开销大，只用于关键玻璃元素，不滥用。

4.2 Blob 形状（有机容器/头像框/装饰）

.blob-shape     { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
.blob-shape-alt { border-radius: 60% 40% 30% 70% / 50% 40% 60% 50%; }

4.3 文章卡片

  • 玻璃拟态底 + 封面图（可套 blob 遮罩）+ 分类标签 + 标题 + 摘要 + 底部元信息（日期 / 阅读时长 / 收藏图标）
  • 静态时带 ±1°~3° 微旋转（几何解构）；奇偶卡片倾斜方向交替
  • 分类标签：色板色 20% 透明度底 + #0F172A 文字，pill 形
  • 标题 hover 时切换为渐变文字

4.4 按钮与交互元素

  • 主按钮：深色底（#0F172A）白字 pill 形，hover 时变为蓝→青渐变 + scale(1.05) + 发光阴影
  • 图标按钮：玻璃拟态圆形
  • 链接/箭头：hover 时图标 translate-x 微移
  • 点击反馈：scale(0.96~0.98) → 回弹

4.5 表单与标签

  • 搜索框：玻璃拟态 + 聚焦时渐变边框动画 + 搜索图标
  • 标签 pill：色板色背景，可移除变体；hover 背景色平移
  • 分类筛选条：横向可滚动 pill 组，激活项渐变指示

4.6 内容元素（文章详情页）

  • 代码块：深色底 #1E293B，JetBrains Mono，行号 + 复制按钮
  • 引用块：左侧渐变边框 + 浅色底 + 斜体
  • 行内代码：浅色 pill 底 + 色板色描边
  • 图片：圆角或 blob 遮罩，下方图注
  • 表格：色板色隔行变色，圆角容器

4.7 导航

  • 顶部导航：固定、玻璃拟态（logo + 链接 + 搜索 + 主题切换）
  • 导航链接：hover 时下划线从左到右动画
  • 分页：数字式，当前页渐变强调
  • 移动端：底部导航栏替代侧边导航

---

5. 动效设计（克制、流畅、有呼吸感）

原则：动效服务于体验而非炫技。所有动画遵循有机流动哲学，ease-in-out 为主。

5.1 背景氛围动画

Blob 变形（核心氛围，纯 CSS / GPU 加速）：

  • border-radius 在 blob 形状间循环变形，同时旋转 360°
  • 周期 15~20s，多个 blob 错开 delay（0s / 2s / 5s）
  • 配色：蓝 blob（opacity 10%，blur 60px）、碧绿 blob（15%，blur 60px）、青柠 blob（10%，blur 80px）
  • 尺寸 40~60vw，散布于页面四角，负边距出血
@keyframes blob-morph {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg) scale(1); }
  50%      { border-radius: 60% 40% 30% 70% / 50% 40% 60% 50%; transform: rotate(180deg) scale(1.2); }
}
/* 使用：animation: blob-morph 15s ease-in-out infinite; */

Logo 悬浮：上下浮动 20px + 5° 微旋转，6s 周期 ease-in-out。

5.2 交互动效

场景参数
卡片 hoverscale(1.05)，300ms ease；阴影 soft→medium；微旋转 ±1°；卡内图片 scale(1.1)
按钮 hover背景渐变平移 + scale(1.02)，200ms
按钮点击scale(0.96~0.98) 弹性回弹
聚焦态色板色发光阴影（--shadow-glow）
标签 hover背景色平移过渡
收藏图标点击填充动画

5.3 页面与滚动动效

  • 内容入场：fade-in + 上移 20px
  • 网格项：逐个交错入场（每项间隔 50ms，spring stiffness≈100）
  • 滚动触发：Intersection Observer（禁用 scroll 事件监听）
  • 背景 blob：滚动视差
  • 图片加载：blur → clear 渐进
  • 页面顶部：滚动进度指示条
  • 页面切换：fade + slide

5.4 无障碍与性能红线

  • prefers-reduced-motion 媒体查询：为偏好减动的用户关闭动画
  • 对比度满足 WCAG 2.1 AA
  • blob 动画用 CSS transform/opacity（GPU 层），不用 JS 逐帧
  • 图片懒加载；中文字体做子集化

---

6. 布局与响应式

断点：

Mobile  < 768px     单列，hero 标题 48px，正文 16px，触控目标 ≥ 44px
Tablet  768~1279px  双列网格，侧栏变可切换抽屉，blob 动画降复杂度
Desktop ≥ 1280px    三列 + 侧栏，内容最大宽度 ~1200px 居中，全部动效启用

核心页面布局模式：

  • 首页：非对称 Hero（左大标题 + 右悬浮卡片），blob 背景；精选内容区用非均匀网格（主推文章卡片更大）
  • 文章列表：顶部分类 pill 筛选 + 玻璃搜索框；瀑布流式不同高度卡片网格
  • 文章详情：三栏（左目录 sticky + 中内容 ~720px 最优阅读宽度 + 右信息栏）；封面图底部渐变遮罩
  • 关于页：blob 头像框 + 技能云 + GitHub 深色数据卡（暗底与整体亮调形成对比，展示 Stars/Followers/Repos/贡献热图）

---

7. CSS 变量速查（可直接注入生成代码）

:root {
  /* 色板 */
  --color-palette-blue: #87C4ED;  --color-palette-cyan: #5AD7F2;
  --color-palette-turquoise: #44E8E2; --color-palette-mint: #70F4BF;
  --color-palette-lime: #B1FA94;  --color-palette-lemon: #F9F871;
  /* 文字 */
  --color-text-primary: #0F172A; --color-text-secondary: #334155;
  --color-text-tertiary: #64748B; --color-text-muted: #94A3B8;
  /* 背景 */
  --color-bg-primary: #F8FBFF; --color-bg-secondary: #F0F9FF;
  --color-bg-tertiary: #F5FFFA; --color-bg-warm: #FAFFF5;
  /* 玻璃 */
  --glass-bg: rgba(255,255,255,0.85); --glass-border: rgba(255,255,255,0.5);
  /* 阴影 */
  --shadow-soft: 0 4px 20px rgba(135,196,237,0.15);
  --shadow-medium: 0 8px 30px rgba(90,215,242,0.2);
  --shadow-strong: 0 12px 40px rgba(68,232,226,0.25);
  --shadow-glow: 0 0 15px rgba(90,215,242,0.4);
  /* 字体 */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
}

---

8. 作为提示词使用的示例

将本文件作为上下文后，可这样下达指令：

  • "按此设计系统生成一个文章卡片组件（React + Tailwind），包含玻璃拟态、blob 封面遮罩、±2° 微旋转和 hover 动效。"
  • "按此设计系统为 XXX 页面写背景 blob 氛围层，纯 CSS，遵守性能红线。"
  • "把现有组件的配色迁移到此设计系统的 CSS 变量上，保持结构不变。"

9. 反模式（明确禁止）

  • ❌ 中性灰阴影（一律用色板色 rgba 阴影）
  • ❌ 完全对齐的等大同形网格（至少一处打破对齐）
  • ❌ 直角装饰容器（用 32px 圆角或 blob 形状）
  • ❌ 滥用 backdrop-filter 铺满全页面
  • ❌ scroll 事件驱动的动画（用 Intersection Observer）
  • ❌ 与色板无关的跳色（一切颜色从六色光谱及其透明度变体中取）