illustration-framed-panel

イラスト：額縁付きパネル

パステルカラーのカードに描かれた、紫色の「窓」の中で仕事をする漫画風の人物です。パネルがシーンに舞台を与え、縁からはみ出すUIの吹き出しや茂みによって、枠に閉じ込められた印象ではなく、生き生きとした雰囲気になっています。サポート、ライブ配信、デザイン作業、オンボーディングなど、親しみやすいプロダクトやチームの場面にお使いください。

境界：枠のない真っ白な背景に、インクで縁取られた大きな頭の人物を描く場合は、illustration-outlined-cartoonをお使いください。輪郭線のない平面的な図形と、浮かぶ紙吹雪を描く場合は、illustration-flatをお使いください。人物を含まない単体のオブジェクトの場合は、illustration-teal-spotをお使いください。

14種類のスタイルで制作された42枚のオリジナルのデザイン・コーディングカードから抽出しました。examples/にある3枚のカードは、このスタイルで公開されているカードです。

一文で表すスタイル

パステルカラーのカードの上に、細いネイビーの枠が付いた固定の紫色のパネルが配置され、その内側には輪郭線のある雲とラベンダー色の破線の床があり、シーンの白い吹き出し、UIカード、葉がパネルの縁を越えて広がっています。

パレット

サンプルから測定した色です。各カードでネイビーの線、パネルの色、吹き出しの色を使用し、カードごとに淡い色を1つ選びます。

役割	HEX	使用箇所
カード：ピーチ／オーキッド／スカイシアン	#F7D8B5 / #DFA5D4 / #A7E0ED	カード全体の塗りつぶし。カードごとに1色
括弧と外側のマーク	#9C878C / #A3739B / #6E9FAD	対応する淡色に合わせた括弧
ネイビーの線	#2E2A5C	すべての輪郭線、雲、ハッチング、目、太字のUIテキスト
パネル	#8A80EA	パネルの塗りつぶし（スライダー、スウォッチなどのUIアクセントにも使用）
床の帯／床の破線	#D0CCF4 / #8F88D6	y 256～312の床の長方形、その上の短い破線
接地影	#B5AEEA	足、椅子、ビーズクッションの下の平らな楕円
茂み	#BACCA6、前景レイヤーは #A9C094	床のライン上の波形の茂み
髪／髪のハイライト	#433D71 / #7C74C4	すべての髪、ハイライトの線、濃色の布地のひだ
肌（3色）	#EDB0A2、#F0BFA4、#D49A80	顔、首、手
頬紅	不透明度0.5～0.6の #E8878A（#D49A80 の肌には、不透明度0.55の #C46A5C）	頬の楕円、舌の線
口	#9A3E52（褐色の肌には #8A3A48）	口を開けた笑顔
トップス	マスタード #EDB24F（袖口 #E0A23E）、ミント #95D1B3（影 #79BC9C）、オレンジ #EE8A6E（影 #D9735A）	セーター、パーカー、カーディガン
ズボン	#6A63B0（ひだ #A29DDA）、#4A4488（ひだ #7C74C4）	ジーンズ
クリーム／白	#FCF6EA、#FCFAF3 / #FFFFFF	Tシャツ、靴下、靴のアッパー、コードウィンドウ／吹き出し、UIカード
赤のアクセント／その影	#E35D5B / #B8434A	靴底、タグ、ボタン、ハート、エラー
淡い赤、ピンク	#E9A3A0、#F8CCC8、#F4E0E8、#F29CA0	二次的なUIライン、エラー行、ドロップスロット、コードトークン
緑／濃い緑／淡い緑	#5FA77A / #3E8E5E / #CDEBD6	チェックバッジ、トグル、成功行
ミント、セージ	#8FD0B0、#6FB585、#79C2A8	アイコンチップ、画像プレースホルダー、アバターのシャツ
黄色、オレンジ	#EDB24F、#F09A5E	スウォッチ、イヤリング、強調表示されたコード
UIのグレー	線は #BDB8D6、濃い線は #6E6A8E / #7D79A0、浮き上がった影は #C9C5DE、行番号は #CFCBE0	吹き出し内のテキストプレースホルダー
デバイス	本体 #C9C7DA、縁 #9F9CB8 / #B7B5CC / #A9A7C0、キーボード #DCDAE8、キー #A9A6C2、画面 #3A3570、アクティブ行 #524C98、濃色背景上のコード #6E68AA、#E8E6F8、#BDB8F0	ノートパソコン、モニター
家具	#C9C5E8 + 継ぎ目 #A9A4D8、#B9B4DE、グリッド #D8D3F0、机の天板 #F6E7D2 / 縁 #E3B98E、ランプの光 #FFF4D6	椅子、引き出し、ボード、机
個別の小物の色合い	例：プラム #B2679E（Supportのビーズクッション）	カードごとに、大きな小物1つには独自の落ち着いた色合いを使用できます。使用するとlintでWARNが表示されます
アバター	背景 #FBE3CC、肌 #F1B9A2、ジンジャーヘア #D9774E	吹き出し内の小さな顔

• グラデーション、フィルター、パターンは使用しません。不透明度を設定できるのは頬紅の楕円（0.5～0.6）とメガネのレンズ（fill-opacity 0.18）のみです。
• パネルの紫を、紫のトップスや紫のズボンの背後に置く場合は、間に必ずネイビーの輪郭線を入れてください。人物とパネルは明度差で区別できる必要があります（マスタード、ミント、オレンジ、クリームなら問題ありません）。
• カードの淡色をパネル内で使用してはいけません。また、カードをパネルの紫で塗りつぶしてはいけません。

線と塗り

• アウトラインの色はネイビー #2E2A5C 1色のみとし、常にフラットな塗りの上にストロークを重ねます。線端と線の接合部は丸くします。
• 幅480での線幅：パネルのアウトラインは 1.35、本体・衣服・家具・吹き出しは 1.25、手・靴・茂み・首は 1.05–1.15、雲と床の線は 1.2、折り目の曲線は 0.9–1.1、ハッチングのペアと耳の内側は 0.85–0.9、指の境目は 0.75–0.8、コーナーブラケットはブラケットの色で 1.25。
• テクスチャはフィルターを使わず、描画します。短い平行線のペア（各3–4の長さで、2本目は右に1、下に5ずらし、右上がり、ネイビー0.9）を衣服ごとに2–4ペア散らし、少し長めの折り目の曲線を数本加えます。濃い色のズボンと髪には、明るい色合い（#A29DDA、#7C74C4）で1.0–1.2の折り目とハイライトを入れます。
• 影はアウトラインのない濃い色のフラットな塗りとし、形状の片側に沿って内側に配置します（#EE8A6Eのパーカーの内側のパネルは#D9735A、ミント色のセーターのカフスは#79BC9C）。
• 浮き上がったUIパーツ（ボタン、トグル、タグ、チップ）には、3 px真下に濃い色の複製を配置します（赤の下には#B8434A、緑の下には#3E8E5E、白の下には#C9C5DE）。
• 白い吹き出しとカードにはすべて、上部の角から5–7 px内側に、短い内側のコーナー目印（Qカーブ、1.0）を1つ入れます。「手描き風」の仕上がりになります。
• テキスト：ui-sans-serif, system-ui, sans-serif、ウェイト700–800、10–16 px、ネイビーまたは白。カードあたり最大3語（「修正しました！」、「+1」、「LIVE」、「Aa」）。

キャラクター

• カード1枚につき人物は1人。座るか膝をつかせます。パネル内側の高さは266で、各作例の人物は髪のてっぺんから床まで195～215 pxです。立った大人（頭身で約5.5頭分）は収まりません。しゃがむ、座る、膝をつく、または机に向かう姿勢で一部を切り取ります。
• 頭部： scripts/panel-kit.mjs の face() を使います。3つの作例で顔は同じです。3/4向きで、幅36、高さ46（眉からあごまで）です。変形を適用する前のあごの位置は (232, 166.5) です。手前の目は紺色の楕円（rx 1.8、ry 2.1）に上まぶたの弧と外側に跳ねるまつ毛を加えます。奥の目は小さくします（rx 1.5、ry 1.9）。眉はアーチ状で線幅1.2です。顔の奥側にフック状の鼻を1本描きます。口は #9A3E52 で塗り、舌をピンクの線で描いた開いた笑顔にします。手前の目の下に7.6 × 4.2の楕円の頬紅、奥側の頬の端に小さな頬紅を加えます。耳には内側の曲線を1本、金色のピアスを描きます。
• 頭部の配置： 顔、首、髪をまとめて、1つの <g transform="translate(dx dy) rotate(a 232 166)"> で囲みます。動きの方向に4～8°傾けます。左を向かせるには scale(-1 1) で反転します。頭部は拡大・縮小しないでください。線の太さが変わってしまいます。
• 髪： 紺紫の #433D71 の塊を、線幅1.25で描きます。顔の前に後ろ側の髪を描き、後に前髪または帽子状の部分を描きます。髪の流れに沿って #7C74C4 のハイライトを3～5本（1.1～1.2）、紺色の内側の線を1～2本（0.9～1.0）加えます。作例には、横分け前髪のボブ、シュシュを付けた高い位置のお団子、短い巻き髪があります。
• 胴体： 胴体は幅60～70の柔らかな台形にし、袖は胴体に重なる別々の形として描きます。襟ぐりと裾は、内側に3～4 px入った位置に2本目の線を描きます（リブ編みの裾は、線1本に加えて6～7 px間隔の短い縦線を入れます）。カーディガンにはボタンを2つ（r 1.5）、パーカーには先端に小さな長方形の付いたクリーム色のひも（1.6）を付けます。
• 手： 長さは約22～26 pxで、顔より少し短めです。袖口の帯（袖の陰影色、幅5～6、中央に線を1本、線幅0.8）→肌色の前腕→手首→手のひら→短い内側の曲線（線幅0.75～1.0）で分けた指、の順に作ります。輪郭には関節のふくらみを付けます。親指は別の小さな形として描きます。テンプレートは次のとおりです。typeHand()（手の甲を見せる、手を平らに置くかタイピングする形）、pointHand() + pointCuff()（人差し指を伸ばし、ほかの指を曲げ、親指を横切らせる形）、gripHand()（右手の甲を手前に向け、柄を握る拳。親指は柄の上端の作業側にかぶせる形）、kneeHand()（右向きに座った人物の奥側の腕で、膝の上に手のひらを下向きに置く形）。配置する前に、左右どちらの手か、手のひらと手の甲のどちらを見せるか、指の向き、親指の側を決めます。references/craft.md の表で確認し、親指を反対側の縁に置くよう表で指定されている場合は、テンプレートを scale(1 -1) で反転します。
• 脚と足： ジーンズは腰から足首に向かって細くし、膝を曲げます。両脚が重なる場合は、奥の脚を濃いジーンズ色 #4A4488（しわは #7C74C4）で描き、手前の脚の #6A63B0 より後ろに配置します。裾は線を1本だけ引きます。靴下または素足の足首を2～3 px見せます。白いスニーカーには赤い靴底（厚さ3 px）の sneaker() を使い、膝をつくポーズにはつま先をしまった靴の tuckedShoe() を使います。靴は必ず床の帯または足置きに接するようにし、その下に接地を示す楕円を描きます。
• うまくいくポーズ： ビーズクッションであぐらをかき、体を腰を中心に−5°回転させてノートパソコンにもたれかかる。片膝をつき、ボードのボタンを押す。椅子に座ってモニターを指しながら、見る人を振り返る。それぞれ、前傾、ひねり、または曲げた膝を取り入れます。

装飾と小道具

• パネル内： 雲の落書きを2つ（大きいものは約50幅、中くらいのものは約44幅で、それぞれ右側に3ピクセルの破線を付けます）。任意で小さいもの（約17幅）を1つ追加できます。さらに、短い弧の目盛りを2～4個（約9幅）加えます。すべて輪郭線のみとし、空の領域に配置して、頭の後ろには置かないでください。壁の小道具は最大1つ（コードウィンドウ、リングライト、グリッドボード）です。
• 床： y 256～312の帯。256の位置に紺色の線を引き、上部の隅と下端付近に6～7本の破線を配置します（長さは10～26ピクセル。一部は5ピクセルの間隔を空けて、後ろに4ピクセルの破線を付けます）。
• 茂み： 1～2個を下隅に配置し、床の線に接するようにします。少なくとも1つはパネルの側辺をまたがせます。
• はみ出し要素： フレームをまたぐ白い UI 要素（吹き出し、UI カード、書体見本）をちょうど2つ配置します。1つは左上で左辺をまたぐように（x 約62～166、y 58～134）、もう1つは右側で右辺をまたぐようにします（x 約336～436、y 150～250）。任意で、左上隅をまたぐ小さな赤いタグを3つ目として追加できます。それぞれにアイコンまたはアバターと、2～4行のテキストを配置します。段落は入れないでください。
• パネルの外側： 2つの隅括弧（右上と左下。座標は固定）と、2～3個の括弧状のマークを配置します。一方の辺の横に二重弧、もう一方の辺の横に単弧を置き、括弧と同じ色にします。はみ出し要素の横には、紺色のきらめきの目盛り（短い放射状の線を3本描く ticks()）を0～2個配置できます。
• 禁止事項： 紙吹雪、星、グラデーション、ドロップシャドウ、2人目の人物、紺色以外のフレーム、括弧とマーク以外のカード余白の装飾。

構図

• カード：全面塗りつぶしの正方形の矩形。rx は付けません。パネル：x 110 y 46 w 262 h 266（幅の55％、高さの74％）、塗りつぶしは #8A80EA、紺色の輪郭線は1.35。すべてのカードで同じにします。
• 描画順：カード → 括弧とマーク → パネルの塗りつぶし → 雲 → 壁の小道具 → 床の帯、線、破線 → パネル内に完全に収まる小道具 → パネルの輪郭線 → 辺をまたぐ茂み → 家具と人物 → はみ出し吹き出しとカード → きらめきの目盛り。フレームをまたぐものはすべて輪郭線の後に描き、その上に重なるようにします。
• 人物の中心線は x 205～235に置き、パネルの中心（241）より少し左にします。右側の小道具に向かせます。頭はパネルの上半分に配置し、髪の上に空を30～60ピクセル残します。
• 重心：左のはみ出し要素は高い位置、右のはみ出し要素は中ほどの高さ、茂みは隅の低い位置に置き、人物以外の3つのまとまりが緩やかな対角線をなすようにします。
• はみ出し要素はフレームから40～65ピクセル突き出すようにします（実測値：例では44～64）。カードが端から10～20ピクセルだけはみ出していると、飛び出しているのではなく、配置がずれているように見えます。
• 下半分には、幅120～200ピクセルの家具を1つ配置します（ビーズクッション、机、コンポーネントボード、または椅子とサイドテーブルの組み合わせ）。人物が細いスツールに座っているだけだと、右側のはみ出し要素の下に紫色の空白ができます。
• 余白：すべて x 40～450、y 30～325の範囲内に収めます。

テクニック

scripts/panel-kit.mjs には、依存関係なしで決定論的に動作する、サンプルから取り出した繰り返し要素がすべてまとめられています。まずフレームを生成し、その間に図や小道具を手描きします。node scripts/panel-kit.mjs demo "$WORK/kit.svg" を実行すると、使用前にすべての要素を確認できるよう、1 枚のカードに描画されます。

1. フレーム。 scaffold({ prefix, bg, label, clouds, wall, inside, front }) は、上記の順序でレイヤーを重ねたカード全体を返します。cloud(x, y, 'big'|'mid'|'small'|'tick') と bush(x, 'big'|'mid'|'small', { mirror }) で落書きを配置し、floorShadow(cx, cy, rx) で床に接地した楕円を描きます。

   node scripts/panel-kit.mjs scaffold "$WORK/card.svg" --bg orchid --prefix xx- --label "Card Name"
   

2. 吹き出し。 bubble({ x, y, w, h, tail: 'down'|'left'|'right', at }) は、角の目印が付いた白い吹き出し（角丸半径 8、尾の長さ 11 px）を描画します。<g stroke="#2E2A5C" stroke-width="1.25"> で囲んでください。raised(x, y, w, h, rx, face, under) と textLine(x, y, len, colour) で塗りつぶします。
3. 頭部と靴。 face({ skin, blush, blushOpacity, mouth, earring, smile }) と neck(skin) はテンプレート座標で使用します。sneaker(x, y, { mirror }) と tuckedShoe(bx, by) も使用できます。
4. 質感。 hatch(x, y) は、斜線を 2 本返します。<path d="${hatch(186, 214)} ${hatch(214, 196)}" stroke="#2E2A5C" stroke-width="0.9" fill="none" stroke-linecap="round"/>。
5. 物を持つ場合。 先に持ち物を描き、その上に gripHand() を重ねます。こうすると、曲げた指と親指が持ち手に重なります。指が前腕に沿うように握りこぶしを回転させ、手首の曲がりを表すため、持ち手を親指の軸から最大 45° 傾けます。レンズや画面越しに背後のものを拡大して見せるには、レンズの中心を基準に 1.6 倍に拡大した状態で、その内容をレンズの clipPath 内に再描画します。次に、fill-opacity 0.18 の白いガラスと、短い白い反射線を 2 本重ねます。縁には明るい金属色 #C9C7DA を使用します。
6. トレースしたパスの移動。 xf(d, { ox, oy, tx, ty, s, sx, sy }) は、ストローク幅を正確に保ったままパスデータを移動、拡大縮小、反転します。輪郭線のある要素には transform="scale()" を使わず、こちらを使用してください。

失敗しやすいポイント

• 親指のないタイピング中の手。 両方の審査員が、Supportカードの最初のタイピング中の手を問題として挙げました。どの手も親指が見えているか、手のひらの後ろに親指がはっきり隠れる向きにします。親指の見え方を確認してください。
• 親指の向きが逆。 あるデザイナーは、このためセット全体の手の案を却下しました。描く前に、手ごとに左右、手のひら側か手の甲側か、指の向きを書き出してください。
• 柔らかい座面で背筋を伸ばしている。 「ビーズクッションに沈まず、背筋を伸ばして座る」のではなく、胴体を作業のほうへ5°傾け、腰をクッションの縁より下げ、腰の周りのクッションの輪郭をへこませます。
• 線がきれいすぎる。 審査員は「パックのラフな線より、きれいで均一すぎる」と評しました。幅に変化をつけ（記載のとおり0.75～1.35）、吹き出しの角の短い線、ハッチングのペア、縫い目の短い線を加えてください。
• 落書きではなくUIキットになっている。 ミニインターフェースを丸ごと描いたブレイクアウトは、UIキットのように見えます。それぞれ、アイコン、アバター、大きなグリフのいずれかと、プレースホルダーの線を2～4本にとどめてください。
• 吹き出しが多すぎる。 Live Codingの初期案では、左側にハートの吹き出しと「+1」の吹き出しが並んでいました。採用されたカード（評価9）では「+1 ♥」の吹き出し1つにまとめ、下の左右の角にそれぞれ茂みを置いてバランスを取っています。
• 小道具が床にぽつんとあり、散らかって見える。 Live Codingでは、机の横にあったPCタワーを削除しました。床には、人物が使う家具と茂みだけを置いてください。
• 脚の交差が単純化されている。 Supportカードの交差した脚と靴下は単純化されていると指摘されました。奥の足を手前の膝の下に入れ、手前のすねを前に交差させ、靴下の履き口と手前の足の裏を見せてください。
• 人物がパネルに溶け込んでいる。 紫のパネルに紫の服ではシルエットが埋もれます。人物にはマスタード、ミント、オレンジ、クリーム色の服を着せ、床の帯が明るい色の場合は、濃い色のズボンが床の線より下に出るようにしてください。
• 足が浮いている。 靴には接地用の楕円 #B5AEEA を付け、床の帯のy 295～304に置くか、足置きに乗っていることがはっきり分かるようにしてください。
• 足がスツールの足掛けに届こうとしている。 座面の約35 px下に足掛けがあるスツールでは、膝が前に出すぎていて足が届きません。そこに奥の脚を折り込んで描くと、すねが靴のつま先に突き刺さったように見えました。両足を床につけてください。奥のすねは手前の太ももの下から下ろし、靴は手前の靴の後ろに入れ、靴底を約3 px高くします。足掛けは正確な楕円として描いてください（2つの三次ベジェ曲線で半分ずつ描き、点でつながる二次ベジェ曲線2つは使いません）。奥側の半分を支柱より先に、手前側の半分を支柱より後に描きます。
• 暗いレンズがフライパンに見える。 セルフテストの最初の拡大鏡は、縁が髪の毛のように細い濃紺で、ガラス部分がグレーでした。明るい #C9C7DA の縁にし、その下にカードを拡大して見せると、すぐに拡大鏡だと分かるようになりました。
• グリフが数字に見える。 10 pxの開いたフック状の引用符は「66」に見えます（セルフテスト）。引用符は塗りつぶした涙滴を2つ描き、小さなグリフはすべて1xで確認してください。
• 取っ手が握りこぶしの上に貼り付いたように見える。 手の後に取っ手を描くと、指の上に重なり、握り部分がシールのように見えます。先に取っ手を描き、その上に指と親指を重ねてください。

例

• examples/support.svg：サポート（ピーチ）。プラム色のビーズクッションにあぐらをかいて座り、膝の上のノートパソコンを前かがみになって入力しています。ユーザーの質問の吹き出しが左に飛び出し、「修正しました！」という返信が右に飛び出しています。パネルの壁には、バグのある行と修正済みの行があるコードウィンドウが掛かっています。入力する手、あぐらをかいた脚、クッションの沈み込み、脱ぎ捨てたスニーカーを描いています。
• examples/design-system.svg：デザインシステム（オーキッド）。片膝をつき、コンポーネントのグリッドボード（色見本、トグル、スライダー、アバターチップ）にある点線のスロットへ赤いボタンを押し込んでいます。ハンドルとカーソルが付いた選択中のコンポーネントカードが左上に飛び出し、「Aa」の文字カードが右に飛び出しています。膝をついた脚、つま先を折り込んだ靴、両手で押す様子、浮き上がったUIパーツを描いています。
• examples/live-coding.svg：ライブコーディング（スカイシアン）。回転椅子に座って机に向かい、モニターのコードを指さしながら、こちらを見て笑っています。ブームアーム付きマイク、リングライト、マグカップがあります。赤いLIVEタグが左上の角にかかり、「+1 ♥」のチャット吹き出しが左に、コードスニペットの吹き出しが右に飛び出しています。指さす手、鏡映しのようなメガネをかけた頭、ひも付きのパーカー、机の引き出しを描いています。

ワークフロー

このスキルのフォルダーからコマンドを実行します。WORK は任意のパスにある自分の作業フォルダーです。カードは $WORK/card.svg に作成し、IDの接頭辞は xx- にします。

1. 概要。 題材の名前を決め、次の項目をそれぞれ1行で書きます：人物の動作（動詞＋目的語）、ポーズ（座る、膝をつく、しゃがむ）、壁の小物、2つの飛び出す要素とそれぞれの文言、カードのパステルカラー。
2. まずポーズと手を決める。 紙またはコメント上で、人物を箱形にスケッチします：腰の位置、膝、床の帯に接する足、肩の線、それぞれの手の位置。各手について、references/craft.md を参照し、左手か右手か、手のひらか手の甲か、指の向き、親指側を書き留めます。
3. 下地の作成： mkdir -p "$WORK" && cp scripts/panel-kit.mjs "$WORK/" && node scripts/panel-kit.mjs scaffold "$WORK/card.svg" --bg peach --prefix xx- --label "Card Name"。空のフレーム以外も作成する場合は、$WORK に小さなジェネレーターを書き、./panel-kit.mjs をインポートして、自分の人物を指定した scaffold({ ..., front }) を呼び出します。
4. 家具、胴体、脚、頭（face() を使用）を大まかに配置し、レンダリングして、細部を加える前にシルエットと前傾具合を1倍で確認します。
5. 服、手、髪、小物、飛び出す要素を描きます。 その後、折り目、ハッチングのペア、角の目印を加えます。
6. レンダリング（ヘッドレス、2倍）：node scripts/render.mjs "$WORK/card.svg" "$WORK/card.png"
7. 例と並べたシートを作成： node scripts/render.mjs --sheet "$WORK/sheet.png" examples/*.svg "$WORK/card.svg"。「同じ手、同じセットか？」を確認します：フレーム、線の太さ、飛び出す部分の量、顔。
8. 手、顔、足、接触部分をすべて5～8倍に拡大し、ベクターから再レンダリングします：node scripts/render.mjs "$WORK/card.svg" "$WORK/hand.png" --zoom x,y,w,h --scale 8。使い捨てのコピーで、references/craft.md にある親指の確認を行います。
9. references/craft.md の5つの基準に照らして批評し、修正して繰り返します。4回以上の反復を想定してください。
10. Lint： node scripts/lint.mjs "$WORK/card.svg" --prefix xx- --palette style.json。すべてのERRORを修正します。各WARNは、意図的な色合いである必要があります。

確認

• カードは全面に広がるパステルカラーの長方形（ピーチ、オーキッド、またはスカイシアン）で、rx はありません。
• パネルは正確に 110, 46, 262 × 266 に配置され、塗りは #8A80EA、ネイビーのアウトラインは 1.35 です。内側の小道具を描画した後、はみ出す要素を描画する前に描画します。
• カードのブラケット色で、右上と左下にコーナーブラケットを配置し、左右の外側に二重と単一の括弧マークを付けます。
• パネル内には、尾のダッシュ付きの輪郭雲を 2 つ、細い弧のティックを 2～4 個配置します。空には塗りつぶしを置きません。
• 床の帯は y 256～312 に配置し、ネイビーの線と 6～7 個のダッシュを付けます。すべての足と椅子の脚を床の帯に接地させ、接地楕円を付けます。
• 左右のフレーム端をまたぐ白いはみ出し要素は正確に 2 つで、それぞれにコーナーティックを付けます。茂みを少なくとも 1 つ、側端をまたいで配置します。
• すべてのアウトラインはネイビー #2E2A5C とし、線幅は指定された範囲内にします（意図的な UI バーを除き、1.35 を超えないこと）。
• 顔には共通テンプレート（目のサイズ、まつ毛の跳ね、フック型の鼻、頬の赤み）を使い、配置には translate と rotate のみを使います。
• すべての手にカフの帯を付け、手首を手のひらより細くし、指を分け、利き手の表に指定された側に親指を配置します。
• ポーズには前傾、ひねり、または曲げた膝を取り入れます。座面または床が体重を支えていることが視覚的に分かるようにします。
• 衣服ごとにハッチングのペアを 2～4 組入れ、髪にハイライトの線を加え、少なくとも 1 つのフラットな陰影パネルまたは濃い色のカフを付けます。
• テキストは 3 語以下で、ウェイトは 700～800、色はネイビーまたは白にします。
• lint.mjs --palette style.json が通ること。WARN がある場合は、意図して選んだ色合いであること。