生成标签形状的序号

该专题还在整理中。

如果你问的是“怎么让 AI 生成那种带标签形状的序号（比如圆形、圆角矩形、胶囊形、书签形、丝带形）”，那本质上不是让模型凭空画一个序号，而是让它在 HTML/CSS、SVG 或设计工具脚本里，用样式把数字包进一个可控的标签容器中。真正决定效果的，是形状参数、尺寸约束、配色和导出格式，而不是“请帮我生成一个好看的序号”这种模糊指令。

先分清你要的是哪一类“标签形状序号”

这个需求在不同场景下差别很大，先对号入座，后面提示词和实现方式才不会跑偏。

场景	典型形状	推荐实现
网页/文章小标题	圆形、圆角矩形、胶囊形	HTML + CSS
PPT/海报/信息图	丝带、书签、六边形、爆炸贴	SVG 或设计工具脚本
UI 组件/步骤条	圆形徽标、方形角标	CSS 或组件库
批量生成图标素材	多种形状统一风格	SVG 批量导出
印刷/排版	矢量标签、可缩放	SVG / PDF

让 AI 生成时，提示词要写清这 6 个要素

很多人只写“生成一个标签形状的序号”，模型只能给你一个大概样子。想稳定出结果，提示词里最好包含下面这些信息：

形状：圆形、圆角矩形、胶囊、丝带、书签、盾牌、六边形、对话气泡等。
数字内容：是 1、01、① 还是 Step 1，是否要前导零。
尺寸：例如 48×48、120×40，或“宽高比 3:1”。
配色：主色、文字色、描边色、是否有渐变或阴影。
字体与字重：无衬线、加粗、居中、字号相对容器的大小。
输出格式：HTML+CSS、SVG 代码、React 组件、Figma 插件脚本等。

例如，一个比较靠谱的提示词可以写成：

“请用 HTML 和 CSS 生成一个胶囊形标签序号，内容为 01，尺寸 96×40，背景 #2563eb，文字白色加粗居中，圆角 999px，带轻微阴影，输出完整可复制的单文件代码。”

几种常见形状的 CSS / SVG 思路

1. 圆形序号

圆形最简单，核心是宽高相等 + border-radius: 50% + flex 居中。适合步骤、列表、时间轴。

容器：width: 40px; height: 40px; border-radius: 50%;
居中：display: flex; align-items: center; justify-content: center;
数字：建议字号为容器高度的 40% 到 50%。

2. 圆角矩形 / 胶囊形

圆角矩形把 border-radius 设为高度的一半，就会变成胶囊形。它比圆形更适合放“01”“Step 1”这种多字符内容。

胶囊：border-radius: 999px;
普通圆角：border-radius: 8px 或 12px;
内边距：左右留出至少 0.6 倍字高的空间，避免数字贴边。

3. 丝带 / 书签形

这类形状用纯 CSS 也能做，但更推荐 SVG，因为路径可控、缩放不糊。丝带通常由矩形主体加两侧折角组成，书签则是矩形底部挖一个 V 形缺口。

SVG 用 <path> 描述外形，数字用 <text> 居中。
需要尖角时用 polygon，需要曲线时用 path。
导出时保留 viewBox，方便任意缩放。

4. 六边形 / 盾牌 / 爆炸贴

这些属于装饰性更强的标签，适合海报、游戏 UI、活动页。AI 生成时最好直接要求输出 SVG 路径，而不是让它用 CSS 硬拼，否则兼容性和精细度都容易出问题。

如果要用 AI 工具直接生成，可以怎么选

不同工具擅长的方向不一样：

ChatGPT：适合生成 HTML/CSS/SVG 代码，改起来快。入口：https://chatgpt.com
Claude：长代码和结构说明比较稳，适合复杂 SVG。入口：https://claude.ai
Gemini：适合结合多模态参考图来生成。入口：https://gemini.google.com
Figma：本身不是 AI 生成器，但配合插件可以批量做标签组件。入口：https://www.figma.com
Canva：适合非代码用户直接拖拽做标签图形。入口：https://www.canva.com

如果你要的是可复用、可批量、可进代码库的结果，优先让 AI 输出 SVG 或 HTML+CSS；如果只是做一张图，用 Canva 这类工具反而更快。

一个可直接复制的 HTML+CSS 示例思路

下面这种结构，AI 很容易生成，也很容易改：

外层 span 负责形状、背景、尺寸。
内层文字负责数字内容。
用 display: inline-flex 让标签能跟着文字排版走。
用 line-height: 1 避免数字上下偏移。

你可以把需求写成：“生成一个胶囊形序号标签，内容 01，背景深蓝，文字白色，圆角 999px，内边距 6px 14px，字号 14px，加粗，居中，输出单文件 HTML。” 这样得到的结果通常一次就能用。

常见坑

只写“标签形状”：模型会自由发挥，形状不可控。
没给尺寸：生成结果可能过大或过小，排版时还要重调。
没给输出格式：可能给你图片描述，而不是代码。
忽略字体：数字在不同字体下宽度差异很大，胶囊容易变形。
用位图代替矢量：放大后模糊，后期改色也麻烦。

生成标签形状的序号

先分清你要的是哪一类“标签形状序号”

让 AI 生成时，提示词要写清这 6 个要素