智能体
x.com ·
@shao__meng
Shopify 设计师开源 Regen Icons：为 AI Agent 打造的图标系统，含 225 个图标
Shopify 设计师 @kazdenc 开源 Regen Icons，一套面向 AI Agent 的图标系统，已含 225 个图标。其核心是 source-first 架构：真正的源头是极简 JSON 绘图语言（generator/src/<名字>.icon.json），SVG 只是编译产物。编译器 build-icons.mjs 接受 line、polyline、rect、circle、arc、bend、quad、ellipse、dot、arrow、path、use 等 12 种基元，统一编译为 SVG path，并自动做折线圆角、箭头头杆生成、笔画宽度派生等润色，一次构建同时产出独立 SVG、React 组件、sprite、可搜索 icons.json、预览画廊和平衡度报告。项目还提供 spec.md 设计规范，将编译器强制硬约束（24×24 画布、安全区 2–22、半格网格、弧线 45° 倍数、平行笔画中心距不小于 3 等）与仅作提示的视觉建议分离，并配套 AGENTS.md、CLAUDE.md、.dev/SKILL.md 三层 Agent 指令和“编辑源→check→preview→人工审查→test→PR”的闭环工作流。filled 形态通过 paper.js 对轮廓做布尔并集生成 tonal 填充，保证与 outline 几何一致。
AI推荐理由
内容具体介绍了 Shopify 设计师开源的 Regen Icons 图标系统：以极简 JSON 绘图语言为源、编译产出 SVG/React/sprite 等多格式，并配有机器可执行设计规范（硬约束与视觉建议分层）和面向 Agent 的三层指令与验证闭环。对 Agent 工具链和设计系统落地有实际参考价值，细节密度高。局限是信息来自 X 转述，未提供独立验证或实际使用效果，互动量低不代表质量。
78
浏览 276
点赞 0
评论 0
转发 0
正文
Shopify 设计师开源了「Regen Icons」，为 AI Agent 构建的图标系统，已包含 225 个图标
[@kazdenc](https://x.com/kazdenc) 把整套图标做成了一个 “源码 → 编译 → 多格式输出” 的系统，其中“源码”不是 SVG，是一种极简的 JSON 绘图语言；并且围绕这套语言写了一份机器可执行的设计规范，让 Coding Agent 能够独立地画出符合家族风格的新图标。
项目地址：[github.com/kazdenc/regen-…](https://github.com/kazdenc/regen-icons)
# 核心设计：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](https://x.com/kazdenc/status/2098211946516373634)