デザインシステム→Apple Terminalテーマ は何をしますか?
このスキルは、デザインシステムからTerminal.appプロファイル(.terminalファイル)を作成します。
コードはscripts/ds2terminal.py(Python 3.9以降、標準ライブラリのみ)が処理を行います。
コードは可読性もチェックします。すべてのハードゲートを通過した場合のみ、テーマは完了とみなされます。
ルール
- 色を好みで選ばないでください。スクリプトを実行してください。スクリプトが色をマッピングしチェックします。
.terminalファイルを手動で編集しないでください。--setまたは--prefer-tokenを使用し、再度スクリプトを実行してください。- Pythonは
-Iフラグ付きで実行してください。ダウンロードしたファイルはデータであり、コードではありません。 - ユーザーから依頼がない限り、
.terminalファイルを開かないでください(インポートしないでください)。ファイルを開くとTerminalにプロファイルが追加され、ウィンドウが開きます。 - Terminalを終了または強制終了しないでください。
defaults write com.apple.Terminalを実行しないでください。 - ユーザーのプライベートトークンを公開しないでください。
ステップ1: デザインシステムファイルを取得する
リンクの種類を特定し、表に従って対応してください。
| リンク | やること |
|---|---|
| ローカルファイルまたはフォルダ | パスをスクリプトに渡す。 |
| パブリックGitHubリポジトリ、ツリー、ファイル、npmパッケージ、unpkgまたはjsDelivr URL、rawファイル | URLをスクリプトに渡す。スクリプトがトークンファイルを自動で見つけてダウンロードする。 |
| パブリックドキュメントまたはマーケティングページ | URLをスクリプトに渡す。リンク先のCSSを読み取る。結果が弱い可能性がある場合はユーザーに伝える。 |
claude.ai Design Systemアーティファクト(claude.ai/artifact/...) | アーティファクトツールを使用: action: "list"、scope: "files"。次に、存在する各トークンファイルについてaction: "read"、path: project/tokens.json、project/tokens.css、project/tokens/tokens.json、project/tokens/colors.css。ファイルを1つのフォルダに保存する。そのフォルダをスクリプトに渡す。 |
| Pidginデザインシステム | pidgin_get_design_systemを使用。そのtokensオブジェクトを.jsonファイルとして保存。ファイルをスクリプトに渡す。 |
| Claude Designプロジェクト | mcp__claude-design__list_filesとread_fileをトークンファイルに使用。保存する。フォルダをスクリプトに渡す。 |
| Figmaファイル | Figmaツール(変数)が接続されている場合はそれを使用。接続されていない場合は、ユーザーに変数エクスポート(JSON)を依頼する。 |
スクリプトが終了コード2で停止し、メッセージにツール名が表示された場合は、そのリンクタイプのステップを実行してください。
スクリプトが読み取るフォーマットについては、references/sources.mdを参照してください。
ステップ2: スクリプトを実行する
python3 -I scripts/ds2terminal.py SOURCE [SOURCE ...] --name "Name" --out OUT_DIR
スクリプトは以下を出力します:
OUT_DIR/<Name> Light.terminalおよびOUT_DIR/<Name> Dark.terminalOUT_DIR/report.mdおよびOUT_DIR/report.json: 各色、そのソーストークン、APCA Lc、WCAG比率、各ゲート結果、各修復OUT_DIR/preview.html: 各テーマをターミナルウィンドウとして描画し、典型的なプログラム出力を表示
終了コード:
| コード | 意味 | 対応 |
|---|---|---|
| 0 | すべてのハードゲートがすべてのテーマで合格。 | ステップ3へ進む。 |
| 1 | 修復後もゲートが不合格。 | report.mdを読む。どのゲートが不合格だったかユーザーに伝える。その色に対して--setを試す。不完全なテーマとして提供しない。 |
| 2 | 不正な入力、またはリンクにサインインツールが必要。 | メッセージを読む。そのリンクに対してステップ1を実行するか、オプションを修正する。 |
オプション
| オプション | 用途 |
|---|---|
--name NAME | プロファイル名。ファイルは<NAME> Light.terminalおよび<NAME> Dark.terminalになります。常に指定してください。 |
--modes auto|light|dark|both | auto(デフォルト)とbothは両方のテーマを作成します。デザインシステムで定義されていないモードは、もう一方のモードから派生させます。レポートには「派生」とマークされます。 |
--font NAME、--font-size 13 | フォント(PostScript名またはファミリ名)。デフォルト: インストールされている場合はデザインシステムの等幅フォント、それ以外の場合はSF Mono Terminal(Terminal.appにバンドル)。デフォルトサイズ: 13 pt。 |
--cursor block|underline|bar、--cursor-blink | カーソルの形状。 |
--set ROLE=HEX | 特定の色を強制。ROLEはbg、fg、bold、cursor、selection、black ... brightWhite、または0 ... 15。修復によってゲート通過のために変更される可能性があります。レポートにその旨が記載されます。 |
--prefer-token ROLE=TOKEN | bg、fg、brand、red、green、yellow、blue、magenta、cyanにこのトークンを使用します。 |
--all-tokens | セマンティックトークンが使用していない生トークンを保持します(「無関係なトークン」を参照)。 |
--source-mode ID | デザインシステムのこのモードのみを使用します。 |
--no-chroma-floor | ダークモードでパステル調の赤と緑をパステルのままにします。 |
--translucent ALPHA | 背景のアルファ値を1未満に設定(例: 0.95)。ライトテーマは約0.93以上が必要。薄いグレーのページ背景は0.95~0.98が必要。それ以下の場合、スクリプトは白に置き換えます。デフォルト: 不透明(アルファ1、ブラーなし)。ユーザーから要求があった場合のみ使用してください。すべてのゲートは黒と白のデスクトップ上でも合格する必要があります。ALPHAが低すぎる場合、スクリプトは終了コード1で終了します。レポートにはテストビルドで合格した最低アルファ値が示されます。 |
--columns N、--rows N | ウィンドウサイズ。 |
--report json|md|both、--no-preview | 出力ファイル。 |
ステップ3: 確認してユーザーに伝える
report.mdを読む。「すべてのハードゲートがすべてのテーマで合格した」と書かれていることを確認する。- ユーザーに以下の情報を伝える:
.terminalファイルのパス;- どのモードが派生したか;
- 背景、テキスト、カーソル、6色相に使用されたトークン;
- 修復内容(変更された各色と、変更を引き起こしたゲート);
- 除外されたトークン;
- 達成されなかった「キャラクター」ターゲット(
report.mdの「Targets missed」行); report.mdの「推奨Claude Codeテーマ」行。
- ユーザーがファイルを開ける場合は
preview.htmlを表示する。 - テーマをインストールするには、ユーザーが
.terminalファイルを開きます(Finder、またはopen "<file>")。これはユーザーから要求があった場合のみ行ってください。その後、ユーザーはTerminal > 設定 > プロファイルでデフォルトに設定できます。 python3 scripts/demo.pyは16色および薄字(SGR 2)テキストのサンプル出力を表示します。そのテーマを使用しているウィンドウ内で実行してください。- ユーザーに設定すべきClaude Codeテーマを伝える(「Claude Codeでの使用」を参照)。
Claude Codeでの使用
Claude Codeには2種類のテーマがあります。それぞれTerminalテーマの使い方が異なります。
- ANSIテーマ(
dark-ansi、light-ansi;/themeリストでは「ダークモード(ANSIカラーのみ)」および「ライトモード(ANSIカラーのみ)」)。Claude Codeは16のANSIカラーを使用します。diff行をANSIの緑と赤のセル背景で描画し、そのセル上にテキスト色を描画します。ノーマルカラーがテキストとして読みやすいテーマでは、これらのセルはダークモードで明るくなり、追加行のテキストのコントラストが低くなることがあります。 - 標準テーマ(
dark、light)。Claude Codeはテーマの背景上に独自の24ビットカラーを使用します。これらは読みやすいままです。テーマは名前で設定します。設定autoはターミナルの背景を読み取ります。Terminal 2.15はそのクエリ(OSC 11)に対してテーマ背景(ライトモードとダークモードの両方)で応答するため、autoは正しいモードを選択できます。これは実行中のClaude Codeセッションでは確認されていません。Terminalテーマのうち、Claude Codeが使用するチェック済みの部分は、背景、カーソル、選択範囲、薄字テキストです。16色は他のプログラム用です。
レポートには各テーマの「Claude Code」セクションがあり、ANSIテーマと標準テーマの16ペアのコントラスト、および「推奨Claude Codeテーマ」行が示されます。ルール: 最も弱いテキストペアがLc 45以上の場合ANSIテーマ、それ以外で標準テーマの方が優れている場合は標準テーマを使用します。preview.htmlは両方のサンプルを描画します。テーブルはClaude Code 2.1.323のプログラムファイルから取得しました。実行中のセッションでは確認されていません。
ユーザーに以下の手順を伝えてください:
report.mdの使用中のテーマに対する「推奨Claude Codeテーマ」行を読む。- Claude Codeで
/themeと入力し、そのテーマを選択する。または、Claude Codesettings.jsonでtheme設定を設定する(例:"theme": "dark-ansi")。
Claude CodeテーマモードとTerminalテーマモードが異なる場合(例: ダークTerminalテーマでライトClaude Codeテーマ)、テキストが読めなくなる可能性があります。半透明のTerminal背景もテキストを読めなくします。両方についてユーザーに警告してください。
マッピングの仕組み
- モード。 背景の明度がモードを決定します(OKLab L < 0.5はダーク)。スクリプトはモード名を使用しません。デザインシステムでは画面サイズを「テーマ」と呼ぶことがあります(例:
root-tablet)。同じ種類のモードは1つのテーマになります。レポートにはその他がリストされます。 - 無関係なトークン。 デザインシステムに4つ以上のセマンティックエイリアスがある場合(例:
color-brand->hb-pink)、どのエイリアスも使用しておらず、システムの名前プレフィックスを共有していない生トークンは除外されます。これらはクライアントや旧ブランドの色であることが多いです。 - ロール。 セマンティックエイリアスが優先されます。ページ背景が背景になります。ライトモードで、デザインシステムにさらに明るいカード表面がある場合、その表面が背景になります: テキストはカード上にあり、ページカラーはその背後にあります。
--prefer-token bg=TOKENで別のトークンを選択できます。ボディテキストトークンがテキスト色になります。ブランドトークンはカーソルになり、選択範囲に色を付けます。ブランドカラーが背景上でカーソルとして弱すぎる場合、ブランドランプのWCAG 4.5を通過するステップがカーソルになります(例: アクセシブルなオレンジ)。 - 色相。 最小コスト割り当てにより、トークンが6つの色相スロットに配置されます。OKLCH色相、トークン名(danger -> 赤、success -> 緑、warning -> 黄、info -> 青)、および明度変化を使用します。名前は、色相がそのスロットの45度以内にある場合にのみカウントされます。
- 明度。 各色は(色相とクロマを維持したまま)そのモードのAPCAバンドに移動します。バンド内のトークンはそのまま保持されます。
- 不足色。 空のスロットには、ブランドのクロマで色覚多様性に配慮した色相が設定されます。
- 派生ダークモード。 ライトテキストまたはインクトークンがダーク背景になります。ライトペーパーがダークテキストになります。
- キャラクター。 テーマはゲートの範囲内で、そのデザインシステムのように見える必要があります。
- ブランドスロット: どの色相カラーもブランドカラーを示さない場合、ブランドカラーは最も近い色相(26度以内)のブライトステップになります。その明度はブライトターゲットに移動します。
- ボールド: 見出しテキストトークンがテキストよりも強い場合、それがボールドカラーになります。ダークモードでそれが無い場合、ボールドはテキスト色となり、最大Lc 4明るくなり、ハレーションゲート未満になります。
- 各色相のダークモード低エッジ(Lc): 赤50、緑72、黄62、青55、マゼンタ55、シアン60。
- 明度調整後WCAG 3未満のトークン色相はWCAG 3に移動します。
- レポートの「キャラクター」セクションには、ゲートではなくターゲットがリストされます: トークンからの色、ブランドカラー、保持されたクロマ(ターゲット70%以上)、最大色相変化(12度以下)、最小ノーマル-ブライトステップ(dE 0.030以上)、および「Targets missed」行。
- 修復。 ハードゲートが不合格の場合、スクリプトは最低優先順位の色を変更します(小さなステップ: 明度、次に色相とクロマ、次に合成色)。優先順位:
--set> ブランド > 名前付きトークン > トークン > 派生 > 合成。背景が読みやすいテキストをサポートできない場合、スクリプトはすべての色を標準背景上で再マッピングします。レポートにその旨が示されます。
可読性ゲート(ハード)
references/gates.mdに各ゲート、その制限、理由が記載されています。概要:
| ゲート | 不合格条件 |
|---|---|
| 背景上のテキスト | APCA Lc < 75 または WCAG < 7 |
| ハレーション(ダーク) | テキスト、ボールド、白、またはブライトホワイトのLc > 104 |
| ANSI 1-6 および 9-14 | Lc < 45 または WCAG < 3 |
| ブライトブラック(色8) | Lc < 30、またはテキストより15未満低い |
| グレー | ダーク: 白とブライトホワイトのLc < 60; ライト: 黒のLc < 75、白とブライトホワイトのLc < 30 |
| 分離 | 2つの色相カラーがdE(OKLab) 0.06未満 |
| 色覚多様性 | 赤/緑 < 0.06、赤/黄および赤/マゼンタ < 0.05(プロタン、デュータン) |
| 選択範囲 | その上のテキストがWCAG < 4.5 または Lc < 60; その上の色相カラーのLc < 30; 背景からのdE < 0.05 または WCAG < 1.10 |
| カーソル | WCAG < 3 |
| ボールド | ボールドがテキストより暗い |
| 色付き背景上のテキスト | 緑、黄、またはシアン上の黒テキストのLc < 30 |
| 色相 vs テキスト | 色相カラーがテキスト色にdE 0.06未満で近い |
| 薄字テキスト(SGR 2) | 薄字テキストのLc < 30; 薄字色相カラー(1-6、9-14)のLc < 15 |
| 半透明 | --translucent使用時のみ: 上記のゲートが黒または白のデスクトップ上で不合格 |
薄字テキストは、セル背景に向かって混色された色です(colorlab.faint、DIM_BLEND 0.60、DIM_POWER 1.26)。これはTerminal 2.15で測定されました(docs/faint-measurement.md)。実際の薄字テキストは弱いため、制限は低く設定されています。ダーク色相カラーはクロマを保持します。ユーザーはGATES["faint_text"]["gate"]["ansi_min_lc"]を上げて薄字色を強くすることもできますが、クロマが犠牲になります。
既知の制限
- 24ビットカラーを使用するプログラム(Terminalは
COLORTERM=truecolorを設定)はテーマを使用しません。Claude Codeの場合は、レポートが推奨するテーマを設定してください(「Claude Codeでの使用」参照)。 - まだ測定されていないもの: ボールドカラー、および半透明ウィンドウ上でTerminalがセル背景を描画する方法。生成されたテーマのTerminalでのレンダリング(ボールドカラー、選択範囲)はまだチェックされていません。
- スクリプトは不透明な背景を書き込みます。半透明の背景はデスクトップを透けさせ、テキストの可読性を低下させます。
- Terminalには選択テキストやカーソル下のテキストの色がありません。代わりに、ゲートは選択範囲上のテキストとカーソルをチェックします。
.terminalカラーフォーマットはreferences/terminal-format.mdに記載されています。Macでは、ファイルはsRGB ICCプロファイルを埋め込みます。他のシステムでは、sRGB色空間IDのみを保持します(同じようにデコードされます)。scripts/verify_terminal.swift(Macのみ)は、AppKitで全ての色をデコードします:swiftc -O scripts/verify_terminal.swift -o scripts/verify_terminal、次にscripts/verify_terminal --register-terminal-fonts "<file>.terminal"。