aris-pixel-art
- Repo stars 961
- License MIT
- Author updated Live
- Author repo dr-claw
- Domain
- Design
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 94 / 100 · audit passed
- Author / version / license
- @OpenLAIR · MIT
- Token usage
- Lean
- Setup complexity
- Plug-and-play
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: aris-pixel-art
description: Create a pixel art SVG illustration: $ARGUMENTS Keep it simple — 3-5 colors per character: Row 0…
category: design
runtime: no special runtime
---
# aris-pixel-art output preview
## PART A: Task fit
- Use case: Create a pixel art SVG illustration: $ARGUMENTS Keep it simple — 3-5 colors per character: Row 0 (hair top): 4 pixels centered Row 1 (hair): 6 pixels wide Row 2 (face top): 6 pixels — all skin runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Design Principles / Pixel Grid / Color Palette” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Create a pixel art SVG illustration: $ARGUMENTS Keep it simple — 3-5 colors per character: Row 0 (hair top): 4 pixels centered Row 1 (hair): 6 pixels wide Row 2 (face top): 6 pixels — all skin runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “Design Principles / Pixel Grid / Color Palette” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files.
Start with a small task and check whether the result follows “Design Principles / Pixel Grid / Color Palette”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: aris-pixel-art
description: Create a pixel art SVG illustration: $ARGUMENTS Keep it simple — 3-5 colors per character: Row 0…
category: design
source: OpenLAIR/dr-claw
---
# aris-pixel-art
## When to use
- Create a pixel art SVG illustration: $ARGUMENTS Keep it simple — 3-5 colors per character: Row 0 (hair top): 4 pixels…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Design Principles / Pixel Grid / Color Palette” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "aris-pixel-art" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Design Principles / Pixel Grid / Color Palette
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} Pixel Art SVG Generator
Create a pixel art SVG illustration: $ARGUMENTS
Design Principles
Pixel Grid
- Each "pixel" is a
<rect>with width/height of 7px - Grid spacing: 7px (no gaps between pixels)
- Characters are typically 8-10 pixels wide, 8-12 pixels tall
- Use
<g transform="translate(x,y)">to position and reuse character groups
Color Palette
Keep it simple — 3-5 colors per character:
- Skin:
#FFDAB9(light),#E8967A/#D4956A(blush/shadow) - Eyes:
#333 - Hair:
#8B5E3C(brown),#2C2C2C(black),#FFD700(blonde),#C0392B(red) - Clothes: use project's brand color (e.g.
#4A9EDAfor blue,#74AA63for green) - Shoes/pants:
#444 - Accessories:
#555(glasses frames),#FFD700(crown)
Character Template (7px grid)
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
Scene Composition
Chat Dialogue Layout (like our hero image)
- Two characters on left/right sides, vertically centered
- Chat bubbles between them, alternating left/right
- Bubble tails point toward the speaking character
- Arrows between bubbles show direction of communication
- Use
orient="auto"markers for arrow heads - Bottom: tagline or decoration
Single Character with Label
- Character centered
- Label text below
- Optional: speech bubble above
Group Scene
- Characters spaced evenly
- Optional: ground line, background elements
- Keep viewBox tight — no wasted space
SVG Structure
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" font-family="monospace">
<defs>
<!-- Arrow markers if needed -->
</defs>
<rect width="W" height="H" fill="#fafbfc" rx="12"/> <!-- Background -->
<!-- Characters via <g transform="translate(...)"> -->
<!-- Dialogue bubbles: <rect> + <polygon> tail + <text> -->
<!-- Arrows: <line> with marker-end -->
<!-- Labels: <text> with text-anchor="middle" -->
</svg>
Chat Bubble Recipe
<!-- Blue bubble (left character speaks) -->
<rect x="110" y="29" width="280" height="26" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5" rx="8"/>
<!-- Tail pointing left toward character -->
<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"/> <!-- covers stroke at junction -->
<text x="123" y="46" font-size="13px">📄 Message here</text>
<!-- Orange bubble (right character responds) -->
<rect x="490" y="71" width="280" height="26" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5" rx="8"/>
<!-- Tail pointing right toward character -->
<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>
Arrow Recipe
<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>
<!-- Right arrow (→): x1 < x2 -->
<line x1="392" y1="42" x2="465" y2="42" stroke="#4a9eda" stroke-width="2" marker-end="url(#ar)"/>
<!-- Left arrow (←): x1 > x2 -->
<line x1="488" y1="84" x2="420" y2="84" stroke="#da8a4a" stroke-width="2" marker-end="url(#ar-o)"/>
Workflow
Step 1: Understand the Request
- What characters/objects to draw?
- What's the scene? (dialogue, portrait, group, diagram)
- What colors/brand to match?
- What size? (compact for badge, wide for README hero)
Step 2: Generate SVG
- Write to a temp file or project directory
- Open with
open <file.svg>for preview - Keep viewBox tight — measure actual content bounds
Step 3: Iterate with User
- User provides feedback on screenshot
- Common fixes: overlap, arrow direction, spacing, sizing
- Use
Editfor small tweaks,Writefor major redesigns - Typical: 2-4 iterations to get it right
Step 4: Finalize
- Ensure no personal info in the SVG
- Clean up: remove unused defs, tighten viewBox
- Suggest adding to README:

Common Pitfalls
- Arrow direction:
orient="auto"follows line direction. Line going right→left = arrowhead points left - Bubble overlap: keep 38-44px vertical spacing between rows
- Text overflow: monospace 13px ≈ 7.8px/char, emoji ≈ 14px. Measure before setting bubble width
- Character overlap with bubbles: keep character x-zone and bubble x-zone separated by ≥10px
- viewBox too large: match viewBox to actual content, add ~10px padding
- Tail stroke artifact: always add a small
<rect>at the bubble-tail junction to cover the stroke line
Decide Fit First
Design Intent
How To Use It
Boundaries And Review