Repolode
投稿する
plugin87

plugin87/ux-ui-agent-skills

ClaudeなどのコーディングエージェントをUX/UIデザインの専門家にする、DTCG tokens、コンポーネント仕様、138種類のデザインシステム、52の客観的なゲートを備えた指示・知識キット。

GitHub で見る公式サイト
スター
2,375
フォーク
253
未解決の Issue
11
最終コミット
11 時間前

これは何？

UX/UI Agent Skillsは、AIコーディングエージェントをデザイン作業へ導く、構造化された指示、design tokens、実行可能なskills、デザインシステムのリファレンスをまとめたキットです。Primitive、Semantic、Componentの3層構成でDTCG形式のtokensを生成し、anatomy、states、アクセシビリティ仕様を含めてatomからtemplateまでのコンポーネントを設計します。また、adapter protocolを通じて、React with Tailwind、Next.js、SwiftUI、Vue、Svelte、Flutterなど、さまざまなframework向けのコードを生成します。

プロジェクトには、出力を客観的に検証する52のゲートが含まれています。そのうち約34個はheadless browserを起動し、各stateにおけるWCAGのコントラスト、axe-coreのrole、キーボード操作、ターゲットサイズ、reduced motion、狭い画面幅での横方向のoverflowを、レンダリング済みHTMLで測定します。残りのチェックではtokenファイル、コンポーネント仕様、ソースコードを調べ、ハードコードされた値や絵文字、意図を宣言せずに定義された破壊的な操作を検出します。さらに、138件のデザインシステムライブラリと、あらゆるMCP clientにゲート、設計指針、tokensを公開するMCP serverも含まれています。

インストール方法は、Claude Code plugin、npxコマンド、Homebrewに加え、Codex、Cursor、Copilot、Aider向けのAGENTS.mdを用意しています。ルールを自動適用するhooksが利用できるのは、Claude Code経由の場合のみです。

主な機能

  • 01Primitive、Semantic、Componentの3層アーキテクチャに沿って、DTCG形式のdesign tokensを生成します。
  • 0252の客観的なチェックを提供し、そのうち約34個はheadless browserでレンダリング済みのページを測定します。
  • 03チェックではWCAG 2.2のコントラスト、キーボード操作、ターゲットサイズ、reduced motionを検証します。
  • 04参照用に、名前付きのデザインシステムを138種類収録したライブラリを提供します。
  • 05React、Next.js、SwiftUI、Vue、Svelte、Flutterなどのframeworkに出力を適合させます。
  • 06MCP serverを通じて、ゲート、設計指針、tokensを公開します。

ユースケース

  • 一貫したtokensとアクセシビリティチェックを使って、コーディングエージェントに新しいUIの設計・実装を任せる。
  • 既存のインターフェースについて、WCAGのコントラスト、ターゲットサイズ、overflowの問題を監査する。
  • チームのフロントエンドプロジェクトに、design tokensのパイプラインとコンポーネント仕様を導入する。
  • システム間の移行やマッピングに、共通のデザインシステムリファレンスを活用する。

クイックスタート

  1. 1

    Claude Codeを開き、キットをClaude Codeプラグインとしてインストールします（READMEのオプションA、2つのコマンド）。

  2. 2

    docs/INSTALL.mdを確認し、ほかのインストール方法（CodexとCursor向けのAGENTS.md、MCPサーバー、Homebrew、npx）を比較します。

使う前に知っておきたいこと

  • READMEの抜粋ではプラグインのインストールコマンドが途中で切れているため、正確なコマンドはここには記載されていません。
  • ブラウザーを使った完全なゲート検証では実際のブラウザーを起動するため、キットのインストール以外にもセットアップが必要です。

トピック

#design-system#design-tokens#accessibility#wcag#ai-agents#claude-code#ui#tailwindcss#claude#claude-skills

よくある質問

ux-ui-agent-skills とは？
ClaudeなどのコーディングエージェントをUX/UIデザインの専門家にする、DTCG tokens、コンポーネント仕様、138種類のデザインシステム、52の客観的なゲートを備えた指示・知識キット。 UX/UI Agent Skillsは、AIコーディングエージェントをデザイン作業へ導く、構造化された指示、design tokens、実行可能なskills、デザインシステムのリファレンスをまとめたキットです。Primitive、Semantic、Componentの3層構成でDTCG形式のtokensを生成し、anatomy、states、アクセシビリティ仕様を含めてatomからtemplateまでのコンポーネントを設計します。また、adapter protocolを通じて、React with Tailwind、Next.js、SwiftUI、Vue、Svelte、Flutterなど、さまざまなframework向けのコードを生成します。
ux-ui-agent-skills は無料で使えますか？ライセンスは？
ux-ui-agent-skills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
ux-ui-agent-skills は今もメンテナンスされていますか？
活発にメンテナンス中。ux-ui-agent-skills の最終コミットは 2026年10月19日 です。
ux-ui-agent-skills は何に使えますか？
一貫したtokensとアクセシビリティチェックを使って、コーディングエージェントに新しいUIの設計・実装を任せる。 既存のインターフェースについて、WCAGのコントラスト、ターゲットサイズ、overflowの問題を監査する。 チームのフロントエンドプロジェクトに、design tokensのパイプラインとコンポーネント仕様を導入する。 システム間の移行やマッピングに、共通のデザインシステムリファレンスを活用する。
ux-ui-agent-skills のインストール方法は？
Claude Codeを開き、キットをClaude Codeプラグインとしてインストールします（READMEのオプションA、2つのコマンド）。 docs/INSTALL.mdを確認し、ほかのインストール方法（CodexとCursor向けのAGENTS.md、MCPサーバー、Homebrew、npx）を比較します。
ux-ui-agent-skills はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/plugin87/ux-ui-agent-skills

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト