mcpField
P
pixel-art

pixel-art

github.com/wanshuiyin创意与媒体18.2k555 次安装4 天前更新
代码仓库

关于 pixel-art

用于生成像素风 SVG 插画的创作技能。它指导网格角色设计、配色与场景构图，并支持迭代调整和最终文件清理。

主要功能

  1. 01按固定像素网格设计
  2. 02提供角色与配色模板
  3. 03构建对话和群像场景
  4. 04生成并预览 SVG
  5. 05根据反馈调整布局
  6. 06清理最终 SVG 文件

适用场景

  1. 01创作像素风角色
  2. 02为 README 制作对话场景
  3. 03制作紧凑的 SVG 徽章或插画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/wanshuiyin/auto-claude-code-research-in-sleep --skill pixel-art

安装后在 Claude Code 中输入/pixel-art确认已加载。

详细介绍

像素艺术 SVG 生成器

创建一幅像素艺术 SVG 插图：$ARGUMENTS

设计原则

像素网格
  • 每个“像素”都是一个宽高为 7px 的 <rect>
  • 网格间距：7px（像素之间没有间隙）
  • 角色通常宽 8-10 个像素、高 8-12 个像素
  • 使用 <g transform="translate(x,y)"> 定位并复用角色组
调色板

保持简单——每个角色使用 3-5 种颜色：

  • 肤色：#FFDAB9（浅色）、#E8967A / #D4956A（红润色 / 阴影）
  • 眼睛：#333
  • 头发：#8B5E3C（棕色）、#2C2C2C（黑色）、#FFD700（金色）、#C0392B（红色）
  • 衣服：使用项目的品牌色（例如，蓝色用 #4A9EDA，绿色用 #74AA63）
  • 鞋子 / 裤子：#444
  • 配饰：#555（眼镜框）、#FFD700（皇冠）
角色模板（7px 网格）
Row 0 (hair top):     4 pixels centered
Row 1 (hair):         6 pixels wide
Row 2 (face top):     6 pixels — all skin
Row 3 (eyes):         6 pixels — skin, eye, skin, skin, eye, skin
Row 4 (mouth):        6 pixels — skin, skin, mouth, mouth, skin, skin
Row 5 (body top):     8 pixels — hand, 6 shirt, hand
Row 6 (body):         6 pixels — all shirt
Row 7 (legs):         2+2 pixels — with gap in middle
场景构图
聊天对话布局（类似我们的主视觉图）
  • 两个角色分别位于左右两侧，垂直居中
  • 聊天气泡位于两者之间，左右交替排列
  • 气泡尾巴指向发言角色
  • 气泡之间用箭头表示交流方向
  • 使用 orient="auto" 标记设置箭头
  • 底部：标语或装饰
带标签的单个角色
  • 角色居中
  • 标签文字置于下方
  • 可选：上方添加对话气泡
群像场景
  • 角色均匀间隔排列
  • 可选：地面线、背景元素
  • 让 viewBox 保持紧凑，避免浪费空间
SVG 结构
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" font-family="monospace">
  <defs>
    
  </defs>

  <rect width="W" height="H" fill="#fafbfc" rx="12"/>  

  
  
  
  
</svg>
聊天气泡制作方法

<rect x="110" y="29" width="280" height="26" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5" rx="8"/>

<polygon points="108,41 99,47 108,46" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5"/>
<rect x="107" y="40" width="3" height="7" fill="#e8f4fd"/>  
<text x="123" y="46" font-size="13px">📄 Message here</text>


<rect x="490" y="71" width="280" height="26" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5" rx="8"/>

<polygon points="772,83 781,89 772,88" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5"/>
<rect x="770" y="82" width="3" height="7" fill="#fdf2e8"/>
<text x="503" y="88" font-size="13px">🤔 Response here</text>
箭头制作方法
<defs>
  <marker id="ar" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
    <polygon points="0 0, 8 3, 0 6" fill="#4a9eda"/>
  </marker>
</defs>

<line x1="392" y1="42" x2="465" y2="42" stroke="#4a9eda" stroke-width="2" marker-end="url(#ar)"/>

<line x1="488" y1="84" x2="420" y2="84" stroke="#da8a4a" stroke-width="2" marker-end="url(#ar-o)"/>

工作流程

第 1 步：理解需求
  • 要绘制哪些角色 / 对象？
  • 场景是什么？（对话、肖像、群像、示意图）
  • 要匹配哪些颜色 / 品牌？
  • 尺寸多大？（徽章用紧凑尺寸，README 主视觉图用宽幅尺寸）
第 2 步：生成 SVG
  • 写入临时文件或项目目录
  • 使用 open <file.svg> 打开预览
  • 让 viewBox 保持紧凑——测量实际内容边界
第 3 步：与用户迭代
  • 用户根据截图提供反馈
  • 常见调整：重叠、箭头方向、间距、尺寸
  • 小幅调整使用 Edit，重大改版使用 Write
  • 通常需要迭代 2-4 次才能达到理想效果
第 4 步：完成
  • 确保 SVG 中不含个人信息
  • 清理：移除未使用的 defs，缩紧 viewBox
  • 建议将图片添加到 README：![Alt text](filename.svg)

常见问题

  • 箭头方向：orient="auto" 会遵循线条方向。线条从右向左 = 箭头指向左侧
  • 气泡重叠：各行之间保持 38-44px 的垂直间距
  • 文字溢出：13px 等宽字体 ≈ 7.8px / 字符，表情符号 ≈ 14px。设置气泡宽度前先测量
  • 角色与气泡重叠：角色和气泡的 x 坐标区域之间至少保持 10px 间隔
  • viewBox 过大：让 viewBox 匹配实际内容，并增加约 10px 的边距
  • 尾巴描边伪影：始终在气泡尾巴连接处添加一个小型 <rect>，以覆盖描边线

评论

支持 Markdown