mcpField
N
number-details

number-details

github.com/mengtoデザイン・UI7.1k1.5k 回インストール3 日前に更新
リポジトリ

number-details について

手順、機能グループ、カード、エディトリアルレイアウトに控えめな二桁番号を加えるデザインスキルです。配置と書体をそろえ、番号が主コンテンツより目立たないようにします。

主な機能

  1. 01二桁番号の統一
  2. 02カードやセクションの配置指針
  3. 03低コントラストの等幅または細身書体
  4. 04整列と間隔のルール

活用シーン

  1. 01プロセス手順の番号付け
  2. 02機能カードへのリズム付け
  3. 03タイムラインやエディトリアルセクションの構成

インストール

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

$npx skills add https://github.com/mengto/skills --skill number-details

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

demo/
index.html
PROMPT.md
source.json

詳細

数字のディテールのスキル

使用する場面

  • プロセスの手順、機能グループ、カード、または編集上のリズムに、控えめな 01、02、03 のマーカーが必要なセクション。

ワークフロー

  1. 数字のマーカーは、主要なコンテンツではなく、二次的な視覚構造として追加します。
  2. 一貫性を保つため、01、02、03 のような2桁の数字を使用します。
  3. カードの角、セクションの余白、タイムラインのレール、見出しの横など、予測しやすい位置にマーカーを配置します。
  4. ディテールに建築的な印象を持たせるため、コントラストを抑えた等幅または幅の狭い大文字のタイポグラフィを使用します。
  5. 番号を付けたすべての要素で、余白と配置を一貫させます。

注意事項

  • 装飾的な数字が見出しや CTA より目立たないようにします。
  • 同じセクション内で番号のスタイルを混在させないでください。

コメント