mcpField
D
design

design

github.com/rshankrasデザイン・UI841683 回インストール14 週間前に更新
リポジトリ

design について

AppleプラットフォームのUI実装とレビュー向けのスキル集です。Liquid Glass、アニメーション、タイポグラフィ、UXライティングを扱い、SwiftUIとAppKitの実装やプロトタイプ、フィードバック設計も支援します。

主な機能

  1. 01Liquid Glassの実装ガイダンス
  2. 02SwiftUIアニメーションパターン
  3. 03UI案のプロトタイピング
  4. 04UXコピーとアラート
  5. 05SF Symbolsとタイポグラフィのガイダンス
  6. 06フィードバック、触覚、音の監査

活用シーン

  1. 01iOSまたはmacOSでガラス効果を実装
  2. 02ビュー遷移やスプリングアニメーションを設計
  3. 03実行可能なSwiftのUIプレビューを比較
  4. 04アラート、空状態、機能名を作成

インストール

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

$npx skills add https://github.com/rshankras/claude-code-apple-skills --skill design

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

同梱ファイル

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

animation-patterns/
core-animations.md
phase-keyframe-animators.md
symbol-effects.md
transitions.md
visual-effects.md
game-feel/
feedback-audit.md
haptic-design.md
sound-design.md

詳細

デザインスキル

Apple の最新デザインシステムを各プラットフォームで実装するためのスキルです。

このスキルが有効になる場合

次のような場合に、このスキルを使用します。

  • Liquid Glass デザインについて質問された場合
  • Apple の最新の UI エフェクトを実装したい場合
  • ビジュアルデザインのパターンについてガイダンスが必要な場合
  • マテリアル、透明度、ぼかしのエフェクトについて質問された場合
  • 流れるようなアニメーションを作成したい場合
  • spring、bounce、snappy アニメーションについて質問された場合
  • PhaseAnimator または KeyframeAnimator のサポートが必要な場合
  • ビュー遷移、マッチドジオメトリ、ヒーロー遷移が必要な場合
  • SF Symbol のエフェクト（バウンス、パルス、揺れ、呼吸）を使いたい場合
  • アニメーションの完了処理や withAnimation について質問された場合
  • アプリが平坦に感じる、またはゲームらしい手応え（お祝い演出、触覚フィードバック、効果音）を加えたいと言われた場合
  • フィードバック監査が必要な場合 — イベントが適切なチャネルでユーザーに伝わっていますか？
  • UX の構成に関するサポートが必要な場合：ナビゲーションの明確さ、見つけやすさ、情報設計
  • インターフェイスの文言、アラート、機能名を作成またはレビューする場合
  • SF Symbols の使い方や作成、フォント、Dynamic Type、文字の階層について質問された場合

利用可能なスキル

liquid-glass/

iOS 26 以降および macOS 26 以降向けの包括的な Liquid Glass 実装です。

  • SwiftUI の .glassEffect() API
  • AppKit の NSGlassEffectView
  • GlassEffectContainer のパターン
  • モーフィング遷移
  • インタラクティブなエフェクト
  • ボタンスタイル
animation-patterns/

iOS 13〜18 以降向けの SwiftUI アニメーションパターンです。

  • スプリングの設定（3 世代の API）
  • PhaseAnimator と KeyframeAnimator（iOS 17 以降）
  • ビュー遷移、マッチドジオメトリ、ナビゲーション遷移
  • SF Symbol のエフェクト
  • アニメーションの完了処理、トランザクション、タイミングカーブ
game-feel/

分野としてのゲームらしい手応え（「ジュース」） — イベント×チャネルのフィードバック監査、触覚フィードバックの語彙設計（Core Haptics のサービスアーキテクチャ）、音楽と共存する効果音レイヤーを扱います。動きの技法については animation-patterns に、生成コードについては generators/milestone-celebration に案内します。

ui-prototyping/

画面の多様な UI の方向性を、名前付きで実行可能な Swift の #Preview バリアントとして試せます。1 つのデザインに決める前に、比較、組み合わせ、調整を行えます。

ux-writing/

役立つインターフェイスの文言 — 声とトーン、PACE フレームワーク、アラートの構成、機能名、空の状態、UX を測定可能な形で改善する細かな文言の調整を扱います。

sf-symbols/

SF Symbols を一貫して扱います — システムシンボルの選択と設定（レンダリングモード、可変カラー／描画）、ウェイト間を補間するカスタムシンボルの作成、アニメーションプリセットの語彙を扱います。

typography/

UI のタイポグラフィ — テキストスタイルと Dynamic Type、幅軸を備えた San Francisco ファミリー、オプティカルサイズ、トラッキングとカーニングの違い、カスタムフォントのスケーリング要件を扱います。

主な原則

1. プラットフォームとの一貫性
  • Apple Human Interface Guidelines に従います
  • システム提供の API を使用します
  • ユーザーの外観設定を尊重します
2. パフォーマンス
  • 複数のエフェクトには GlassEffectContainer を使用します
  • 1 つのビューで使用するガラスエフェクトの数を制限します
  • GPU リソースを考慮します
3. ビジュアル階層
  • ガラスエフェクトで奥行きとレイヤーを表現します
  • 色合いを使って重要度を示します
  • 適切なシャドウと組み合わせます

参考ドキュメント

コメント

Markdown 対応