# Gaoqian Style

> Gaoqian Style

- Skill: `carpo9984/gaoqian-style` (Agent Skill)
- Install (CLI): `npx skillmds@latest add carpo9984/gaoqian-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/carpo9984/gaoqian-style/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: carpo9984 (https://skillmd.com/u/carpo9984)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/carpo9984/gaoqian-style

---


# 搞钱学姐品牌视觉风格

## 适用场景
搞钱学姐品牌的所有对外物料：招商手册、活动海报、合作方案、社交平台长图、PPT等。

特别注意：如果物料是工作册、问卷、练习手册、PDF 小册子、A4 打印件，优先把它当成「可读、可填、可使用」的材料来设计。粉色、综艺感和品牌感仍然保留，但不能压过信息功能。

## 核心原则
- **不超过3种主要颜色**：粉红 + 白 + 深色文字
- **综艺感**：大胆标题、大字、强视觉冲击
- **女性向**：圆润、温柔但不软弱，有力量感
- **信息清晰**：甲方/合作品牌一眼看到重点
- **功能优先**：问卷、工作册、测评页必须让人看得清、写得下、勾得准
- **忠于原文**：不要凭空补信息；没有出处的扩写不能混进正文内容

---

## 配色方案

| 变量 | 色值 | 用途 |
|------|------|------|
| `--pink` | `#F2688A` | 主色，按钮、高亮、重点数字、渐变起点 |
| `--pink-mid` | `#E8507A` | 深粉，标签文字、加粗强调、渐变终点 |
| `--pink-light` | `#FFD6E0` | 浅粉，标签背景、分割线、卡片点缀 |
| `--pink-pale` | `#FFF5F7` | 极浅粉，区块背景色（权益区、卡片底色） |
| `--white` | `#FFFFFF` | 主背景、卡片 |
| `--text` | `#2a2a2a` | 正文文字 |
| `--text-soft` | `#888888` | 辅助说明文字 |

### 渐变用法
- **封面叠层**：`linear-gradient(to bottom, rgba(242,104,138,0.15), rgba(242,104,138,0.65) 60%, rgba(232,80,122,0.85))`
- **权益头图叠层**：`linear-gradient(to right, rgba(232,80,122,0.80), rgba(242,104,138,0.40))`
- **结尾叠层**：`linear-gradient(to bottom, rgba(242,104,138,0.3), rgba(232,80,122,0.85))`
- **产品卡片底部**：`linear-gradient(to top, rgba(232,80,122,0.88), transparent)`

---

## 字体

### 正文
```css
font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
```

### 标题/大字（封面、章节、权益名）
```css
font-family: 'STSong', 'Songti SC', 'STHeiti', serif;
```

> **注意**：不要用 Google Fonts（Noto Serif SC / Noto Sans SC），Chrome 无头模式导出 PDF 时会丢失文字。始终用系统字体。

---

## 字号体系

| 元素 | 桌面端 | 手机端 |
|------|--------|--------|
| 封面大标题 | 82px / weight 900 | 48px |
| 章节标题 | 42px / weight 900 | 30px |
| 权益大标题 | 52px / weight 900 | 36px |
| 条目标题 | 30px / weight 900 | 24px |
| 正文 | 17px / line-height 1.9 | 16px |
| 标签文字 | 12-15px / weight 700 | 11-13px |
| 封面副标题 | 22px / weight 300 | 17px |
| 数据大数字 | 48px / weight 900 | 36px |

### 关键数字和权益重点
- 必须加粗加大
- 颜色用 `--pink-mid` 突出
- 行内重点用 `<strong>` + `color: var(--pink-mid)`

---

## 布局组件

### 页面容器
```css
max-width: 900px;
margin: 0 auto;
```

### 封面
- 全屏高度 `100vh`，最小 `720px`
- 背景图 + 粉色渐变叠层
- 内容居底部，居中对齐
- 标签用圆角胶囊 `border-radius: 999px`，半透明白底 + 模糊

### 章节头部
- 居中对齐，上下 padding 充足
- 小标签（粉色底 + 深粉文字）→ 大标题 → 灰色说明文字
- 标签样式：`background: var(--pink-light); color: var(--pink-mid); border-radius: 999px; letter-spacing: 4px`

### 数据卡片行
- 4列等分网格，粉色背景，白色文字
- 数字超大（48px）+ 标签说明

### 照片拼贴
- 2+3 或 2列网格
- 图片间 `gap: 3px`，紧凑排列
- 图片 `object-fit: cover`

### 权益区块
- 整体浅粉底 `--pink-pale`
- 头图：全宽 + 粉色渐变叠层 + 白色文字
- 条目：图+文左右交替（grid 2列），文字侧 `padding: 40px 44px`
- 产品卡：4列网格，图片底部渐变叠层 + 白色产品名
- 要求框：全粉底 + 白色文字，2列网格列表

### 结尾页
- 全宽背景图 + 粉色渐变叠层
- 白色大字 + 半透明联系方式胶囊

### 工作册 / 问卷 / 测评页
- 先判断页面任务：展示、勾选、填写、评分、结果参考，不同任务用不同组件
- 选择题只放勾选框，不额外放写字框
- 需要参与者写下来的区域，留白要足够；少用密集横线，优先使用空白框或短填空
- 结果参考、答案、评分解释要放在下方或视觉弱一点的位置，避免参与者提前被答案影响
- 勾选框和文字首行必须对齐，多行文字缩进一致，左右栏密度接近
- 每一页必须有明确主角：问题、清单、表格、填写区或章节标题
- 空页面要合并，拥挤页面要拆分或压缩；合并后重新检查可读性和书写空间
- 每个区块只承担一个任务：标题识别、正文解释、卡片分类、空白填写、表格比较
- 章节编号要承担导航功能，不能只是小标签；章节起始页用统一的大号章节标

### A4 竖版 / PDF 输出
- 先确认 HTML 母版，再导出 PDF
- 如果用户要求 PDF 和 HTML 一致，优先用逐页截图合成 PDF，不用浏览器原生打印
- A4 竖版按纸面设计，底部保留页脚和安全区
- 导出前检查每页是否溢出、裁切、文字重叠；导出后抽查 PDF 页数、A4 尺寸和关键页
- 对中文字体保持保守：系统字体优先，避免无头浏览器导出时丢字、乱码、粗细异常

### 设计审稿清单
- 这页最终是给谁、在哪里、怎么用？
- 读者第一眼知道看哪里吗？
- 字和背景对比够吗？小标签在深色/浅色背景上都清楚吗？
- 有需要填写的地方吗？空间够真实书写吗？
- 选择题是否只保留勾选功能？
- 答案/结果是否出现得太早或太显眼？
- 同类组件是否统一：尺寸、圆角、边框、间距、对齐？
- 有没有重复文案、没出处的信息、多余装饰？
- 最长标题、最长选项、最多文字能放下吗？
- PDF/图片/PPT 最终产物是否和 HTML 视觉一致？

---

## 间距规范

| 位置 | 值 |
|------|-----|
| 章节头部 padding | `64px 40px 40px` |
| 条目文字区 padding | `40px 44px` |
| 要求框 padding | `48px 60px` |
| 元素间距（gap） | `3px`（图片间）/ `16px`（标签间） |
| 标签内边距 | `6px 20px`（大）/ `4px 14px`（小） |

---

## 手机端适配

```css
@media (max-width: 768px) {
  /* 照片网格改为单列 */
  /* 数据卡片改 2x2 */
  /* 产品卡改 2x2 */
  /* 权益条目改图上文下 */
  /* 要求框列表改单列 */
  /* 所有标题缩小 30-40% */
}

@media (max-width: 400px) {
  /* 标题再缩小一档 */
}
```

---

## PDF/打印适配

```css
@media print {
  @page { size: A4; margin: 15mm 12mm; }
  body { max-width: 100%; font-size: 11pt; }
  .cover { page-break-after: always; }
  .section-header { page-break-before: always; }
  .benefit-section { page-break-before: always; }
  .closing { page-break-before: always; height: 100vh; }
  /* 防止块内断裂 */
  .benefit-item, .highlight-box, .product-card { page-break-inside: avoid; }
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
```

---

## 快速复制：CSS 变量

```css
:root {
  --pink: #F2688A;
  --pink-mid: #E8507A;
  --pink-light: #FFD6E0;
  --pink-pale: #FFF5F7;
  --white: #FFFFFF;
  --text: #2a2a2a;
  --text-soft: #888888;
}
```

---

## 文案语气
- 甲方视角：强调"品牌回报""曝光量""用户触达""种草效果"
- 数据说话：人数、天数、曝光量、传播渠道
- 自信但不傲慢："确保品牌有充分的曝光""给品牌提供多样曝光场景"
- 结尾有力："财富觉醒，一起搞钱"

---

## 禁止事项
- 不要用超过3种主色
- 不要用 Google Fonts（PDF 会丢字）
- 不要用纯黑（`#000`），正文用 `#2a2a2a`
- 不要用棱角设计，圆角胶囊贯穿始终
- 不要把文字写得太小（正文不低于 15px）