frontend-css-patterns

Name: frontend-css-patterns
Author: majesticlabs-dev

github.com/majesticlabs-dev设计与 UI50182 次安装7 周前更新

代码仓库

关于 frontend-css-patterns

frontend-css-patterns 是一项为前端开发者提供视觉设计实现建议的技能，涵盖设计令牌、排版、配色、动效与空间布局。存在 DESIGN.md 时，它指导以其中定义的令牌为准生成 CSS。

主要功能

01从 DESIGN.md 映射设计令牌
02建立排版层级与字体搭配
03规划高对比度配色主题
04设计页面动效与状态转换
05采用非对称空间构图

适用场景

01依据项目令牌编写 CSS
02为页面选择字体与字号层级
03规划页面加载与滚动显现效果
04调整布局以形成视觉层次

安装

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

$npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-css-patterns

安装后在 Claude Code 中输入/frontend-css-patterns确认已加载。

详细介绍

前端 CSS 模式

打造独特视觉设计的实现模式。

设计令牌集成

如果项目中有 DESIGN.md 文件，请以其中的令牌为准：

/* Map DESIGN.md tokens to CSS custom properties */
:root {
  --color-primary: /* from {colors.primary} */;
  --color-accent: /* from {colors.accent} */;
  --font-display: /* from {typography.display.fontFamily} */;
  --spacing-md: /* from {spacing.md} */;
}

如果已定义令牌，请勿自行编造颜色、字体或间距值。生成 CSS 前，先解析 YAML frontmatter 中的 {token.ref} 引用。

排版

/* AVOID: Generic defaults */
font-family: Inter, system-ui, sans-serif;

/* PREFER: Distinctive pairings */
--font-display: 'Clash Display', 'Space Grotesk', sans-serif;
--font-body: 'Satoshi', 'General Sans', sans-serif;

/* Specific moods */
--font-luxury: 'Cormorant Garamond', serif;
--font-brutalist: 'JetBrains Mono', monospace;
--font-playful: 'Fredoka', 'Quicksand', sans-serif;

排版比例：

:root {
  --text-hero: clamp(3rem, 10vw, 8rem);
  --text-display: clamp(2rem, 5vw, 4rem);
  --text-heading: clamp(1.5rem, 3vw, 2.5rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
}

颜色与主题

:root {
  /* Dominant + sharp accent */
  --color-bg: #0a0a0a;
  --color-fg: #fafafa;
  --color-accent: #ff3366;
  --color-accent-muted: #ff336633;
}

坚持以下原则：高对比度、有限的调色板（3-4 种颜色）、醒目的强调色。

动效

优先打造影响力大的时刻，而非零散的微交互：

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fadeInUp 0.6s ease-out forwards;
}

.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }

重点关注：页面加载序列、滚动触发的显现效果、状态转换。

空间构图

打破网格：

不对称：有意错开元素
叠加：通过图层营造纵深感
对角流动：动态引导视线
留白：让内容有呼吸感

.hero-image {
  position: relative;
  top: -5vh;      /* Overlap the header */
  right: -2rem;   /* Extend past container */
}

视觉细节

/* Gradient overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05));
  pointer-events: none;
}

/* Glow effects */
.accent-element {
  box-shadow: 0 0 20px var(--color-accent-muted), 0 0 40px var(--color-accent-muted);
}

Tailwind 自定义

如果存在 DESIGN.md，请直接导出令牌：

npx design-md export --format tailwind

否则，请手动自定义主题，不要使用默认值：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: { display: ['Clash Display', 'sans-serif'] },
      colors: { brand: { DEFAULT: '#ff3366', muted: 'rgba(255, 51, 102, 0.2)' } },
    },
  },
}

支持 Markdown

登录后评论