UI Skills

概要

UI Skillsは、UI/UXデザインに焦点を当てたスキルコレクションで、AIエージェントがモダンなインターフェースデザイン原則を理解し適用できるよう支援します。このSkillを通じて、AIは以下が可能：

• 🎨 プロフェッショナルなUIデザイン原則とベストプラクティスを適用
• 📱 レスポンシブでユーザーフレンドリーなインターフェースレイアウトを作成
• 🎯 アクセシビリティデザイン標準に従う
• 🖌️ 一貫したデザインシステムとコンポーネントを使用
• 📐 ビジュアルヒエラルキーとタイポグラフィ規範を実装

コア機能

1. デザイン原則ガイダンス

ビジュアルヒエラルキー、カラー理論、タイポグラフィ、スペース使用を含むUI/UXデザインのコア原則を提供。

2. コンポーネントライブラリリファレンス

ボタン、フォーム、ナビゲーション、カードなど、一般的なUIコンポーネントのデザイン仕様をカバー。

3. デザインシステム

カラー、間隔、フォントなどのデザイントークンを含む一貫したデザインシステムの確立と維持を支援。

4. レスポンシブデザイン

異なる画面サイズに適応するレスポンシブインターフェースの作成をガイド。

5. アクセシビリティデザイン

デザインがWCAG基準を満たし、すべてのユーザーにフレンドリーであることを保証。

使用ケース

• Webアプリデザイン: モダンなWebアプリケーションインターフェースを作成
• モバイルデザイン: モバイルファーストのユーザーインターフェースをデザイン
• デザインシステム構築: エンタープライズレベルのデザインシステムを確立
• プロトタイピング: 高忠実度プロトタイプを迅速に作成
• デザインレビュー: 既存のデザインを評価し改善

カバーされるデザイン領域

• ビジュアルデザイン: カラー、タイポグラフィ、アイコン、イラスト
• インタラクションデザイン: アニメーション、状態、フィードバック、ナビゲーション
• 情報アーキテクチャ: コンテンツ構成、ナビゲーション構造
• ユーザーエクスペリエンス: ユーザーフロー、ユーザビリティ、アクセシビリティ

技術スタック

主流のデザインと開発ツールに適用：

• Figma、Sketch、Adobe XD
• React、Vue、Angularなどのフロントエンドフレームワーク
• Tailwind CSS、Material-UI、Ant DesignなどのUIライブラリ

まとめ

UI SkillsはAIにプロフェッショナルなUI/UXデザイン知識を提供し、モダンなデザイン標準を満たすインターフェースを生成できるようにし、開発者とデザイナーが美しく使いやすいユーザーインターフェースを迅速に作成するのを支援します。

関連：Agent Messaging Skill、Agent Ops Incident Notifier。分類は skills。