5.0 KiB

Raw Blame History

图标系统 (两层)

几何装饰 (圆点、徽章、品牌条、装饰线) 已在 layouts.md 起手块以 helper 封装 (add_dot / add_badge / add_accent_line / add_rect),直接调用,不要重写,也不要把它们当"图标"用。本文档处理的是真正的业务概念图标 (火箭 / 目标 / 雷达 / 齿轮 / 盾牌 ...)

选图标两层降级

1) Iconify 个性化图标   ── 业务概念 (火箭、目标、雷达、齿轮) → 见 §A
2) Unicode 字形兜底     ── Iconify 没有合适的 (✓ ✗ ★ → ↑) → 见 §B

整 deck 选一个图标集用到底,不要 tabler 跟 lucide 混用。

§A. Iconify 个性化图标 (本地缓存 + 网络拉取)

A1. 本地库 (两处:只读种子库 + 本 task 已拉)

种子库(只读): <skill_dir>/assets/icons/ —— skill 自带的商务红 tabler 种子集,详见 INDEX.md。docker 沙盒里 skills/ 是只读挂载,只能读、不能往这儿写。
本 task 已拉: <task_dir>/assets/icons/ —— A2 fetch 新图标的落点(可写)。

命名规约: <set>_<name>_<colorhex>_<sizepx>.png(如 tabler_rocket_C00000_128.png)

用之前先 glob 两处都查一遍(种子库 <skill_dir>/assets/icons/ + 本 task <task_dir>/assets/icons/),有就直接 add_picture,免去网络往返。

A2. fetch_icon.py 拉新图标

脚本在 <skill_dir>/scripts/(只读可执行);拉下来的图标 -o 必须落 <task_dir>/assets/icons/(种子库只读,新图标进 task 目录):

# 主红色 128px PNG (推荐)
python <skill_dir>/scripts/fetch_icon.py rocket --set tabler --color C00000 \
    --size 128 -o <task_dir>/assets/icons/tabler_rocket_C00000_128.png

# 强调色金黄
python <skill_dir>/scripts/fetch_icon.py target --set tabler --color FFC107 \
    --size 128 -o <task_dir>/assets/icons/tabler_target_FFC107_128.png

--set 默认 tabler(4500+ 商务图标,MIT)。其它选 lucide / heroicons / material-symbols / carbon / fluent / mdi。整 deck 只用一个 set。

PNG 转换需 pip install cairosvg(推荐)或 pip install svglib。没装也能拿 SVG。

A3. 嵌入幻灯片

slide.shapes.add_picture(
    "<task_dir>/assets/icons/tabler_rocket_C00000_128.png",   # 路径 = glob 命中的那处(种子库或 task)
    Inches(1.0), Inches(2.5),
    width=Inches(0.8),       # 装饰图标 0.5-1.5 in;别超 2 in
)

A4. 浏览找名字

打开 https://icon-sets.iconify.design/ 搜关键词,如 "rocket" / "数据" / "shield",拿到名字 (如 tabler:rocket) 直接给 fetch_icon.py。

A5. 流程节点 (替代 PENTAGON)

需要"调研→设计→开发→测试→上线"这种横向流程时,不要用 PowerPoint 内置 PENTAGON(视觉陈旧),改用 Iconify 的 chevron-right + 文本组合:

from pptx.util import Inches
from pptx.enum.text import PP_ALIGN
# 假设页面顶部已 import pptx_helpers as P,且 slide 已建(见 layouts.md §通用起手)
stages = ["调研","设计","开发","测试","上线"]
icon_path = "<task_dir>/assets/icons/tabler_chevron-right_C00000_64.png"  # 先 fetch_icon.py 拉到 task,种子库没有 chevron-right_64
for i, label in enumerate(stages):
    x = 0.7 + i * 2.4
    P.add_textbox(slide, x, 3.7, 1.8, 0.5, label, 16, bold=True,
                  color=P.PRIMARY, align=PP_ALIGN.CENTER, name=f"stage_{i}")
    if i < len(stages) - 1:  # 节点间放 chevron
        slide.shapes.add_picture(icon_path, Inches(x + 1.85), Inches(3.7),
                                  width=Inches(0.4))

§B. Unicode 字形 (兜底)

Iconify 都没合适的时候用。避 emoji,用单色符号:

✓ ✔ ✗ ✘    对号 / 错号
★ ✦ ✧ ✪    星
→ ← ↑ ↓ ↔  箭头
↗ ↘ ↙ ↖    斜箭头
● ○ ◉ ◎    圆
⬛ ⬜ ◆ ◇    方块菱形
∴ ∵ ⇒ ⇔    数学
№ ¶ § †    文档

# 强调色对号 96px → PNG
python <skill_dir>/scripts/render_icon.py "✓" --color "#C00000" --size 96 -o <task_dir>/slides/check.png

§C. 硬规则

风格统一 —— 整 deck 只用一个 Iconify set;不要 tabler 跟 lucide 混
颜色限定 —— 只用 PRIMARY / SECONDARY / ACCENT / GREY,不要每图标独立配色
大小克制 —— 装饰图标 0.5-1.5 in;不超过 2 in
不替表意 —— 一个 ★ 不能代替"重点"两字
避免 emoji —— 跨系统渲染差异大,且自带颜色冲突主题
不要每页都堆 —— 装饰是配角,文字是主角
缓存复用 —— Iconify 拉的图标进 <task_dir>/assets/icons/,本 task 内再用直接读,不要重复请求(种子库 <skill_dir>/assets/icons/ 只读,新图标不往那写)

§D. 不要把 layouts.md helper 当"图标"

add_dot / add_badge / add_accent_line / add_rect 是几何装饰(品牌条、圆点 bullet、编号徽章、装饰短线),不是业务图标。它们底层是 MSO_SHAPE.OVAL/RECTANGLE,但模型不要直接调 MSO_SHAPE —— 全部走 layouts.md 的 helper 接口。

5.0 KiB Raw Blame History