frontend-design

前端设计

创建独具特色、达到生产级水准的 Web 界面，避免千篇一律的 AI 美学。

安装

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/frontend-design ~/.claude/skills/

设计思维流程

1. 理解背景

编写代码前，先回答：

• 目的： 这个界面要解决什么问题？谁会使用它？
• 受众： 技术水平、预期，以及他们到访时的情绪状态
• 约束： 框架要求、浏览器支持、性能预算、无障碍需求

2. 确定美学方向

选择鲜明的设计立场，而非“简洁现代”，而是真正明确的美学方向：

方向	特征
极致极简	单色、系统字体、鲜明留白、不加装饰
极繁主义	信息密集、层次丰富、多种字号、质感浓郁
复古未来主义	霓虹点缀、深色背景、网格线、等宽字体
有机／自然	柔和形状、大地色系、手绘元素、温暖
奢华／精致	纤细衬线字体、宽裕留白、低饱和配色、克制
趣味／玩具风	圆润形状、明亮原色、活泼动画
编辑／杂志风	强烈网格、鲜明的字体层级、引文
粗野／原始	结构外露、等宽字体、原生 HTML 的质感
装饰艺术／几何风	对称、金属色点缀、装饰性边框、棱角分明
柔和／粉彩风	浅色配色、柔和渐变、圆润、亲切
工业／实用主义	网格外露、状态指示器、信息密集

3. 找出令人难忘之处

每个界面都应有一个让人印象深刻的元素：

• 出乎意料的交互
• 独特的字体处理
• 大胆的色彩选择
• 令人惊喜的动画
• 打破常规的布局

4. 有意识地执行

关键在于坚定贯彻，而非一味求强。彻底贯彻的极繁主义行之有效，精准呈现的极简主义也行之有效。平庸折中的做法则不然。

字体排版

原则

• 选择有特色的字体，而非默认字体（展示用途避免使用 Arial、Inter、Roboto）
• 搭配展示字体（彰显个性）与正文字体（易于阅读）
• 字号层级：展示文字（48-96px）、标题（24-36px）、正文（16-18px）、小字（12-14px）
• 大号展示文字使用紧凑字距（-0.02 至 -0.04em）
• 正文使用常规或略宽的字距

免费字体来源

来源	适用场景
Google Fonts	选择最丰富，易于通过 CDN 使用
Fontshare	高质量展示字体
Fontsource	可自托管，可通过 npm 安装
Atipo Foundry	独具特色的展示字体

字体搭配策略

展示字体	正文字体	风格
衬线字体（戏剧感）	无衬线字体（简洁）	编辑风、奢华风
几何无衬线字体	人文主义无衬线字体	现代、亲切
等宽字体	系统无衬线字体	技术感、粗野风
粗衬线字体	中性无衬线字体	醒目、有条理
手写／展示字体	几何无衬线字体	趣味、创意

色彩与主题

构建配色

1. 从一种主色开始（奠定整体氛围）
2. 添加 1-2 种强调色（用于交互和突出重点）
3. 定义中性色阶（背景、边框、文本）
4. 添加语义色（成功、警告、错误）
5. 将所有颜色存储在 CSS 自定义属性中

:root {
  --color-primary: #...;
  --color-accent: #...;
  --color-bg: #...;
  --color-surface: #...;
  --color-text: #...;
  --color-text-secondary: #...;
  --color-border: #...;
}

规则

• 主色搭配强调色，而非平均分配
• 对比度至少符合 WCAG AA（文本为 4.5:1，大号文本为 3:1）
• 深色与浅色：坚定选择一种，不要折中
• 使用真实内容进行测试，而非 lorem ipsum

动效与动画

CSS 过渡（微交互）

.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

CSS @keyframes（环境动画）

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floating-element { animation: float 3s ease-in-out infinite; }

滚动触发（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

交错显示

.stagger-item { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
.stagger-item.visible { opacity: 1; transform: translateY(0); }
.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.2s; }

性能

• 仅为 transform 和 opacity 添加动画（由 GPU 合成）
• 避免为 width、height、margin、padding 添加动画（会触发布局计算）
• 谨慎使用 will-change，且仅用于即将添加动画的元素
• 简单动画优先使用 CSS，而非 JS
• 使用 prefers-reduced-motion 媒体查询满足无障碍需求

空间构图

• 打破内容默认居中的布局
• 有意识地运用非对称设计和突破网格的元素
• 使用 z-index 让元素重叠，营造层次感
• 采用充裕的留白，或可控的紧凑布局——选定一种并贯彻到底
• 使用 CSS Grid 构建复杂布局，使用 Flexbox 对齐组件

代码质量

• 使用语义化 HTML（nav、main、article、section、aside、footer）
• 确保无障碍访问：ARIA 标签、键盘导航、焦点管理
• 响应式设计：移动端优先或流式布局，并在 320-1440px 范围内测试
• 注重性能：图片延迟加载、高效选择器、尽量少用 JS
• 除非必要，否则不依赖外部资源（CDN 字体除外）

反模式

• 千篇一律的 AI 美学（到处都是紫色渐变，所有内容都用玻璃拟态）
• 不加定制地使用千篇一律的组件库
• 可预测的布局（主视觉区 → 三栏布局 → 用户评价 → CTA）
• 把“简洁现代”当作唯一的设计方向
• 过度使用的字体（Inter、Poppins 用于展示文本）
• 毫无目的的装饰元素
• 所有元素都采用圆角（可以有针对性地选择，但默认加圆角显得敷衍）
• 搭配霓虹色点缀的深色模式（已经用得太多）

关于字体搭配、色彩构建、动画库和无障碍检查清单，请参阅 REFERENCE.md。

品牌背景（可选）

如果工作目录中存在 brand-profile.json，请在设计前先阅读。使用其中的颜色（主色、辅助色、背景色、文本色）构建设计系统，使用字体（标题和正文）选择字体，使用美学特征（情绪关键词、纹理、留白）指导布局决策，并使用图像（风格、构图）设计主视觉区和视觉元素。此配置文件由 brand-dna 技能生成。