プロフェッショナルな UI/UX デザインの作成には、アクセシビリティ、カラーセオリー、タイポグラフィ、およびスタック固有のパターンに関する深い知識が必要です。このスキルは、50 以上のデザインスタイル、カラーパレット、フォントの組み合わせ、実装ガイドラインを検索可能なデータベースとして提供し、洗練されたインターフェースをより迅速に構築することを支援します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「ui-ux-pro-max」を使用しています。 「ビューティーサロン ウェルネス エレガント」デザインシステムを検索
期待される結果:
デザインシステム生成済み：
- 製品パターン：予約機能重視のサービスベースビジネス
- UI スタイル：オーガニックな形状を持つソフトミニマリズム
- カラーパレット：セージグリーンをプライマリ、クリームを背景、ローズゴールドをアクセント
- タイポグラフィ：Playfair Display（見出し）+ Lato（本文）
- エフェクト：控えめな影、穏やかなグラデーション、スムーズなトランジション
「ui-ux-pro-max」を使用しています。 アニメーションアクセシビリティの UX ガイドラインを取得
期待される結果:
UX ガイドライン発見：
1. prefers-reduced-motion: メディアクエリを確認し、静的フォールバックを提供
2. 持続時間の制限：マイクロインタラクションには 150-300ms を使用
3. Transform パフォーマンス：width/height ではなく transform/opacity をアニメーション化
4. ローディング状態：非同期オペレーションにはスケルトンスクリーンまたはスピナーを表示
セキュリティ監査
安全Static analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.
品質スコア
作れるもの
新しいダッシュボードを構築するフロントエンド開発者
SaaS 製品の管理ダッシュボードを作成する必要がある開発者について。このスキルを使用して「SaaS ダッシュボード」のデザインシステム推奨事項を取得し、データ中心のインターフェース向けのアクセシブルなカラーパレットを取得し、パフォーマンス最適化のための React 固有のガイドラインを取得します。
ランディングページを作成するソロファウンダー
デザイナーではないファウンダーがスタートアップのプロフェッショナルなランディングページを必要としています。「ビューティーサロンウェルネスサービス」を検索して、スタイル、カラー、タイポグラフィ、ランディングページパターンを含む完全なデザインシステムを取得し、Tailwind CSS ガイドラインを使用して実装します。
アクセシビリティコンプライアンスを確保するデザイナー
デザイナーは UI が WCAG ガイドラインに準拠していることを確認したいと考えています。「アクセシビリティ コントラスト フォーカス」で ux ドメインをクエリして、カラーコントラスト比、フォーカス状態、キーボードナビゲーションに関する具体的なルールをコード例とともに取得します。
これらのプロンプトを試す
「ミニマリスト ダークモード ダッシュボード」に一致するデザインスタイルを検索してください。トップ 3 のスタイル推奨事項を、それぞれのカラー方式と主な特徴とともに表示してください。
「FinTech 暗号通貨取引ダッシュボード」の完全なデザインシステムを生成してください。製品パターン、UI スタイル、カラーパレット、タイポグラフィ、エフェクトを含めてください。プロジェクト名は「CryptoVault」とします。
このボタンコンポーネントのアクセシビリティ上の問題を確認してください：[コードを貼り付け]。カラーコントラスト、フォーカス状態、タッチターゲットサイズに関する WCAG ガイドラインに照らしてチェックしてください。具体的な修正を提供してください。
Tailwind CSS でレスポンシブな navbar を構築しています。html-tailwind スタックで「navbar responsive floating」のガイドラインを検索し、適切な aria 属性を含む実装コードを提供してください。
ベストプラクティス
- 実装前に推論を含む包括的な推奨事項を取得するため、常に--design-system フラグから開始する
- 最初にアクセシビリティガイドラインを確認する - カラーコントラスト（4.5:1）、フォーカス状態、タッチターゲット（最小 44x44px）
- フレームワークの規約に従う実装パターンを取得するため、スタック固有の検索を使用する
回避
- Heroicons や Lucide などの適切な SVG アイコンライブラリではなく、UI アイコンとして絵文字を使用する
- レイアウトシフトを引き起こす scale transform を使用して hover 状態を実装する
- 不可視になるライトモードで透明なグラスカード（bg-white/10）を使用する