design-engineering-catalogue

design-engineering-catalogue

ビジュアルデザイン、UI の作り込み、ブランド、色、タイポグラフィ、モバイルデザインのためのドメインナビゲーターです。 ユーザーが見た目や使い心地を形作るスキルを求めたときに有効化します。

→ すべてのドメインを網羅したカタログは、design-catalogue を使用してください。

使用するタイミング

ユーザーが次のことを求めている場合に有効化します。

• 独自の美的感覚に基づく UI の提案や、デザインの指針を求めている
• ブランドアイデンティティ、色彩科学、タイポグラフィについて知りたい
• iOS、Android、またはクロスプラットフォームのモバイル向けにデザインする
• コンポーネントシステムやデザインシステムの基盤を作りたい
• インタラクティブなデザイン探索ツールを求めている

デザインエンジニアリング（独自の美的感覚に基づく UI）

スキル	おすすめの用途
taste-skill	プレミアムでありきたりではない UI — バリエーション、モーション、密度の調整
impeccable	23 個のコマンド、Chrome 拡張機能、Live Mode によるブラウザーでの反復
make-interfaces-better	仕上げ：マイクロインタラクション、タイポグラフィの細部、ビジュアルの洗練
ui-craft	18 個のスラッシュコマンド、アンチスロップ CLI、3 種類のスタイルバリエーション — 最も奥深いデザインエンジニアリングスキル
frontend-design	8 種類の美的指針（ブルータリズム、北欧風、サイバーパンクなど）と、テーマごとに固定された CSS トークン
huashu-design	雑誌品質のタイポグラフィ、CSS Grid、アニメーション付きプロトタイプ、MP4 エクスポート
brand-design-md	62 の世界水準のブランド（Stripe、Linear、Apple など）の正確なトークンを実行時に取得
ai-graphic-design-skill	15 の AI ツールをデザインシナリオに対応付け、2025-26 年のクリエイティブディレクター向けロードマップを提供
logo-designer-skill	ブランドへのヒアリング → SVG のコンセプトを 3～5 案作成 → 16px～2048px の PNG にエクスポート
distinctive-frontend	4 種類のテーマ付きデザインシステム（サイバーパンク、ブルータリズム、ヴェイパーウェイヴ、北欧風）と、段階的なアニメーション
design-for-ai	CHECKER（7 カテゴリーの監査）と APPLIER（6 フェーズの作成）のデュアルモード
superdesign-skill	無限キャンバスでのアイデア創出：ブランド抽出、デザイン案、IDE ネイティブ
styleseed	69 のデザインルール、60 以上のブランドスキン（Toss、Stripe、Linear、Vercel など）、13 個のスラッシュコマンド
awesome-design-skills	67 種類のスタイルを収録した美的レジストリ：グラスモーフィズム、ブルータリズム、弁当箱型、エディトリアル、リソグラフなど
interaction-design	インタラクションデザインの原則、コンポーネントの状態、マイクロインタラクション、アフォーダンス、タスクフロー — Norman と Tognazzini
format-storybook	Storybook のファイル構成、テンプレートの構成、コントロール、Chromatic によるビジュアルリグレッション、CSF パターン
localization-design	RTL のミラーリング、言語ごとのテキスト拡張、非ラテン文字の書体、文化によって異なる色やアイコンの落とし穴
design-system-governance	オーナーシップモデル、コントリビューションのライフサイクル、セマンティックバージョニングの契約、非推奨化ポリシー

カラー、タイポグラフィ、コンポーネント

スキル	最適な用途
color-expert	OKLCH/OKLAB の色彩科学、パレット生成、コントラスト
baseline-ui	アニメーションの再生時間、タイポグラフィのスケール、Tailwind のアンチパターン
shadcn-ui	shadcn/ui コンポーネントのワークフロー
ui-ux-pro-max	50 種類以上のスタイル、97 種類のパレット、9 種類の技術スタック
google-fonts-skill	ムードタグ付きの 1,923 種類の Google Fonts、73 種類の組み合わせ、CSS 変数、Tailwind 設定
design-tokens-skill	W3C DTCG トークン仕様：OKLCH、参照／エイリアス、Terrazzo、Figma エクスポート
ink-google	アーティファクト向けのインクスタイルのエディトリアルデザイン
open-design	31 種類のスキルと 71 種類のブランドデザインシステム — ローカル優先の Claude Design 代替
material-3-skill	Material Design 3 / Material You：ダイナミックカラー、トーン別サーフェス、30 種類以上のコンポーネント（Compose + Flutter）

モバイルとプラットフォームのデザイン

スキル	最適な用途
mobile-app-design	iOS HIG + Android MD3 + RN のベストプラクティス — 26K 語
mobile-app-ui-design	プロフェッショナルなモバイル UI：意図的で、滑らかで、生き生きとしたインターフェース
apple-hig-skills	Apple HIG：iOS、macOS、visionOS、watchOS、tvOS
hig-doctor	Apple HIG 違反の診断と修正
swiftui-patterns	SwiftUI のビューとコンポーネントのベストプラクティス
swiftui-claude-skills	WWDC 2025 で検証済みの SwiftUI、iOS 26.4 RC、Xcode 26
swiftui-design-skill	SwiftUI のビジュアルデザイン技法 — AI らしい粗雑さを避け、タイポグラフィ、カラー、ブランドを重視
liquid-glass-skill	iOS 26 Liquid Glass：.glassEffect()、GlassEffectContainer、移行パターン
platform-design-skills	クロスプラットフォーム向けの 300 種類以上の HIG/MD3/WCAG ルール
sleek-design-mobile-apps	Sleek プラットフォーム：画面、プロジェクト、アセットをデザイン（アカウントが必要）

インタラクションと仕上げ

スキル	最適な用途
taste-design-stitch	Google Stitch の出力に対する美的判断
design-lab	インタラクティブなデザイン探索、バリエーション生成
interface-design-dammyjay	ダッシュボード、管理パネル、情報密度の高い SaaS UI
bencium-ux-designer	独自性のある、本番品質のフロントエンド
neo-user-journey	UX ジャーニーマッピング + Playwright テスト + 50 種類以上のパターン + Nielsen スコアリング
simota-agent-skills	15 種類のデザインサブスキル：Vision、Frame（Figma ブリッジ）、Pixel、Clay、Ink、Sketch
design-auditor	19 カテゴリーの監査：タイポグラフィ、ダークモード、RTL、ダークパターン、0〜100 のスコア
composio-artifacts	Composio 経由で GitHub/Slack/Linear に接続されたアーティファクト
search-ux	検索入力、オートコンプリート、ランキング、ファセットフィルター、検索結果なしの状態、検索分析
interfaces-that-feel	感情的なデザイン：感じられる状態 → 物理的な類似物 → モーション／コピー／間隔の変更
information-architecture-and-navigation	ホッキョクグマ型 IA：整理／ラベリング／ナビゲーション／検索、分類体系、道案内、見つけやすさ