品牌规范应用指南：CSS变量定义颜色、字体、间距，实现文档、网页、演示文稿品牌一致性

brand-guidelines by skillcreatorai/ai-agent-skills

115 周安装量

994 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/skillcreatorai/ai-agent-skills --skill brand-guidelines

CSS 代码规范设计

🇨🇳中文介绍

品牌规范应用

目的

为任何产物应用一致的品牌样式：文档、演示文稿、网页或营销材料。

核心品牌元素

颜色

使用 CSS 变量定义您的品牌调色板：

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

字体排版

/* 标题主要字体 */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* 正文字体 */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* 代码等宽字体 */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* 字体大小比例 */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

间距

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Brand Guidelines Application

Purpose

Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.

Core Brand Elements

Colors

Define your brand palette with CSS variables:

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

Typography

/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Spacing

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Application Examples

Buttons

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

Cards

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Headers

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

Document Templates

Google Docs

Heading 1: Display font, 24pt, Brand Dark
Heading 2: Display font, 18pt, Brand Primary
Body: Body font, 11pt, Brand Text
Links: Brand Primary, underlined

Presentations

Title slides: White text on Brand Primary background
Content slides: Brand Dark text on white
Accent elements: Brand Secondary or Accent

Best Practices

Consistency : Use exact brand colors, never approximate
Contrast : Ensure 4.5:1 minimum for text readability
Hierarchy : Use size and weight to establish importance
Whitespace : Generous spacing feels premium
Logo usage : Maintain clear space around logo

Weekly Installs

115

Repository

skillcreatorai/…t-skills

GitHub Stars

953

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode98

gemini-cli96

codex91

cursor86

claude-code85

github-copilot85