mcpField
A
antfu-design

antfu-design

github.com/antfuデザイン・UI6.0k2.1k 回インストール6 日前に更新
リポジトリ

antfu-design について

antfu-designは、各種フレームワークやプレーンHTMLでUnoCSSの画面を構築するためのデザインスキルです。セマンティックトークン、ライト・ダークテーマ、レイアウト指針、UI出力のチェックをまとめています。

主な機能

  1. 01セマンティックなUnoCSSショートカット
  2. 02ライト・ダーク両対応のトークン
  3. 03名前付きz-indexレイヤー
  4. 04class形式のユーティリティ出力
  5. 05技術データのタイポグラフィ
  6. 06UIパターンと操作の指針

活用シーン

  1. 01React、Vue、Svelte、Solidでの画面構築
  2. 02高密度な開発ツールパネルの設計
  3. 03共通トークンを使ったランディングページ制作

インストール

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

$npx skills add https://github.com/antfu/skills --skill antfu-design

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

同梱ファイル

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

README.md
references/
advanced-pattern-vocabulary.md
advanced-redesign-protocol.md
best-practices-anti-slop.md
best-practices-bias-correction.md
best-practices-class-utilities-over-attributify.md
best-practices-strict-rules.md
core-design-read.md
core-principles.md
core-starter-kit.md
core-tokens-and-combinations.md
features-data-presentation.md
features-floating-vue-overrides.md
features-micro-interactions.md

詳細

UnoCSS を使用して任意のフレームワーク（React、Vue、Svelte、Solid、またはプレーンな HTML）でインターフェースを構築するときに使用します。高密度な開発ツールのパネルからランディングページまで対応します。まず core-design-read を読んで方向性を定め、その後、トークンシステムに加えて、仕上げのルールとアンチスロップルールを適用してください。

コアのルール

  • マークアップでは生のユーティリティチェーンではなく、セマンティックなショートカット（bg-base、border-base、color-active、btn-action）を使用します。
  • ライトモードとダークモードを同時に設計します。コアトークンは両方のテーマで機能する必要があります。
  • z-index レイヤーには名前を付けます（z-top-nav、z-panel-content、z-drawer-content）。テンプレートでは生の z 値を使用しないでください。
  • クラスベースのユーティリティのみを生成します（class="..."）。生成コードでは Attributify 構文を避けてください。
  • アイコンやステータスのクラス文字列は、UnoCSS が静的に抽出できるようリテラルのままにします（必要に応じて // @unocss-include を使用します）。
  • 技術的な値（パス、SHA、カウンター、タイムスタンプ、パーセンテージ）には font-mono と tabular-nums を使用します。
  • 長いパスや ID は視覚的に省略し、完全な値は title に保持します。
  • 見た目を選ぶ前に、ブリーフを読み、3 つのダイヤルを設定します（core-design-read）。
  • 高密度または構造的なサーフェスには境界線を、浮き上がったサーフェスには重ねたシャドウを使用します（features-micro-interactions）。
  • ユーザーに表示されるテキストでは、em ダッシュと en ダッシュを一切使用しません（best-practices-anti-slop）。

スターターショートカット

最小限のセマンティックコアです。完全な uno.config.ts とベースのスタイルについては core-starter-kit を参照してください。

shortcuts: [
  {
    'color-base': 'color-neutral-800 dark:color-neutral-200',
    'bg-base': 'bg-white dark:bg-#111',
    'bg-secondary': 'bg-#eee dark:bg-#222',
    'border-base': 'border-#8882',

    'bg-active': 'bg-#8881',
    'color-active': 'color-primary-600 dark:color-primary-300',
    'border-active': 'border-primary-600/25 dark:border-primary-400/25',

    'btn-action': 'inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
    'op-fade': 'op65 dark:op55',
    'op-mute': 'op30 dark:op25',

    'z-top-nav': 'z-60',
    'z-panel-content': 'z-70',
    'z-drawer-content': 'z-100',
  },
]

コアリファレンス

トピック説明リファレンス
コア原則セマンティックトークン、ダークモードの同等性、z-index の命名、クラス優先の出力core-principles
スターターキットコピーして使える UnoCSS のスターター設定と、ライト／ダークモードのベーススタイルcore-starter-kit
トークンと組み合わせトークンファミリー、再利用可能なクラスの組み合わせ、モバイル対応のシェルトークンcore-tokens-and-combinations
デザインの読み取りとダイヤルブリーフを読み、デザインの読み取りを宣言し、バリエーション／モーション／密度のダイヤルを設定するcore-design-read

ベストプラクティス

トピック説明リファレンス
厳格なルールと事前チェック禁止事項と推奨事項のチェックリスト、および統合された事前チェックbest-practices-strict-rules
Attributify よりクラスを優先生成コードでクラスユーティリティを使用する理由と変換例best-practices-class-utilities-over-attributify
アンチスロップの衛生管理ダッシュの禁止と、AI らしさが出る禁止パターンbest-practices-anti-slop
バイアスの補正変更が必要なタイポグラフィ、色、レイアウト、素材感のデフォルト設定best-practices-bias-correction

機能

トピック説明リファレンス
データの表示パス、アイコン、時刻、日付、数値、バッジ、ボタンfeatures-data-presentation
マイクロインタラクション角丸、配置、シャドウ、アニメーション、数値、アウトライン、クリック領域features-micro-interactions
Floating Vue のオーバーライド共通の Floating Vue 設定と Popper のスタイルfeatures-floating-vue-overrides

上級

トピック説明リファレンス
パターンの語彙認識し、選択して使う UI パターンの名称advanced-pattern-vocabulary
再設計プロトコルモードを検出し、最初に監査を行い、IA と SEO を維持するadvanced-redesign-protocol

コメント

Markdown 対応