Shopify 设计师开源「Regen Icons」，为 AI Agent 构建的图标系统
Shopify 设计师开源了「Regen Icons」，为 AI Agent 构建的图标系统，已包含 225 个图标 @kazdenc 把整套图标做成了一个 “源码 → 编译 → 多格式输出” 的系...
Shopify 设计师 @kazdenc 开源了一个很实用的 AI Agent 图标系统，能自动生成符合家族风格的新图标，对做 AI Agent 的人应该有用。
Shopify 设计师 @kazdenc 开源了「Regen Icons」，一个包含 225 个图标的系统，专为 AI Agent 设计。它采用「源码 → 编译 → 多格式输出」的架构，源码是 JSON 绘图语言，编译器将 12 种基元编译成统一的 SVG path。编译过程会自动进行折线圆角化、箭头规则化等「润色」，并输出独立 SVG、React 组件等多种格式。项目包含机器可执行的设计规范，将硬约束（如 24×24 画布、安全区 2-22）与视觉建议分离，让 Coding Agent 能独立生成新图标并自动验证。
Shopify 设计师开源了「Regen Icons」，为 AI Agent 构建的图标系统，已包含 225 个图标 @kazdenc 把整套图标做成了一个 “源码 → 编译 → 多格式输出” 的系...
Shopify 设计师开源了「Regen Icons」，为 AI Agent 构建的图标系统，已包含 225 个图标 @kazdenc 把整套图标做成了一个 “源码 → 编译 → 多格式输出” 的系统，其中“源码”不是 SVG，是一种极简的 JSON 绘图语言；并且围绕这套语言写了一份机器可执行的设计规范，让 Coding Agent 能够独立地画出符合家族风格的新图标。 项目地址： github.com/kazdenc/regen-… # 核心设计：Source-first 架构 传统图标库（Lucide、Tabler 等）的 SVG 文件就是“源头”。而 Regen Icons 里，SVG 是编译产物，真正的源头是 generator/src/<名字>.icon.json。 编译器 build-icons.mjs 接受 12 种基元；line、polyline、rect、circle、arc、bend、quad、ellipse、dot、arrow、path、use；把它们编译成一条统一的 SVG path。编译时会做大量“润色”：折线顶点自动加 2px 圆角、箭头的头和杆自动按 6/8 的规则生成、笔画宽度在渲染期从同一几何派生出 1.5/1.75/2 三档。一次构建同时产出：独立 SVG（outline + filled）、React 组件（icons.tsx）、sprite、可搜索的 icons.json 目录、预览画廊和平衡度报告。 这个设计的好处很实际：改一处，所有下游格式同步更新，而且源文件对人类和 AI 都可读可 diff；这是给 agent 的贡献流程能跑通的前提。 # 设计规范：硬约束与视觉建议的分离 generator/docs/spec.md 是这个项目最见功力的文件。它把规则明确分成两层： 编译器强制执行的硬约束（validate() 里逐条实现，违反直接报错）： · 24×24 画布，安全区 2–22，所有点必须落在整数或半格网格上 · 圆心/半径必须在半格上；弧线角度必须是 45° 的倍数；旋转必须是 90° 的倍数 · 平行的轴对齐笔画中心距不得小于 3（编译器真的会收集所有线段做两两比对） · 圆角不超过短边的 50%、零长度线、未知基元、重名、文件名不匹配等 仅作提示的视觉建议（报告里标记但不拦截）： · 墨量（笔画长度×宽度）超过全套中位数 2.2 倍、中心偏移超过 1.25、包围盒小于 12 时会点名——但文档明说“这些是建议，不是错误，chevron 天生就轻” · 视觉平衡问题要求“移动质量去修，永远不要改笔画宽度” 这个分层非常关键：机器管不了的（曲线、斜线、美感）明确交给人眼审查，机器管得了的全部自动化。审查哲学也写得很克制：“在 16px 下评判它，不是 96px”“半个单位的改动是一次试验，不等于改进”。 # 为 Agent 而建：三层指令 + 闭环工作流 三份 Agent 指令文件 · AGENTS.md：通用入口，读 spec、先搜重、四步工作流 · CLAUDE.md：Claude Code 的精简版（就 10 行，指向 AGENTS.md） · .dev/SKILL.md：供 Agent 加载的技能包，含最完整的工作流细节 工作流是一个完整的验证闭环：编辑单个 JSON 源 → pnpm check（只验证不写盘）→ pnpm preview <名字> <邻居> --matrix（生成对比矩阵：16/20/24/32px × 三档笔画 × 两种形态 × 双主题）→ Agent 真的打开浏览器看渲染结果（SKILL.md 里特别强调“生成的截图不是审查，要去看它”）→ pnpm test 全量检查 → 提 PR，CI 自动跑测试。 几条针对 AI 的防呆规则也很有针对性：“不要从别的图标库拷贝路径”（防止混入风格不一致的来源）、“验证证明构造合法；视觉审查决定它是否属于这个家族”（防止 agent 把“通过 CI”当成“做得对”）、.dev/agents/openai.yaml 还预留了 OpenAI Codex 的接入位。 # 技术实现亮点 filled 形态的生成（fill.mjs）很聪明：填充版不是另画一份，而是用 paper.js 把轮廓图标的闭合区域和开放笔画（线段变胶囊、圆弧变环形扇区）做布尔并集，生成一个实心底色层，以 20% 透明度垫在轮廓下面——所谓 "tonal"（色调）填充。这保证了 outline 和 filled 永远几何一致，因为它们本来就是同一份源。 输出质量的细节：编译出的 SVG 只有 currentColor 一笔依赖，宽度靠 CSS 变量 --regen-icon-tone 可调，深浅主题自动适配。 Kazden @kazdenc astra is really good at svgs gave it a few grid and stroke constraints and told it to go to town on an svg icon set, not bad: 🔗 View Quoted Tweet 💬 0 🔄 0 ❤️ 0 👀 276 ⚡
