スキル自身の言葉で
design-style-skill は、PptxGenJS で構築された 10 インチ × 5.625 インチの LAYOUT_16x9 キャンバス上で、角丸（rectRadius）と間隔をインチ単位で変化させることで、PPT スライド用に一貫したビジュアルシステムを 1 つ選択します。Sharp & Compact、Soft & Balanced、Rounded & Spacious、Pill & Airy という 4 種類のレシピを提供し、それぞれ小・中・大の角丸、要素のパディング、要素間の間隔、ページマージン、ブロック間隔のトークン表を備えています。
これらのトークンは 6 つのコンポーネントにマッピングされます：ボタンとタグ、カードとコンテナ、画像コンテナ、入力欄の形状、バッジ、アバターフレームです。組み合わせの原則としては、角丸のネスト、密度に応じた間隔、角丸と高さの関係を扱い、続いて 10 pt から 96 pt までのタイポグラフィスケール、スペーシングスケール、そしてプレゼンテーションの種類別の早見選択表が示されます。
生成されるもの
- 各スタイルごとのコンポーネント単位の rectRadius マッピングで、4 つのレシピすべてにわたるボタンとタグを対象としています。
- 特定のスタイルにおける形状、位置、塗り色、rectRadius を示す、そのまま適用できる PptxGenJS の addShape 呼び出しです。
- 6つの使用バンドにおけるポイント単位の文字サイズで、表紙やセクションタイトルでは44〜60ptまで指定されています。
- カードのパディングやその他の間隔に用いる、インチ単位のスペーシングスケールです。
仕組み
- 01概要からレシピを選ぶ
4つのスタイルは角丸半径の範囲とスペーシングの範囲によって定義され、それぞれ情報密度の高いレポートからローンチイベントまで、適したシナリオと対になっています。
- 02そのスタイルのトークン表をコピーする
各レシピはインチ単位で数値の半径トークンを示しており、Rounded & Spaciousの大きな半径は0.25"に設定されています。
- 03トークンをコンポーネントに割り当てる
コンポーネント表は4つのスタイルすべてについて、コンポーネントごとのrectRadiusを示しており、カード/コンテナはSharpで0.03"、Softで0.1"、Roundedで0.2"、Pillで0.3"となります。
- 04要素の高さに応じて半径を選ぶ
半径は単一の固定値ではありません。高さの表では要素を0.3"未満、0.3"〜0.6"、0.6"〜1.2"、1.2"超のバンドに分け、各スタイルごとに独自の半径を設定しています。
- 05タイポグラフィ表から文字サイズを設定する
6つの使用バンドは注釈や出典からデータハイライトまでにわたり、本文とディスクリプションのテキストは14〜16ptです。
- 06クイック選択ガイドで選択を確認する
プレゼンテーションの種類が推奨を左右します — 技術的な共有では、専門性と明確な情報伝達のためにSharpまたはSoftが適しています。