mcpField
U
ui-craft

ui-craft

github.com/podoデザイン・UI29234 回インストール4 日前に更新
リポジトリ

ui-craft について

ui-craft は、AI コーディングエージェント向けのデザインスキル集で、レイアウト、タイポグラフィ、色、モーション、アクセシビリティ、仕上げを扱います。メインスキルは構築・レビュー・監査の作業を振り分け、3 種のスタイル別バリエーションも用意しています。

主な機能

  1. 01UI 設計指針と既存トークンの確認
  2. 02構築・モーション・レビュー・監査の振り分け
  3. 03ミニマル、エディトリアル、ダッシュボードの各版
  4. 04レイアウト、文字、色、モーションの指針
  5. 05アクセシビリティと UI の仕上げ

活用シーン

  1. 01既存のプロジェクトトークンに沿った UI 構築
  2. 02インターフェースのレビューや仕上げ
  3. 03エディトリアルまたは長文ページの制作
  4. 04データ密度の高い管理ダッシュボードの設計

MCP 対応

Claude Code プラグイン経由では、ui-craft-mcp の品質ゲート MCP サーバーが同梱されます。skills CLI でのインストールには含まれません。

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill ui-craft

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

同梱ファイルstub.yaml

詳細

ui-craft

カタログの概要 — 完全なパッケージ：educlopez/ui-craft

判断ツリー

  1. 完全なスキルはすでにインストールされていますか？ このパッケージは4つのスキル（ui-craft、ui-craft-minimal、ui-craft-editorial、ui-craft-dense-dashboard）をインストールします。ここでは最初のスキルを確認します。

    • グローバル：f=~/.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは ui-craft としてインストールされています。呼び出して続行してください
    • pointer → ステップ2に進みます

  2. 対象範囲を検出してから、インストールします：

    [ -e ~/.agents/skills/ui-craft ] && echo "global" || echo "project"

    グローバル：

    npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -g -y

    プロジェクト：

    npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -y

    Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信してください。

Claude Code プラグイン経由：

/plugin marketplace add educlopez/ui-craft
/plugin install ui-craft@ui-craft

ご注意

  • 要件： プラグイン経由の場合のみ：ui-craft-mcp の品質ゲート MCP サーバーがバンドルされています。Claude Code は npx で起動します（npm パッケージをダウンロードして実行します）
  • ライセンス： MIT

インストール後の呼び出し

  • スキル名：ui-craft、ui-craft-minimal、ui-craft-editorial、ui-craft-dense-dashboard
  • トリガーフレーズ：「ui-craft」、「anti-slop」、「design engineering」、「slash commands for design」

概要

UI Craft は、AI コーディングエージェントに不足しているデザインの知識を提供します。テンプレートやコンポーネントライブラリではなく、レイアウト、タイポグラフィ、色、モーション、アクセシビリティ、ダッシュボード、テーブル、ランディングページ、テーマ設定、仕上げに関する制作ルールに加え、構築前にプロジェクトで既存のトークンを読み取る調査ステップを提供します。メインの ui-craft スキルは、意図（構築、アニメーション、レビュー、仕上げ、監査）に応じて処理を振り分け、すべての UI に対して「これを AI が作ったと誰かが思うだろうか？」という観点でテストします。3つのバリアントでは、スタイルに応じて設定を固定します。ui-craft-minimal（すっきりとして余白が多く、Linear／Notion のようなスタイル）、ui-craft-editorial（雑誌や長文向け）、ui-craft-dense-dashboard（データ量の多い管理ツール）です。

skills CLI 経由でインストールされるのは、スキルとそのバリアントのみです。上流のパッケージには、汎用的な名前の別個のコマンドパススキル（craft、critique、polish、audit、animate、brief、tokens など）、Go CLI、レビューエージェント、MCP 品質ゲートサーバーも含まれています（Claude Code プラグインにはエージェントとサーバーがバンドルされています）。短い名前が無関係なスキル（animate）と衝突するため、コマンドパスはデフォルトのインストールから除外されています。必要であれば、--skill の後に名前を指定して追加できます。

使用しない場面

  • UI コンポーネントのないバックエンド、API、データ関連のタスク
  • 特定のスキルを1つだけ使いたい場合（より控えめなアプローチとして taste-skill を検討してください）

コメント

Markdown 対応