用途:生成像素风 SVG 插画,适合用在 README、文档或幻灯片中,例如绘制像素人物、对话场景或说明图。调用时以 $ARGUMENTS 传入需求,例如“画像素图”“pixel art”“make an SVG illustration”“README hero image”。
主要能力与设计规则:每个“像素”是一个 7px 的 <rect>,网格间距 7px,像素之间无缝隙;角色通常 8-10 像素宽、8-12 像素高;用 <g transform="translate(x,y)"> 定位并复用角色组。配色保持简单,每个角色 3-5 种颜色,资料给出的参考色包括肤色 #FFDAB9、腮红/阴影 #E8967A 与 #D4956A、眼睛 #333、头发 #8B5E3C / #2C2C2C / #FFD700 / #C0392B、裤子/鞋 #444、配饰 #555 与 #FFD700;衣服建议使用项目品牌色。资料还给出 8 行角色模板,从头发、脸、眼睛、嘴到身体与腿的像素分布。
场景构图:对话布局为左右各一个角色并垂直居中,中间放左右交替的聊天气泡,气泡尾巴指向说话角色,气泡之间用箭头表示交流方向,箭头头部用 orient="auto" 标记,底部可放标语或装饰;也支持单角色加标签、以及多角色群像布局。SVG 结构包含 defs、背景 rect、角色 g、气泡 rect + polygon 尾巴 + text、line 箭头和居中 text 标签;资料提供了聊天气泡与箭头的具体代码配方,但此处不完整抄录。
使用方式:先理解需求(画什么角色/场景、匹配什么颜色与品牌、尺寸偏 badges 还是 README hero),再生成 SVG 到临时文件或项目目录,用 open <file.svg> 预览,根据用户对截图的反馈迭代(常见修正有重叠、箭头方向、间距、尺寸),通常 2-4 轮完成。最后清理未使用的 defs、收紧 viewBox,并可建议在 README 中用 引用。
限制与注意事项:箭头方向随线条方向变化,从右向左的线箭头指向左侧;气泡行间保持 38-44px 垂直间距;等宽字体 13px 约 7.8px/字符,emoji 约 14px,需先测量再设气泡宽度;角色 x 区域与气泡 x 区域至少间隔 10px;viewBox 应贴合实际内容并留约 10px 内边距;气泡尾巴与气泡交界处需加小 <rect> 覆盖描边;最终 SVG 不应包含个人信息。资料未提供收费、价格或平台支持等信息。