Repolode
投稿する
educlopez

educlopez/ui-craft

AIコーディングエージェントに、ありがちなAI風の画面ではなく、洗練された本番品質のUIを作らせるためのエージェントスキルとCLIです。

GitHub で見る公式サイト
スター
438
フォーク
23
未解決の Issue
3
最終コミット
昨日

これは何？

UI Craftは、AIコーディングエージェント向けのデザインエンジニアリングシステムです。独自のインターフェース設計ルール、画面の構築・レビュー・仕上げに使うスラッシュコマンド一式、紫のグラデーション、バウンスイージング、同じレイアウトのカードグリッドといった、AI生成UIにありがちなパターンを検出する決定論的なチェックをまとめています。特定の技術スタックに依存せず、Tailwind、CSS Modules、styled-components、vanilla CSS、単一ファイルコンポーネントのスタイルに対応します。

クロスプラットフォーム対応のGo製CLI（`ui-craft install`）、Claude Codeプラグイン、Cursorプラグイン、またはほかのハーネス向けのAgent Skills specを通じてインストールできます。CLIは各ハーネスのネイティブ設定にスキル、コマンド、MCPの品質ゲート、レビューエージェントを書き込み、バックアップとロールバックにも対応します。ダッシュボード、ランディングページ、認証画面などのUI構築は、名前付きのコンポジションレシピと受け入れチェックリストに沿って進められます。

付属の`ui-craft-detect`パッケージは、依存関係ゼロのスキャナーです。アンチパターン、アクセシビリティ、フォーム、プレースホルダー文言を対象とする43のルールを備えています。ローカルのソースコード、公開中のURL、または変更行だけをスキャンできるほか、Claude CodeとCursorでの編集時フックや、pre-commitおよびGitHub Actionsのワークフローも導入できます。

主な機能

  • 01階層構造、控えめな動き、プロジェクト固有のトークンを重視するようAIエージェントを導く、設計ルールと品質向上の指針。
  • 02個々の画面の構築、批評、仕上げ、アニメーションに使えるスラッシュコマンド。
  • 03ダッシュボード、ランディングページ、認証画面向けの名前付きレシピと、リリース前の受け入れ基準。
  • 04Claude Code、Cursor、Codex、Gemini、OpenCodeに対応し、バックアップとロールバックも可能な、複数ハーネス向けインストーラー。
  • 0543のアンチパターン、アクセシビリティ、文言ルールを備え、CIやgitフックで利用できる依存関係ゼロの検出ツール。

ユースケース

  • AIコーディングエージェントに、初回から本番品質のダッシュボードやマーケティングページを構築させる。
  • マージ前に、既存のフロントエンドにありがちなAI風のパターンやアクセシビリティ上の不足がないか確認する。
  • 新たなUIアンチパターンが追加された場合にのみプルリクエストを失敗させる、CIのゲートを追加する。
  • 永続化されたブリーフとデザイントークンを使って、セッションをまたいでデザイン上の判断を統一する。

クイックスタート

  1. 1

    Homebrew で ui-craft CLI をインストールする（macOS）

    brew install --cask educlopez/tap/ui-craft
  2. 2

    README からお使いの OS 用の公式インストールスクリプトを実行する（macOS/Linux または Windows）

  3. 3

    AI コーディングハーネスを検出し、skill、commands、gates を設定する

    ui-craft install
  4. 4

    エージェントに craft コマンドを使って surface を作成するよう依頼する

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

  • Intel 搭載の macOS 向けビルドは公開されていますが、テストは行われていません。
  • Linux arm64 と Windows arm64 向けのバイナリはビルドされていますが、CI では動作確認されていません。

収録されている特集

Claude Code・Codex のスキルパックAI コーディングエージェント向け UI デザインスキルClaude Code のツール・スキル・プラグインAI コーディングアシスタントとエージェントAI エージェントのスキル集フロントエンドのフレームワークとUIコンポーネント

トピック

#agent-skills#design-system#frontend#css#claude-code#cursor#accessibility#ui-review#anti-slop#codex

よくある質問

ui-craft とは？
AIコーディングエージェントに、ありがちなAI風の画面ではなく、洗練された本番品質のUIを作らせるためのエージェントスキルとCLIです。 UI Craftは、AIコーディングエージェント向けのデザインエンジニアリングシステムです。独自のインターフェース設計ルール、画面の構築・レビュー・仕上げに使うスラッシュコマンド一式、紫のグラデーション、バウンスイージング、同じレイアウトのカードグリッドといった、AI生成UIにありがちなパターンを検出する決定論的なチェックをまとめています。特定の技術スタックに依存せず、Tailwind、CSS Modules、styled-components、vanilla CSS、単一ファイルコンポーネントのスタイルに対応します。
ui-craft は無料で使えますか？ライセンスは？
ui-craft は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
ui-craft は今もメンテナンスされていますか？
活発にメンテナンス中。ui-craft の最終コミットは 2026年11月6日 です。
ui-craft は何に使えますか？
AIコーディングエージェントに、初回から本番品質のダッシュボードやマーケティングページを構築させる。 マージ前に、既存のフロントエンドにありがちなAI風のパターンやアクセシビリティ上の不足がないか確認する。 新たなUIアンチパターンが追加された場合にのみプルリクエストを失敗させる、CIのゲートを追加する。 永続化されたブリーフとデザイントークンを使って、セッションをまたいでデザイン上の判断を統一する。
ui-craft のインストール方法は？
Homebrew で ui-craft CLI をインストールする（macOS）: brew install --cask educlopez/tap/ui-craft README からお使いの OS 用の公式インストールスクリプトを実行する（macOS/Linux または Windows） AI コーディングハーネスを検出し、skill、commands、gates を設定する: ui-craft install エージェントに craft コマンドを使って surface を作成するよう依頼する
ui-craft はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/educlopez/ui-craft

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

関連プロジェクト

pbakaus / impeccable

AIコーディングエージェント向けのデザインガイド。デザインスキル、24個のコマンド、ブラウザー上でのライブ反復機能、AI生成フロントエンドUI向けの決定論的な検出ルール61個を提供します。

AI・機械学習#ai-agents#frontend#design
10.5万+7311 今週6262RustApache-2.0活発にメンテナンス更新 17 時間前