Communityコーディング&開発github.com

Pixerate/pixerate-brushes

Pixerate ブラシライブラリでブラシを検索、記述、作成、変更、確認、共有する方法:ブラシはファセット(種類、媒体、バリエーション、ツール、チップ、マーク、ダイナミクス、動作、ライト、モーション、カラー)、画像チップ、画像ソースから作られるチップグレイン、組み込みプリセット、ペイントエディタ、画像エディタ、キャンバス、ベクターストロークをレンダリングするホストプロファイルで構成されます。ブラシの作成、デザイン、調整、保存、コピー、削除、エクスポート、インポート、チェック、画像からのブラシ作成(スキャンしたマーク、葉、テクスチャ)、ブラシグレインの付与、Photoshop .abr や Procreate .brush/.brushset パックの取り込み、媒体(鉛筆、インク、水彩、油彩、エアブラシ、蛍光ペン)に合ったブラシの検索、別のエディタで動作するブラシの作成に使用します。

pixerate-brushes とは?

`pixerate-brushes` スキルは、Pixerate エコシステム内でブラシを管理・操作するための包括的なツールセットです。ブラシは「ファセット」と呼ばれる属性(種類、媒体、チップ形状、マークタイプ、ダイナミクス、動作など)で定義され、特定の描画エンジンに依存しません。このスキルを使用すると、`list_brush_presets` でホスト(ペイントエディタ、画像エディタ、キャンバス、ベクターストローク)がレンダリング可能なブラシを検索・フィルタリングし、`describe_brush` で詳細な仕様を確認できます。新しいブラシは、既存のプリセットをベースにファセットを変更して作成したり、`add_brush_source` で画像(スキャンしたテクスチャや葉など)からチップやグレインを作成し、`create_brush` で保存できます。また、`import_brush_pack` で Photoshop や Procreate のブラシパックをインポートし、`export_brushes` や `import_brushes` でライブラリファイルを共有できます。各ブラシは `check_brush` でホスト互換性を検証でき、サポートされていないファセットはエラーや警告として報告されます。このスキルは、ブラシの設計、調整、共有、異なるエディタ間での互換性管理において、開発者や AI エージェントにとって不可欠なツールです。

対応~Claude Code~Codex CLI~Cursor
Part ofMobile
npx skills add https://github.com/Pixerate/editor/tree/HEAD/packages/core/skills/pixerate-brushes

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ブラシ

ブラシは、どのエンジンで描画されるかではなく、ファセット(その性質と動作を定義する属性)で構成されます。 必須なのは id、name、kind、tip.shape のみで、その他のフィールドはファセットが選択するエンジンのデフォルト値を取ります。そのため、ブラシはそのブラシを定義する値だけを保存します。ライブラリは、組み込みプリセット(読み取り専用)とユーザーのブラシを保持し、ペイント機能を持つすべてのエディタ間で共有されます。

ファセット(フィールド)保持する内容
種類(Kind)mark は素材を配置します。tool は既に配置されたペイントに作用します。
媒体とバリエーションマーク:何を配置するか(paint、ink、dry、spray)とその種類(oil、watercolor、gouache、pencil、charcoal、airbrush、marker、highlighter…)。ブラシ検索のための記述的な情報です。バリエーションが watercolor、gouache、oil のウェットブラシは、その媒体をペイントします。
ツールツール:eraser、blender、smudge、およびウェットペイント用の water、dryer、blow、blot、wet-blend、wet-drag。
チップshape(round、flat、chisel は roundness と angle で設定される楕円です。bristle は毛束を持ちます。stamp は stamps の形状を取ります:エディタースタンプ editor:star、find_stickers からの任意のステッカー参照、または画像ソース source:<id>)、サイズ(px)、硬さ(画像チップは1未満の場合、エッジに向かってフェードします)、間隔、不透明度、フロー、ブレンドモード、および grain(各ダブ内のテクスチャ:source は rough、canvas、sanded などのパターン、または source:<id>。mode の texturised はキャンバス上に固定され、moving はチップと共に回転します。scale、depth、contrast、invert)。
マークcontinuous ダブ(デフォルト。スタンプチップの場合、すべてのダブは最初のスタンプの形状をペイントカラーで描画します)、scatter(スプレー:チップ全体に液滴が散布され、density、size)、particles(ストランド、スプリング、リボン、スパーク。スタンプからのテクスチャ付きドット)、または objects(各マークが編集可能なステッカーで、独自の色を持ちます)。
ダイナミクスペンの感覚:サイズと不透明度への筆圧、スムージング、傾き、速度、ジッター(sizeJitter、回転用の angleJitter、opacityJitter、scatter)、回転、count(間隔ステップあたりのダブ数、それぞれジッターされます)、および flip(ダブをランダムにミラーリング:x、y、xy)。
動作surface:dry、wet(wet 設定)、または thick(thick インパスト設定)。紙の grain。exchange(ピックアップと混合。reservoir はミキサーブラシを作成します)。ツールの strength。
ライトブラシが発する光(amount)、および推奨レイヤー spill と glow。
モーションペイント後のアニメーション(ライブエフェクトペイント、パーティクルの waveSpeed)。
カラーdefault カラー、最大16色の palette、own(常に独自の色)。それぞれは、16進数または rgba() カラー、ライト/ダークペア { light, dark }、グラデーション、またはエフェクトペイントです。グラデーションのデフォルトは常にペイントされます。ソリッドまたはライト/ダークのデフォルトは、ブラシが選択されたときにエディタのカラーになります(ユーザーがロックしていない場合)。カラースキームに応じて解決されます。キャンバスストロークとベクターブラシストロークも、色が指定されていない場合はそれを採用します。キャンバスとベクターは同じロック(canvas.setColorLocked、vector.setColorLocked)を持ち、ライト/ダークデフォルトから取得されたキャンバスカラーは、ペイントエディタと同様にカラースキームに従います。既に作成されたベクターストロークはその色を保持します。

媒体からファセットへのマッピング:鉛筆や木炭は、高い grain と傾きを持つ dry です。インクは、筆圧でサイズが変わる硬い丸いチップです(ペンは速度で細くなります)。水彩やウェット油彩は、surface: 'wet' 上の paint です。インパストは、surface: 'thick' です。エアブラシは、ソフトで低フローの spray です。スプレー缶は、marks が scatter の spray です。ボールペン、ゲルペン、ファインライナーは、小さく硬いチップを持つ ink です(筆圧でサイズが変わらないファインライナー)。クレヨンやチョークは、高い grain を持つ dry です。蛍光ペンは、ink / highlighter、マルチプライの鑿(ちせつ)チップで、わずかな光、spill 半径0、デフォルトで蛍光イエローです。スタンプブラシは、連続マークを持つ stamp チップです。パーティクルやステッカーブラシは、stamp チップ上の marks パーティクルまたはオブジェクトです。イメージブラシ(スキャンした木炭マーク、葉、ドライブラシテクスチャ)は、スタンプが画像ソースである stamp チップで、通常 tip.grain、angleJitter、flip、および若干の scatter を持ち、繰り返しが目立たないようにします。

画像ソースは、チップとグレインが作られる元となる画像で、そのバイト(最大512pxのグレーマスク)とライセンスと共にライブラリに保存されます。add_brush_source は PNG から画像ソースを作成します。マークは、その透明度、暗い部分(紙の上のスキャン)、または明るい部分(白地に黒)から読み取られます。ライブラリファイル(export_brushes)と保存されたペインティングは、ブラシが使用する画像ソースを運ぶため、どこでも同じようにペイントおよび再生できます。

ホストプロファイル

各ホストは、この仕様の一部をレンダリングします。check_brush は、ホストが拒否するもの(エラー)と、ホストがレンダリングせずにペイントするもの(警告)を、それぞれ修正方法と共に示します。リスト表示と書き込みは、現在のホストを使用します。

ホストレンダリングするもの
ペイントエディタ(paint)すべて。画像チップとチップグレインを含みます。
画像エディタ(image)ラウンド、フラット、チゼルチップ上のドライダブ、ミキサーブラシ、イレーサー。ウェットまたはシックサーフェス、パーティクル、オブジェクト、スタンプまたはイメージチップ、ライト、モーションはありません。チップグレインと count を無視してペイントします。set_brush_preset で選択します。
キャンバス(canvas)パスに沿ったドライダブブラシ(ツール、ウェット、シック、パーティクル、オブジェクト、スタンプまたはイメージチップ、ライトはありません)。速度、チップグレイン、count は無視されます。canvas.drawFreehand で brush として描画します。
ベクターストローク(vector)キャンバスと同様に、ウェットペイント(水彩、ガッシュ、ウェット油彩:ストローク自身の領域内でシミュレートされ、その後乾燥)、ミキサーブラシ、スマイジツールとブレンダーツール(ストロークの下にある形状に作用)を追加します。ライトブラシはプレーンカラーとしてペイントします。ウェットツール(水、ヘアドライヤー、ブロー、ウェットブレンド、ウェットドラッグ、ブロット)、シックペイント、パーティクル、オブジェクト、イレーサーは拒否されます。vector.addBrushstroke で brushId として描画します。

すべてのホストは、そのプロファイルが許可するプリセットと、ライブラリに保存されたブラシのうち許可するものをリストし、各ホストはこれらのツールを独自のプロファイルで登録するため、list_brush_presets はそのホストのブラシを表示します。ユーザーはすべてのホストで同じブラシエディタを使用してブラシを編集しますが、スコープは同じ方法で適用されます。ホストが使用するコントロールのみを表示し(キャンバスでは速度なし、画像エディタではグレインなし)、他のホスト用にブラシが持つものは保存時に保持されます。ツールも同じルールに従います(「落とし穴」を参照)。キャンバスまたはベクターストロークで使用される保存されたブラシは、ストロークにコピーされるため、ライブラリがない場所でもドキュメントがレンダリングされます。後でライブラリ内のブラシを変更しても、既に描画されたストロークは変わりません。

作業手順

  1. 最も近いブラシを見つける。 medium、variety、kind、または text を指定して list_brush_presets を実行します。このホストがレンダリングできるもののみをリストします(all: true で残りを renderable と共にリストします)。
  2. ブラシを読み取る。 describe_brush で、完全な仕様、解決されるエンジン、およびそのチェック結果を取得します。
  3. ブラシを作成する。 create_brush で、新しい id、name、最も近いプリセットを basedOn として指定し、変更するファセットのみを渡します(オブジェクトはマージされ、リストは置き換えられます)。problems(値がクランプまたは削除されたもの)と warnings を読み取ります。ホストがレンダリングできないブラシは拒否され、何も保存されません。
  4. ブラシを確認する。 ホストにレンダラーがある場合は preview_brush を実行します。それ以外の場合は、エディタでテストストロークをペイントします(新しい id で set_brush を実行し、次に paint_stroke を実行します)。
  5. ブラシを調整する。 update_brush で、変更するファセットを渡します。ファセット全体を削除するには unset を使用します。変更されたリーフパス changed が返されます。組み込みプリセットは変更できません。最初に duplicate_brush を実行します。
  6. 画像からブラシを作成する。 add_brush_source で PNG を渡します(channel は auto で誤った部分を選択した場合に使用します。元の licence を保持します)。次に、create_brush でイメージチップ用に tip: { shape: "stamp", stamps: ["source:<id>"] } を、グレイン用に tip.grain.source を指定します。list_brush_sources は画像ソースをリストし、各ソースを使用しているブラシも表示します。
  7. パックを取り込む。 import_brush_pack で、ファイル(base64)、その fileName、および元の licence を渡します。brushes(このホストの renderable 付き)、unsupported(マッピングされなかったもの)、licence を読み取り、次に preview_brush でいくつか確認し、update_brush で調整します。
  8. ブラシを共有する。 export_brushes はライブラリファイルを書き出します。import_brushes はライブラリファイルを追加します(バージョン1のファイルは、ペイントエディタの古いブラシから移行されます)。他のエディタにブラシを渡す前に host を指定して check_brush を実行します。

ベストプラクティス

  • 最も近いプリセットから始めて、2~3のファセットを変更します。ゼロから作成したブラシは、エンジンのデフォルトを取得するため、媒体に適さないことがよくあります。
  • ブラシが使用される紙と色でテストします。グレインの応答とグレーズは、滑らかな紙とざらついた紙で異なって見えます。
  • ライトブラシには暗い紙を使用し、蛍光ペンには light.spill 半径を0に設定して、グローがストローク上に留まるようにします。
  • variety は真実に保ちます(これがブラシを見つける方法です)。ジョブ用に tags を追加します(lettering、foliage)。
  • 媒体に典型的な色がある場合(青いボールペン、黄色い蛍光ペン)にのみ、ブラシに colour.default を設定します。ブラシを選択すると、それがユーザーの色として設定されます。正しい色が背景に依存する場合(黒板に白いチョーク、紙に黒鉛)は、ライト/ダークペアを使用します。他の通常の色には palette を使用します。暗いインクもペアが必要です(濃紺/ライトブルー、ニアブラック/ニアホワイト)。単一の暗いデフォルトは、ダークスキームのエディタで見えなくなります。各色を、それが使用される背景に対して確認します(最低3:1)。colour.own は、常に独自の色をペイントしなければならないブラシ(レインボーマーカー)にのみ使用します。
  • プレビューとサムネイルは、描画される背景に基づいて独自の色を選択します(ブラシが読み取れるデフォルトがある場合はその色、そうでない場合は媒体に適した色)。プレビューを表示するためだけにブラシにデフォルトを設定しないでください。ブラシを選択すると、そのデフォルトがユーザーの色になります。
  • スタンプチップは、ステッカーの形状をペイントカラーでペイントします。ステッカーの独自の色を保持するには、代わりに marks オブジェクトを使用します。
  • イメージチップ:画像をマークに合わせてクロップし、透明またはプレーンな背景を付けます。これにより、ダブがマークそのものになり、そのボックスではなくなります。連続マークの場合は間隔0.2~0.4、個別のプリントの場合は1以上に設定します。angleJitter、flip、scatter を追加して、同じ画像が視覚的に繰り返さないようにします。
  • グレイン:texturised グレイン(デフォルト)は、ストロークが明らかにするテクスチャ(紙のようなもの)です。moving グレインはチップに属し、それと共に回転します(スポンジ、ローラー)。デプス0.4~0.7はテクスチャとして読み取られます。1はピークのみを残します。ツールのテクスチャには tip.grain を、紙のテクスチャには behaviour.grain を使用します。

落とし穴

  • ホストが拒否するファセット。 create_brush はそれを拒否し、update_brush はそれを追加する変更を拒否します(ファセットと修正方法が示されます)。check_brush は、それらのファセットが除去された degraded ブラシを返します。これを出発点として使用します。
  • ホストがそのすべてをペイントできない環境でブラシを調整する。 update_brush は、ブラシが他のホスト用に既に持っているものを保持します(キャンバスから変更されたペイントブラシのライト)。kept にリストされます。除去されません。このホスト専用のコピーを作成するには、check_brush の degraded ブラシから create_brush を実行します。
  • ID。 組み込みIDは再利用または変更できません。使用中のIDは拒否されます(代わりに更新します)。
  • スタンプ。 任意のマークは、find_stickers からの任意のステッカー参照、またはエディタースタンプ(editor:star…)を取ることができます。ホストのステッカーライブラリがロードできない参照は、最も近い参照と共に拒否されます。ペイントエディタのみがスタンプチップとスキャッターマークをレンダリングします。キャンバス、ベクター、画像エディタはそれらを拒否します(check_brush がそのように報告します)。
  • 画像ソース。 ライブラリにない source:<id> は、最も近いIDと共に拒否されます。最初に追加してください。ソースの画像を置き換える(overwrite)と、そのソースを参照するすべてのブラシが変更されますが、既に描画されたストロークは変更されません。オブジェクトマークはステッカーのみを受け入れるため、画像ソースはそこで削除されます(problems がそのように報告します)。ブラシパックは多くの場合、個人使用のみライセンスされています。ソースと共に licence テキストを保持してください。
  • ブラシパック。 チップ(およびProcreateのグレイン)のみがインポートされます。ダイナミクス、鉛筆カーブ、パターン、デュアルブラシ、ウェット設定は unsupported にリストされるため、インポートされたブラシはデフォルトのフィールでペイントされます。調整してください。インポートされたイメージチップはスタンプチップであるため、キャンバス、ベクター、画像エディタはそれらをペイントできません(renderable は false)。パックは多くの場合、個人使用のみです。licence を渡して保持してください。チェックせずにインポートされたブラシのライブラリファイルを再配布しないでください。
  • 範囲外の値 はスキーマによって拒否されます(tip.size は1~2500px)。保存されたブラシはインポート時にクランプされ、problems に報告されます。
  • ペイントエディタはこのライブラリからペイントします。 その set_brush はここでIDによってブラシを選択し、保存せずにファセットを適用します。create_brush / update_brush はブラシを保存します。ペイントホストは、独自のプレビュー(createPaintBrushLibraryToolProvider)でこれらのツールを登録するため、ペイントエディタには独自のリスト、保存、エクスポート、インポート、サムネイルツールはありません。

ワークフロースキル

  • pixerate-brushes-design:説明文(「柔らかいピンクの蛍光ペン」、「キャンバス用のチョーク」)から、保存されチェック済みのブラシを作成します。

ツールリファレンス

ツール使用法
list_brush_presetsこのホストがレンダリングするブラシを検索します:kind、medium、variety、tool、tag、text、source(all、builtin、user)、all、offset、limit。brushes(id、name、builtin、kind、medium、variety or tool、category、engine、tip、size、marks、surface、light)と total を返します。最初に呼び出します。
describe_brushid で1つのブラシを取得します:その完全なファセット brush(colour:default、palette、own を含む)、builtin、engine、category、およびこのホスト用の check(スタンプステッカーを含む)。不明なIDは最も近いIDと共に拒否されます。
create_brush新しいブラシを保存します:id、name、オプションの basedOn、およびファセット(colour を含む。エディタの現在のブラシを保持するには、その get_brush が返す brush を渡します)。このホスト(およびスタンプチップのステッカーライブラリ)用に正規化されチェックされます。拒否されたブラシは何も保存しません。id、brush、engine、problems、warnings を返します。
update_brushブラシを更新します:id と変更するファセット(完全な値か、unset として削除)。changed(変更されたリーフパス)を返します。組み込みプリセットは拒否されます(最初に duplicate_brush)。
duplicate_brushid でブラシを複製し、新しい id とオプションの name を指定します。id、brush、engine を返します。
remove_brushid でブラシを削除します。組み込みは拒否されます。
check_brushid または brush オブジェクト、およびオプションの host に対してチェックを実行します。host の errors(描写されない部分)、warnings(無視される部分)、degraded(エラーなしでペイント可能な状態にストリップされたブラシ)を返します。
preview_brushホストがレンダラーを持っている場合、id に対してブラシダブプレビュー画像(base64)を生成します。ペイントエディタは画像を返します。他のホストは拒否し、代わりに paint_stroke を提案します。
export_brushesids のリストのライブラリファイル(base64)と source を含む url を返します。
import_brushesライブラリファイル(base64)から brushes(これらのホストの renderable 付き)を追加します。各ブラシの licence を返します。
import_brush_packPhotoshop .abr または Procreate .brush / .brushset ファイル(base64)を fileName と licence と共にインポートします。brushes(id、name、this host renderable)、unsupported(マッピングされなかった Procreate 設定)、licence を返します。
add_brush_sourcechannel(auto、alpha、dark、light)が抽出する.png image(base64)から画像ソースを追加します。licence、既存の overwrite、オプションの name。id、name、size、licence を返します。
list_brush_sourcesすべての画像ソースをリストします。id、name、size、licence、usedBy(brushName の配列)を返します。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Pixerate/pixerate-animation-editor

How to author and edit vector animations (motion graphics, logo reveals, animated icons, explainer scenes, UI micro-interactions) in the Pixerate animation editor through its agent tools - artwork SVG with ids, shots of commands (enter, exit, draw, move, rotate, scale, fade, morph, Smart Animate match, follow a path, pulse, shake, wiggle), easing and springs, stagger, camera, beat and voiceover cues, drivers, reusable clips, checking, rendering frames and contact sheets, and exporting to Flair or Lottie. Use when animation tools such as get_animation, insert_shots or edit_animation are available, or when asked to animate, time, ease, stagger or export vector motion, and provider motion and vector effects (for example Flair) applied to nodes.

Pixerate/pixerate-canvas

How to build and edit a Pixerate design canvas or node graph through its agent tools - drawing freehand pen, highlighter and dry-brush strokes (canvas.drawFreehand), annotating with hand-drawn circles, underlines, arrows, brackets, strikes, crosses and ticks (canvas.circle, canvas.arrow), adding, connecting, updating and laying out nodes (canvas_add_node, canvas_layout), reading state with get_editor_state and looking at it with view_editor, reusable components with variants, instances and overrides (create_component, add_variant, set_instance_properties), align, distribute, lock and layer order, shape boolean operations (unite, subtract, offset path, outline stroke), auto layout frames, and keyframe animation with easing and CSS export. Use when working on a canvas, whiteboard, flow chart, node graph, frame, design system, component library, button variants, layout, alignment, z-order or a canvas animation in a Pixerate editor.

Pixerate/pixerate-vector

How to draw and edit vector artwork in the Pixerate vector editor through its vector.* commands - adding shapes and SVG paths, text (point, area, on a path, styles, Create Outlines), symbols and instances, CAD constraints, artboards and frames with resizing constraints, connectors, stacked fills and strokes with blend modes, brushstrokes with brush character and paper grain, drop shadows, glows and blurs, clipping and opacity masks, gradients (linear, radial, conic, mesh, freeform), stroke alignment, arrowheads, variable-width and tapered strokes, live corner radii, boolean operations and Pathfinder (unite, subtract, divide, trim), Shape Builder, paint bucket, path effects (trim, repeater, zig zag, offset), envelope warps and free distort, blends and morphing, anchor editing (join, smooth, simplify, knife, eraser), align, distribute, group, and SVG import and export. Use when creating an icon, logo, illustration, glyph, badge or Bezier path artwork, or editing an SVG in a Pixerate vector editor.

Pixerate/pixerate-video-editor

How to edit video projects in the Pixerate non-linear video editor through its agent tools - adding video, audio and image assets, building a rough cut on video and audio tracks, inserting, overwriting, moving, trimming, splitting and ripple-deleting clips, slip, slide and roll edits, lift and extract of a time range, razor cuts across tracks, sync-locked tracks, keyframed opacity, volume and transform, closing gaps, titles and colour clips, fades, volume and speed, crossfade, dip and wipe transitions with handles, J and L cuts, markers, checking the project, adjustment clips over tracks, clip masks, skin-tone protected LUTs, edit plans proposed for review before they apply, provider effects (clip effects, effect clips, effect transitions), rendering frames and contact sheets, and exporting an ffmpeg command or a CMX 3600 EDL. Use when video tools such as get_video_project, add_video_clip or edit_video are available, or when asked to cut, trim, assemble, sequence or export footage on a timeline.

関連スキル