mcpField
S
ss-studio

ss-studio

github.com/bitjaruデザイン・UI993517 回インストール1 日前に更新
リポジトリ

ss-studio について

ss-studioは、StyleSeedでデザイン案を作成し、プロトタイプを検証するスキルです。参考調査と方向性の選択から、シーン設計、実装、記録、エビデンスに基づく検証までを扱います。

主な機能

  1. 01役割別のデザイン参考整理
  2. 02選択用の3方向案の作成
  3. 03インタラクションシーンとメディアタスクの設計
  4. 04実行可能なプロトタイプの構築と記録
  5. 05記録したエビデンスによる検証

活用シーン

  1. 01プロダクトUIの方向性の比較検討
  2. 02選択した案のインタラクティブプロトタイプ化
  3. 03プロトタイプを記録し視覚・時間的結果を確認

インストール

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

$npx skills add https://github.com/bitjaru/styleseed --skill ss-studio

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
artifact-contract.md
provider-adapters.md
scripts/
studio-run.mjs

詳細

このワークフローを始める前に、セッションごとに一度だけ更新の事前チェックを実行してください。

インタラクティブなコンセプトを構築する

レジストリ優先の成果物境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み込んでください。レジストリを使用するプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトで .styleseed/effective-rules.md を使用できるのは、レジストリが存在しない場合に限ります。

Studio パイプライン全体を実行してください。ムードボード、静止画、または任意のモーションエフェクトの寄せ集めに縮小しないでください。

実行を開始する

まず STUDIO-PIPELINE.md、PRODUCT-PRINCIPLES.md、解決済みのプロジェクトルールを読み込んでください。有効な STYLESEED.md がプロジェクトにない場合は、Studio の前にセットアップを実行して解決してください。

永続的な実行を初期化します。

node <skill-dir>/scripts/studio-run.mjs init \
  --project-root . \
  --artifact <artifact-id> \
  --name "<project or concept>" \
  --brief "<product job and desired interaction>" \
  --surface mobile-app \
  --platform web

このコマンドは .styleseed/studio/ 配下の実行ディレクトリを出力します。references/artifact-contract.md の成果物スキーマを使用してください。メディア生成または記録が必要な場合に限り、references/provider-adapters.md を使用してください。

プロジェクトが成果物レジストリを使用する場合、--artifact は必須です。また、初期化時に実行に現在の成果物マニフェストとメソッドハッシュが紐付けられます。

1. 役割ごとに調査する

提供された参考資料と見つけた参考資料を、structure、navigation、signature、motion、asset-language に分類してください。ソース URL/パス、日付、目視で確認した内容、応用可能な原則、確信度、権利に関する注記を記録してください。実際に確認していない参考資料について、視覚的な証拠があると主張しないでください。

一般的なムードボードを集めるようユーザーに求めないでください。不足している役割のみを探してください。ブリーフで明示的に結び付けられていない限り、プロダクト UI、マーケティング用プレゼンテーション、生成メディアは分けて扱ってください。

2. 3 つの方向性を作成する

directions.json に native、signature、experimental のエントリをちょうど 3 つ記述してください。プロダクトの目的とコンテンツは固定し、少なくとも 2 つの構造軸を変えてください。各方向性には、次の項目を含めてください。

  • 構成と焦点のロジック
  • ナビゲーションのクロームとコンテンツキャンバス
  • セマンティックなパレットのレシピ、タイポグラフィ、マテリアルの役割をそれぞれ 1 つ
  • 生成アセットの戦略
  • モーションと連続性のロジック
  • プロダクト固有のシグネチャームーブを 1 つ
  • 出力文法、ブランドレシピ、トレードオフ、実装コスト、リスク

方向性の検証が通った場合にのみ次へ進んでください。

node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage directed

3. 選択を必須にする

3 つの方向性をまとめて提示してください。ユーザーの選択とその理由を記録してください。それらを平均化したり、都合よく最も簡単なものを選んだりしないでください。

node <skill-dir>/scripts/studio-run.mjs select \
  --project-root . --run <id> --direction <direction-id> \
  --by "<reviewer>" --rationale "<decision>"

4. シーンとメディアジョブをコンパイルする

選択した方向性から scenes.json、assets.json、video.json を作成してください。

  • インタラクションシーンでは、トリガー、状態、連続性、開始/終了、フィードバック、中断、モーション低減時の動作、レンダラーのターゲットを定義します。
  • アセットジョブでは、機能、プロンプト、入力、出力、来歴、権利に関する注記、フォールバック、使用するシーンを定義します。
  • ビデオプランは、実際のプロトタイプの録画から始めます。生成ショットには明示的に印を付けてください。動作しないインタラクションを偽装するために生成ショットを使わないでください。

機能と利用可能なプロバイダーの対応付けは、実行時にのみ行ってください。必要なプロバイダーがない場合は、ジョブを blocked のままにして、不足している機能を正確に報告してください。

実行を手作業で編集せずに、プロバイダーの実行内容を記録してください。

node <skill-dir>/scripts/studio-run.mjs media \
  --project-root . --run <id> --job <job-id> --status complete \
  --provider <tool/model> --output <project-relative-path> \
  --provenance "<model · date · source inputs>"

5. 生成、構築、記録する

ラスターアセットを生成するのは、画像、テクスチャ、イラスト、映像、またはプロダクト素材に限ってください。UI の幾何形状、アイコン、最終的なコピーは、コードネイティブでアクセシブルな状態に保ってください。生成した最終ファイルを実行ディレクトリにコピーし、プロンプトと来歴を保持してください。

選択した方向性を、動作するプロトタイプとして構築してください。主要なナビゲーション、シグネチャーシーン、キャンセル/戻るの動作、モーション低減時のフォールバックを実装してください。コードとピクセルのゲートを通過した後、実際のプロトタイプを記録してください。必要に応じて、生成映像をラベル付きメディアとして合成できます。

CLI を使ってプロトタイプと録画のパスを保存し、その後 built に進めてください。

node <skill-dir>/scripts/studio-run.mjs output \
  --project-root . --run <id> --prototype <route-or-path>
node <skill-dir>/scripts/studio-run.mjs advance \
  --project-root . --run <id> --stage built
node <skill-dir>/scripts/studio-run.mjs output \
  --project-root . --run <id> --recording <project-relative-path>

6. 検証と納品

StyleSeed のスコアとビジュアル検証を実行し、その後、エビデンスゲートから Studio の検証結果を導出します。 Studio のエビデンスコマンドが保存するのは、計算済みの検証サマリーのみです。また、advance --stage verified は、以前に保存された合格結果を信頼せず、検証を再実行します。

node <skill-dir>/scripts/studio-run.mjs evidence \
  --project-root . --run <id> --evidence-run <gate-run-id>
node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage verified
node <skill-dir>/scripts/studio-run.mjs status --project-root . --run <id>

fail と blocked は、進捗状態として引き続き有用です。

node <skill-dir>/scripts/studio-run.mjs gate \
  --project-root . --run <id> --gate temporal --status blocked \
  --note "recording still missing"

gate --status pass は使用しないでください。pass を導出できるのはエビデンス検証ツールのみです。プロトタイプの URL は、 構築済みのプロトタイプの場所を特定するために使用できますが、エビデンスにはなりません。時間的な検証が必要な場合、録画はローカルのハッシュ付きファイルである必要があります。

実行フォルダー一式、実行可能なプロトタイプ、実際の録画、未解決のリスクを納品してください。洗練されたリールだけでは、Studio の実行は完了していません。

絶対に守ること

  • 選定するデザインの方向性は必ず1つにし、製品の言語も一貫させてください。
  • 高コストな生成や実装に進む前に、人が選定してください。
  • 保護対象のブランドアセット、コピー、商標登録された配置を複製しないでください。
  • 参考資料からの観察結果、プロバイダーの出力、ファイルパス、検証の合格結果を捏造しないでください。
  • 生成画像に、不可欠な UI テキストやインタラクションの意味を担わせないでください。
  • ピクセルと時間的な結果を確認せずに、実行を検証済みとマークしないでください。

コメント