AIエージェント活用事例
Views —

AIエージェント活用事例

今日の新着

10すべて 241件

全241件中 1〜20件

開発・コーディング

Claude Code内で使うピクセルペイントを実装するエージェント

ターミナルのピクセルアートを手入力するのが大変だったため、Claude Codeでマウス描画できるペイントモードを作りました。

Claude Code

使い方

  1. 作成者はClaude Code向けのミニゲームモードを作る中で、ピクセル絵を文字で一つずつ入力するのが大変だと感じ、ペイントモードを作ることにしました。
  2. Claude Codeとともに画面表示モジュールと保存・クリップボード用モジュールを分離し、1文字セルに2ピクセルを収めるハーフブロック描画と4方向対称描画を実装しました。
  3. テストコードとREADME用プレビュー画像を生成するスクリプトもClaude Codeと一緒に作成したそうです。

結果

9色パレット、ブラシサイズ1〜4、直線、塗りつぶし、20段階の取り消しに対応し、作品をJS配列・ASCII・SVGとして書き出せます。作成者はユーザーの反応などの数値を明らかにしていません。

補足

MITライセンスで公開され、ネットワークリクエストは行わないとされています。細かなマウス座標はkitty、Ghostty、iTerm2、WezTermで利用できると記載されています。

出典

Reddit 原文 ↗

プロンプト例 · Claude Code

ターミナル内でマウスを使ってピクセル絵を描き、コードとして書き出せる小さなペイントツールを作ってください。

入力：実行環境［例：Claude Codeプラグイン、一般的なターミナルアプリ］、対応するターミナル［一覧］、キャンバスサイズの範囲［横x縦］、書き出し形式［JS配列、ASCII、SVGから選択］。まず、その環境でマウスドラッグと文字セルより細かい座標を取得できるか、プラグインの場合はどの拡張APIを利用できるか確認してください。

実装手順：1）ハーフブロック文字を使い、1セルに上下2ピクセルを描く画面から作る。2）左ドラッグを描画、右ドラッグを消去とし、ブラシサイズと色選択を追加する。3）直線、塗りつぶし、取り消し・やり直し、左右・上下対称を順に追加する。4）ドラッグが途切れないよう、画面描画とファイル保存・クリップボード処理を分離する。5）作品を切り抜いて書き出す機能を作る。外部プログラムの実行やネットワークリクエストは追加しないでください。

成果物：ソースコード、インストール方法、テスト。まず24x12キャンバスで描画・取り消し・対称処理がピクセル単位で正しいことをテストで確認してから、機能を増やしてください。