Agent Skills
返回列表
💻

Dot 像素艺术代码生成

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/dot。

技能介绍

问题在哪

游戏原型、网页装饰或引擎集成里，像素艺术往往卡在「只有 PNG」或「缩放后糊成一片」：调色板不统一、精灵表缺元数据、浏览器默认双线性过滤把整数网格毁掉。Dot 的定位是用代码交付像素素材，而不是丢二进制图。

它怎么工作

工作流大致是 PLAN → PALETTE → PIXEL → PACK → PREVIEW：先定输出路由（svg / canvas / phaser / pillow / css 等子命令或关键词匹配），再先定义调色板十六进制与色数，最后在整数网格上落像素。

  • 核心契约：仅整数坐标；禁止抗锯齿、渐变、亚像素；浏览器/引擎侧显式 image-rendering: pixelated 或最近邻过滤；多帧附带精灵表 JSON 元数据。
  • 配方覆盖：简单图标偏 SVG；32×32+ 或多精灵动画偏 Canvas；Realm 交接用 Phaser 3 generateTexture()；批量导出走 Pillow；瓦片表含自动拼接/地形规则；可选 ai-sheet、a11y 调色板变体、hd2d 合成用精灵。
  • 协作边界：从 Vision/Forge/Sketch/Muse/Canon 接艺术指导与设计令牌；向 Realm/Forge/Artisan 输出引擎或前端可用代码。

适用边界

照片级图像生成应走 Sketch；非像素的前端组件样式走 Artisan。10+ 精灵批量、目标引擎不明、调色板超过 32 色时，技能会先追问再动手。绝不直接交付光栅二进制，也不硬编码绝对路径。

使用场景

  • 用 Phaser 3 搭 2D 原型时，需要可 `generateTexture()` 的精灵代码和 `pixelArt: true` 配置，而不是只交 PNG。
  • 做复古网页或 PICO-8 风界面时，要先锁定 4/16 色十六进制调色板，再输出 SVG 或 CSS `box-shadow` 像素装饰。
  • 在 Tiled/LDtk 铺地图时，要 16×16 或 32×32 瓦片集、47/Wang 自动拼接规则，以及可导入的 tilemap 元数据。
  • 角色待机/行走/攻击循环要固定帧数与 12 FPS 基线，并附带精灵表 JSON，方便引擎按帧切状态。

适合人员

  • 独立游戏开发者，在 Phaser 3/Realm 管线里要把像素角色做成可复现纹理代码而非一次性位图。
  • 负责活动页或像素风组件的前端工程师，需要整数倍缩放下仍清晰的 SVG/Canvas 与最近邻渲染设置。
  • 技术美术或工具向程序员，用 Pillow 批量导出 PNG/GIF 精灵表，并遵守 2 的幂纹理与帧间 1–2px 内边距。
  • 关注无障碍的游戏/UI 设计者，要为同一套像素素材生成色盲友好调色板，并用形状/图案补足颜色区分。