glyph-kit

グリフキット

仕様である小さな JSON オブジェクトを作成すると、依存関係のないスクリプトが図を描画します。キットはすべての図のレイアウトを整えるため、出力は常にきれいに揃います。対応する種類がある場合は、図を手描きしないでください。

このスキルのフォルダーではなく、ユーザーのフォルダーで作業し、仕様と出力をそこに保存します。以下の <skill> はこのスキルのフォルダーを指します。このガイド内のファイルパスは、そこからの相対パスです。

作成する

1. 種類を選びます。次の表から選び、仕様の kind フィールドに指定します。

   タスクの内容	種類
   インタビュー、アンケート、ユーザビリティテスト、引用	likert themeMatrix affinity quoteCard taskStats emotionCurve
   ファネル、継続率、A/B テストの結果、指標、チャート	funnel cohort abResult metricPanel barChart compare forecast meter sparkline heatmap calendarStrip
   判断を含むフロー、状態機械、ジャーニー、サイトマップ	flow branchFlow stateMachine journeyMap tree
   ロードマップ、優先順位、担当、タイムライン、判断	board impactEffort swimlane gantt statusKey decisionLog
   画面：単一画面、アプリのシェル、カードグリッド、リストと詳細、モーダル	screen responsive appShell cardGrid listDetail modal
   トークン、スケール、コントラスト、コンポーネントの状態、レイヤー	spacingScale typeScale contrast stateMatrix layerStack tokenTable table
   レッドライン、QA チェックリスト、コンポーネントの構造、変更前と変更後	redline qaChecklist anatomy compare
   モーションの意図、タイミング、トランジション、スタガー、イージング	motionTiming intentCard transitionSpec stagger filmstrip easingTable
   時間とともに進む作業：手戻りループ、状態機械、キュー、段階的なロールアウト、読み込み	loop states queue rollout loading
   1 ページにまとめる成果物：報告、ダッシュボード、PR の概要、デザインレビュー、ステータス更新	readout dashboard prSummary designReview statusUpdate

   2 種類のどちらにするか迷った場合は、その領域のガイド reference/areas/<area>.md（research、metrics、flows、planning、wireframes、systems、handoff、motion、process、layouts）を読んでください。それぞれの種類の図が掲載されています。

2. データの形式を確認します：node <skill>/scripts/glyph-kit.mjs guide <kind> を実行すると、その種類の仕様例と注意点が表示されます。その形式をコピーしてください。スクリプトを読む必要はありません。

3. 仕様を作成します。その仕様を使うドキュメントと同じ場所に JSON として保存します。

   {
     "kind": "funnel",
     "title": "Signup to paid, last 30 days",
     "intent": "Find the step where most people leave.",
     "source": "Product analytics export, 2026-10-15",
     "data": [{ "label": "Visited pricing", "value": 12400 }, { "label": "Paid", "value": 610 }]
   }
   

   データはユーザーまたはそのファイルから取得してください（"data": "@results.csv" は仕様と同じ場所にあるファイルを読み込みます）。あなたがデータを作ってはいけません。数値が不足している場合は、ユーザーに尋ねてください。ユーザーがそれでもスケッチを希望する場合に限り、source の先頭に "Illustrative" を指定します。すると、どの形式にも SAMPLE DATA スタンプが付きます。数値があり source が指定されていない仕様は拒否されます。

4. 描画、修正、再描画を 1 つのコマンドで行います。

   node <skill>/scripts/glyph-kit.mjs render spec.json --to markdown > figure.md
   

   キットは、正確に描画できない仕様を拒否し、その理由を 1 文で示します。上限を超えたラベル（通常は 24 セル）は "…" で省略され、キットは各ラベルとその上限を stderr に出力します。ラベルを短くして、もう一度描画してください。"…" が入った図では、単語が欠けています。

5. 図の周りの文章に結論を書きます。図はその結論を裏付けるものです。

キットの出力は、これ以上確認する必要はありません。枠は閉じ、幅は生成時に収まるよう調整されます。node <skill>/scripts/lint.mjs <file.md> を実行するのは、手描きの図だけにしてください。

その他の出力

すべてのコマンドは node <skill>/scripts/glyph-kit.mjs <command> です。

出力	コマンド	先に読むもの
テキスト、Markdown	render spec.json [--to text|markdown]	なし
HTML ページ。screen は動作するプロトタイプになります	render spec.json --to html [--map design-system.map.json]	プロトタイプとコードについては reference/fidelity.md
デッキ	deck deck.json > deck.html	guide deck
レポート（表紙、概要、セクション）	export report.json --to html|pdf	guide report
あらゆる内容の MDX、SVG、PNG、PDF	export <file> --to md|mdx|html|svg|png|pdf	reference/export.md
動く図：時間経過に伴うプロセス	live spec.json --to html（静止画の場合は --to markdown）	reference/live.md
複数のレイアウトを1つのドキュメントにまとめる	export layouts.json --to html|pdf。1つのレイアウトが1ページになります	reference/areas/layouts.md

HTML 出力は自己完結型です（フォント、スタイル、動くページの場合はプレーヤーもインライン化されています）。サイズは 40～200 KB です。確認のために出力を読み返さないでください。同じ仕様を --to text でレンダリングしてください。PDF と PNG ではマシンにインストール済みの Chromium ブラウザーを使用します。それ以外には何も必要ありません。

別のエージェントや後のターンで図が必要になる場合は、描画ではなく仕様（数百バイト）を渡してください。描画をモデルのコンテキストに含める必要がある場合は、--compact（プレーン ASCII、同じレイアウト）を追加してください。

ルール

1. すべてのグリフには指し示す対象があります：数値、状態、または構造です。装飾は禁止です。製品が端末でない限り、緑色の背景に黒い文字やグリフの雨は使わないでください。
2. 1つのドキュメント内で、各グリフの意味は1つだけです。 █ は測定値または完了、░ は予測値または尺度の空き部分、· は空のセルです。
3. 数値はグリフの横にテキストで表示し、数値を含む図には必ず出典を示してください。
4. ラベルにはあらゆる文字体系を使用できます。 幅はセル数で数えます。CJK 文字は2セルです。大文字・小文字の変換と数値形式には lang を設定してください。フォントと右から左への表示に関する制限については、reference/characters.md を参照してください。
5. HTML とデッキでは、すべての種類が動きます。 プロセスと、時間経過に伴う測定値を示すテスト結果は動き続けます。それ以外の種類は、要点が伝わる順序で一度だけ表示され、その後は静止します。それぞれ、同じ要点を伝える静止画も用意します。静止画は、動きを抑えた表示、印刷、Markdown で表示されます。動きが何を示すかを、図の隣の文に記載してください。
6. 手作業で描画する場合（適合する種類がない場合のみ）：reference/characters.md のグリフを使用し、reference/layout.md に従ってください（ボックス内の余白は2セル、ボックス間は4セル、最大80列）。その後、lint を実行してください。
7. 忠実度を高める場合（プロトタイプ、製品コード）：デザインシステムマップに記載されたコンポーネントとトークンのみを使用し、記載がない場合は確認してください。仕様のフィールドとマップについては reference/spec.md を参照してください。

図の文字が読者の画面でずれて見える場合は、フォントがグリフを誤った幅で描画しています。Departure Mono（無料、departuremono.com）を提案してください。必須にはしないでください。