Radio Quote Card

---
name: radio-quote-card
description: 当使用者给出「说话人名字 + 说话内容 + 主色」，说"做一张车队无线电那种语录卡"、"生成 XX RADIO 的图"、"把这句话做成无线电字幕卡"、"照那个红色波形的格式来一张"时使用。产出单文件 HTML，800×1000 竖版：顶部是名字（主色）加 RADIO（白色）的粗斜体标题、中间一条主色音频波形加通栏横线、下方是主色粗斜体全大写的引号语录、底边一条主色横条，底色固定为近黑。使用者没给图标就不放图标。不生成任何车队或厂商的徽标，不伪造真人说过的话。
category: coding-helper/ui-design
version: 0.1.1
status: draft
priority: P2
compatible_agents:
  - claude-code
  - cursor
  - codebuddy
  - generic-llm-agent
display_name: 无线电语录卡
outputs:
  - chat
max_rounds: 15
suggest_hint: 想把一句话做成车队无线电那种语录卡？给我名字、内容和主色
---

# 无线电语录卡 / Radio Quote Card

赛车队无线电字幕那种格式的语录卡。单文件 HTML，截图即用。

## 输入 / Input

三样，缺一样就问，别自己定：

| 输入 | 说明 | 例 |
|---|---|---|
| 说话人名字 | 会被转成全大写，建议 ≤12 个字符；中文名不超过 5 个字，再长会折成两行，把语录挤出卡片 | `MORELLI` |
| 说话内容 | 一句话，见下面的长度档位 | `Why did I have to let him by?` |
| 主色 | 十六进制。名字、波形、语录、横线全用它 | `#e8112d` |

**图标是可选的，默认没有。** 使用者提供了图片路径才放，放在第二行 RADIO 的左边。
不要自己画一个，也不要从别处找一个填上去。

## 卡片构成 / Anatomy

```
┌────────────────────────────┐
│                      NAME  │  第一行：名字，主色，116px
│              [图标] RADIO  │  第二行：RADIO，白色，138px，比名字大一号
│                            │
│▏▎▍▌▋▊▉█▉▊▋▌▍▎▏▎▍▌▋▊▉█▉▊▋▌▍│  主色波形，真正通栏，左右不留边距
│════════════════════════════│  主色横线 5px，通栏
│                            │  ← 这里留一小条上半块底色
├────────────────────────────┤  ← 可见的分界，下半块底色更深
│      "QUOTE GOES HERE AND  │
│         WRAPS ACROSS A FEW │  主色，右对齐，max-width 86%
│                     LINES" │  左边留一条空，不顶到边
│                            │
│════════════════════════════│  主色横条 9px，压在最底边
└────────────────────────────┘
```

尺寸 800×1000。四件事最容易做错，都在这里写死：

1. **名字和 RADIO 是上下两行**，不是并排一行
2. **RADIO 比名字大一号**（138px vs 116px），不是同一个字号
3. **标题整块右对齐**，语录也右对齐，都不居中
4. **语录 `max-width: 86%` 且 `margin-left: auto`**，右侧对齐、左边留一条空。
   占满整宽会让文字顶到边，右对齐就看不出来了

底色是固定的近黑双层（上 `#141417`、下 `#0b0b0d`，中间一道可见分界），
**不跟着主色变**。使用者说"做个蓝色的"，改的是 `--accent`，不是底色。

## 排版细节 / Type

这几条决定了像不像：

- 字体走 `Arial Narrow` 系的窄体，`font-weight: 900`、`font-style: italic`
- 光靠字体的斜度不够，再加 `transform: skewX(-7deg)`。这个倾角是这个格式的签名
- 全大写，`text-transform: uppercase`
- 语录用弯引号 `“` `”`，不要用直引号
- 语录右对齐。居中是错的，参考图里每一行的右端都对齐在同一条线上

### 语录字号档位

按字数选，不要让文字溢出卡片。**语录里有汉字就看中文那一列**：汉字和全角标点每个都占满一个字号宽，
同样的字数比拉丁字母宽将近一倍，照拉丁档排会溢出、被裁掉。中英混排也按中文列，字母只会更省地方。

数法：不算模板自带的首尾引号，标点、空格、字母、数字各算一个。能跑代码就用 `len()` 数，别目测，
中文档差一两个字就会多出一行。

| 拉丁字母（全英文） | 含汉字 | font-size |
|---|---|---|
| ≤ 60 | ≤ 36 | 66px |
| 61 – 100 | 37 – 45 | 56px |
| 101 – 140 | 46 – 80 | 46px |
| > 140 | > 80 | 先请使用者删到上限以内 |

中文列是在 Chrome 里按实渲染定的：到每档上限，66px 和 56px 不超过五行，46px 不超过七行，都不会被裁切。
标点多的句子会多占一行，上限已经为这个留了余量。

超过上限就不再缩字号。缩到那个程度已经不是这个格式了，
这种卡片的力量来自一句短话占满整块空间。

## 波形 / Waveform

波形是脚本按「语录 + 名字」做种子生成的，**同样的输入每次渲染都是同一条**。
不要改成 `Math.random()`，那样每刷新一次波形就变，同一张卡截两次不一样。

参数已经调过，贴近参考图：148 根、1px 间隔、中间高两头低的包络叠一层小幅噪声。
噪声压得住才像电平表，放大了就变成随机柱状图。

## 流程 / Process

1. 收齐三样输入，图标看使用者给没给
2. 复制 `templates/radio-card.html`，替换 `{{NAME}}` `{{QUOTE}}` 和 `--accent`
3. 按字数选语录字号，含汉字就看中文那一列
4. 有图标就把 `.logo` 那两处注释打开（它在第二行 RADIO 左边）；没有就保持注释状态
5. 渲染出来看一眼行数。三到四行最好看；超过五行就把字号降一档。
   46px 是最小一档，到这一档只看有没有被裁切（最后一行和底边横条都完整），裁了就请使用者删
6. 存成文件，告诉使用者路径和截图区域

`examples/example-card.html` 是填好的成品，可以直接打开对照。

## 输出格式 / Output

```markdown
卡片已生成：<文件路径>

- 主色：<色值>
- 语录字号：<档位>（<字符数> 字符）
- 图标：无 / 已放入 <路径>
- 截图：截 800×1000 那一块
```

## 边界 / Boundaries

- **不生成任何车队、厂商、赛事的徽标或商标**。图标位只接受使用者自己提供的图片。
  不要用 SVG 画一个近似的盾徽或标志糊上去。
- **不伪造真人说过的话**。这个格式看上去很像官方转播字幕，很容易被当真。
  内容是真实引语就要能说出出处；是玩梗或虚构，就要让使用者知道这一点，
  且不得用于让别人误以为某个真实的人真的说过这句话。
- **不冒充官方物料**。不加赛事台标、不加官方计时条、不做成看起来像转播截图的样子。
- **不拿它攻击真实个人**。给某个真人配一句羞辱性的话再做成这种卡，等于伪造发言。
- **不引外部资源**。字体走系统栈，不下载字体文件，离线打开必须一致。
- **底色不跟主色走**。近黑底是这个格式的一部分，换成彩色底就不是它了。

## 变更记录 / Changelog

| 版本 | 日期 | 变更 | 类型 |
|---|---|---|---|
| 0.1.1 | 2026-09-26 | 语录字号按实渲染另立中文一列（≤36 / 37–45 / 46–80 字，超 80 请删），修中文语录溢出卡片被裁；中文名限 5 字；46px 档只查裁切；补中文用例 | patch |
| 0.1.0 | 2026-08-12 | 初始草稿，波形密度与倾角对照参考图调过 | minor |