mcpField
T
typeset

typeset

github.com/educlopezデザイン・UI407573 回インストール2 週間前に更新
リポジトリ

typeset について

typeset は UI のタイポグラフィと階層を整える ui-craft のサブスキルです。フォント、サイズ、字間、行間、マイクロタイポグラフィを順に確認し、コードも直接編集できます。

主な機能

  1. 01フォント一覧と組み合わせの確認
  2. 02モジュール式の文字サイズ設定
  3. 03字間と行間のルール設定
  4. 04ウェイト階層の整理
  5. 05数字、句読点、階層の確認

活用シーン

  1. 01一貫した UI のフォント・サイズ体系の構築
  2. 02見出し、本文、コントロールの階層改善
  3. 03数字、句読点、見出しの折り返しなどの調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/educlopez/ui-craft --skill typeset

インストール後、Claude Code で/typesetを入力して読み込まれたか確認します。

詳細

コンテキスト： このサブスキルは、より広範な ui-craft スキルを構成する視点のひとつです。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読んで、発見・アンチスロップ・クラフトテストを行ってから、以下の具体的な視点を適用してください。

$ARGUMENTS の UI に組版を適用します。ui-craft スキルを読み込み、references/typography.md を読んでください。

注： 組版はノブに依存しません（ノブ非依存）。タイポグラフィのルール（見出しをすべて大文字にしない、24px 以上では tracking-tight を使う、本文フォントはひとつにする、など）は調整できません。

次の順に適用してください：

  1. フォントの確認 — どのフォントが読み込まれていますか？理由もなく Inter がデフォルトの選択肢になっている場合は、採用する前に確認してください（Inter は AI らしさが最も出る要素です）。おすすめの代替フォント：Geist、DM Sans、Plus Jakarta Sans、システムフォントスタック。本文フォントはひとつ、必要ならディスプレイフォントをひとつ追加します。3種類は使わないでください。

  2. スケール — サイズに規則性はありますか？それとも場当たり的ですか？モジュラースケール（1.125／1.2／1.25）を基準にします。サイズ：12／14／16／20／24／32／48／64／72。視覚的な調整が必要な場合を除き、13px／15px／17px のような単独のサイズは使わないでください。

  3. トラッキング（letter-spacing）：

    • 24px 以上 → tracking-tight（-0.02em）、40px 以上ではさらに詰めてもかまいません
    • 本文が 14-20px → デフォルト
    • カテゴリーラベルが 11-13px → tracking-wide（+0.06em）＋大文字表記を使用できます（ここだけ例外）
    • 見出し、ナビゲーション、ボタン、テーブルをすべて大文字にしないでください

  4. 行送り（line-height）：

    • 見出し：1.05-1.15
    • 本文：1.5-1.65
    • UI（ボタン、ラベル）：1.2-1.3

  5. ウェイトの階層 — ウェイトは最大2～3種類にします。一般的な組み合わせ：本文は 400、UI／ラベルは 500、見出しは 600-700。「念のため」に9種類のウェイトを読み込まないでください。

  6. マイクロタイポグラフィ（細部の組み合わせ）：

    • 揃えて表示する数字（テーブル、統計、タイムスタンプ、価格）にはすべて tabular-nums を指定する
    • 見出しには text-wrap: balance、本文には text-wrap: pretty を指定する
    • 曲線引用符（'／"）、em ダッシュ（—）、en ダッシュ（–）を使い、二重ハイフンは使わない
    • ブランド名、数字と単位の間、見出しの最後の短い語の前には   を使う
    • 短縮形では正しいアポストロフィを使う
    • 任意機能（合字、ss01、分数）には font-feature-settings または font-variant-* を使う
    • 単位には引用符ではなく、まっすぐなプライム記号（′、″）を使う

  7. 階層の確認 — 主要・二次・三次の要素をひと目で見分けられますか？すべての行のウェイトやサイズが同じなら、要素をまとめるか、差を際立たせてください。

階層を際立たせる

UI が技術的には正しくても印象に残らない場合は、タイポグラフィを武器にします。特徴を持たせる要素はひとつだけ選んでください（ふたつは選ばないでください）。大胆さはタイポグラフィで表現し、色や装飾には頼りません。

  1. ヒーロー見出し — サイズを 80-120px、ウェイトを 700-800、トラッキングを -0.04em にします。行送りは詰めます（0.95-1.0）。
  2. 階層の差を広げる — H1 と本文の差を広げます。H1 が 32px で本文が 16px なら、UI は控えめに語りかけている状態です。H1 が 48px 以上なら、比率がはっきり伝わります。範囲を意図的に狭めるか広げてください。
  3. マイクロモチーフ — 繰り返し使う独自のディテールをひとつ加えます。手描き風の下線、数字カウンター（01、02）、非対称な補助要素、特徴的なリストマーカーなどです。

強調度のノブ制御（CRAFT_LEVEL）：

  • ≤ 4 — 省略します。大胆さはクラフトのレイヤーであり、基本要件ではありません。
  • 5-7 — タイポグラフィの強調だけを適用します。依頼がない限り、特徴的なモチーフは加えません。
  • 8+ — タイポグラフィの強調に、特徴的なディテールをひとつ追加します（references/craft-intent.md に従い、最初の /craft で選択します。/polish と /bolder で強化し、ふたつ目は追加しません）。

事前確認： アクセントカラーがすでに使いすぎていたり、階層がすでに強く出ていたりする場合、問題は平坦さではなくノイズです。代わりに /distill（削減）または /colorize（アクセントを減らす）に進んでください。

出力： コードを直接編集します。Review Format の表を出力します。最も効果の大きい変更をひとつ明記します（通常は「フォントの選択」または「ヒーローでの tracking-tight」です）。

次のステップ： /polish — タイプシステムを設定した直後（第1段階）に適用すると、マイクロディテールが最も効果的です。

コメント

Markdown 対応