mcpField
P
pixel-art

pixel-art

github.com/wanshuiyinクリエイティブ・メディア18.2k555 回インストール4 日前に更新
リポジトリ

pixel-art について

ピクセルアートのイラストをSVGで作成するクリエイティブスキルです。グリッドに沿ったキャラクター設計、配色、シーン構成を案内し、調整を重ねてファイルを仕上げます。

主な機能

  1. 01固定ピクセルグリッドでの設計
  2. 02キャラクターと配色のテンプレート
  3. 03会話やグループシーンの構成
  4. 04SVGの生成とプレビュー
  5. 05フィードバックに基づくレイアウト調整
  6. 06完成SVGファイルの整理

活用シーン

  1. 01ピクセルアートのキャラクター作成
  2. 02README用の会話シーン制作
  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 の等幅フォントは 1 文字あたり約 7.8px、絵文字は約 14px です。バブルの幅を決める前に測定します
  • キャラクターとバブルの重なり：キャラクターの x 方向の領域とバブルの x 方向の領域は、10px 以上離します
  • viewBox が大きすぎる：実際のコンテンツに合わせ、約 10px の余白を加えます
  • しっぽの線のアーティファクト：しっぽとバブルの接合部に小さな <rect> を必ず追加し、線を隠します

コメント

Markdown 対応