mcpField
S
styleseed

styleseed

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

styleseed について

styleseed は、記録したデザイン上の決定をプロジェクト固有のルールや実装ワークフローに変換するスキルです。UI を作成・更新するチーム向けで、STYLESEED.md とコンパイル済みルールを通じて、画面やセッションをまたいで決定事項を活用できます。

主な機能

  1. 01STYLESEED.md へのデザイン決定の記録
  2. 02.styleseed/ へのプロジェクトルールのコンパイル
  3. 03UI の実装・レビュー・監査ワークフロー
  4. 04レンダリング結果のスコアリングによる品質チェック
  5. 05トークン、アクセシビリティ、モーション、マイクロコピーのワークフロー

活用シーン

  1. 01新しい画面にも既存のデザイン選択を維持
  2. 02UI 実装時にプロジェクトルールを適用
  3. 03レンダリングした画面のレビューと採点
  4. 04デザイントークンやアクセシビリティ指針の更新

インストール

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

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

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

同梱ファイルstub.yaml

詳細

styleseed

カタログの概要 — スキルの全容：bitjaru/styleseed

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか？

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

  2. スコープを検出してから、インストールします：

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

    グローバル：

    npx skills add bitjaru/styleseed --skill styleseed -g -y

    プロジェクト：

    npx skills add bitjaru/styleseed --skill styleseed -y

    Claude Code： チャットメッセージの先頭に ! を付けてコマンドを送信すると、会話を離れずに実行できます。

Claude Code のプラグイン経由での方法：

claude plugin marketplace add bitjaru/styleseed
claude plugin install styleseed@styleseed

ご注意

  • 必要なもの： Node.js と npm（スキルに同梱されたコンテキストコンパイラーと品質ゲートは Node スクリプトとして実行されます）；セットアップやビルドのワークフローを実行すると、プロジェクトに STYLESEED.md（デザインロック）と .styleseed/ ディレクトリが作成されます
  • ライセンス： MIT
  • ダウンロードサイズ： 約 77 MB。

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

  • スキル名：styleseed（登録されている唯一のスキル）
  • Claude Code：/styleseed <request>。例：/styleseed Help improve this screen. Preserve our existing design choices.；Codex：$styleseed <request>
  • リクエストにはワークフロー名を指定してください：/styleseed setup、/styleseed resolve、/styleseed build、/styleseed review、/styleseed score、/styleseed verify、/styleseed tokens。以前は個別のコマンドだった /ss-*（例：/ss-build、/ss-tokens）は、現在この単一スキルの内部ワークフローです。

機能

StyleSeed は、記録されたデザイン上の決定を、プロジェクト固有のルールと実装ワークフローに変換します。単一の styleseed スキルがリクエストに応じて内部ワークフロー（setup、studio、reference、build、audit、review、score、verify、restyle、tokens、motion、accessibility、microcopy、flows、states、update）を選択し、タスクに適したルールを適用します。セットアップでは STYLESEED.md デザインロック（スキン、キーカラー、角丸、モーション）を作成し、新しい画面やセッションでも決定が引き継がれるようにします。コンテキストコンパイラーはその内容を .styleseed/ 内の小さなルールセットに変換し、レンダリングとスコアリングを行う品質ゲートが、UI を表示する前にレビューします。スキンは、同じコンポーネントのスタイルを変更する、特定のデザインに着想を得たトークンセットです。スコアは人間によるデザインの承認を支援しますが、それに代わるものではありません。

使用しないケース

  • トークンやルールのコンテキストがないコンポーネントライブラリ — shadcn-ui または baseline-ui を使用してください
  • デザイントークンのアーキテクチャのみ — design-tokens-skill を使用してください
  • 単一ページのデザインレビュー — design-review-garrytan または design-auditor を使用してください

コメント

Markdown 対応