mcpField
S
sddesign

sddesign

github.com/educlopezデザイン・UI403722 回インストール1 週間前に更新
リポジトリ

sddesign について

sddesign は ui-craft のコマンドをつなぎ、プロジェクトの brief とトークンから構築、収束、最終確認まで進める仕様駆動のデザインパイプラインです。既存成果物を検出して各工程の実行を提示し、省略した工程とその影響を報告します。

主な機能

  1. 01brief とトークン成果物の確認
  2. 02画面仕様の作成と保存
  3. 03構築とビジュアル収束の実行
  4. 04最終的な準備状況の確認
  5. 05省略工程と影響の報告

活用シーン

  1. 01段階的な新規 UI デザイン
  2. 02実装前の画面仕様の記録
  3. 03準備状況の確認と工程上の不足の把握

MCP 対応

パイプラインでは `/finalize` を実行でき、CI の選択肢として MCP ツール `score_ui` も挙げられています。

インストール

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

$npx skills add https://github.com/educlopez/ui-craft --skill sddesign

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

詳細

コンテキスト: このサブスキルは、より広範な ui-craft スキルを構成する視点のひとつです。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の個別の視点を適用してください。

$ARGUMENTS に対して、仕様主導のデザインパイプラインを実行します。ui-craft スキルを読み込んでください。


オーケストレーションのみのルール

このコマンドは、既存のフェーズコマンドを順番に実行します。それらのロジックを再実装または複製してはなりません。構成ルール、ワイヤーフレームのアルゴリズム、クラフトのルール、収束エンジンは、すべて各フェーズコマンドに含まれています。このコマンドが担うのは、次の処理のみです。

  1. ゲートの検出(成果物が存在するか)
  2. 実行の提案(フェーズ X を実行するか、スキップするか)
  3. 進捗の報告(チェックリスト)
  4. 縮退モードの明示(何をスキップし、それによって何が損なわれるか)

迷った場合は、手順をここに書き出すのではなく、フェーズコマンドを呼び出してください。


進捗チェックリスト

最初にこれを表示し、各ゲートの解決後に更新してください。

[ ] brief   [ ] tokens   [ ] shape (spec)   [ ] craft (build)   [ ] converge   [ ] ship

完了または成果物ありでスキップした項目には [✓]、現在のゲートには [>]、成果物なしでスキップした項目(縮退)には [–] を使用してください。


パイプラインのゲート

ゲート 1 — ブリーフ

確認:.ui-craft/brief.md は存在しますか?

存在する場合: brief §6 の学習済み制約と、アクセシビリティおよび正確性の最低基準が後続のすべてのゲートに適用されることを示し、[✓] brief とします。これらは spec.md の構成上の選択よりも優先されます。

存在しない場合: 今すぐ /brief を実行するか提案してください。

  • ユーザーが承諾した場合 → /brief を実行します。完了後、[✓] brief とします。
  • ユーザーが断った場合 → [–] brief とします。後続への影響として、「ブリーフがない → craft はスキルのデフォルト設定を使用します。構成はプロジェクトの原則に基づきません」と明記してください。
ゲート 2 — トークン

確認:トークンの骨格は存在しますか?(CSS 変数 --color-*、--font-*、--accent-*、トークンを含む Tailwind の theme.extend、またはトークンファイルを確認してください。)

存在する場合: [✓] tokens とします。

存在しない場合: 今すぐ /tokens を実行するか提案してください。

  • ユーザーが承諾した場合 → /tokens を実行します。完了後、[✓] tokens とします。
  • ユーザーが断った場合 → [–] tokens とします。後続への影響として、「トークンの骨格がない → craft は最小限のインライン・トークンセットを設定します。既存のシステムとは一致しません」と明記してください。
ゲート 3 — 形状(仕様)

既存画面の確認: /shape を実行する前に、.ui-craft/spec.md にこの画面の ## Surface: <name> ブロックがすでに含まれているか確認してください。含まれている場合は、shape を再実行して重複セクションを無条件に追加してはなりません。既存セクションを更新するか、shape をスキップするかを提案してください(仕様はすでに存在しています)。

$ARGUMENTS で説明されている画面に対して /shape を実行します。Shape は 5 ステップの出力全体(コンテンツの一覧、ASCII レイアウト、状態の一覧、未解決の質問)を生成します。

パイプライン内での保存(デフォルト): /sddesign パイプライン内では、shape のステップ 6 による仕様の保存がデフォルトであり、ユーザーが仕様ゲートを明示的にオプトアウトしない限り、自動的に確定されます。保存すると .ui-craft/spec.md が作成されます(または画面のセクションが追記されます)。これがパイプラインの目的です。

  • 保存が完了した場合 → .ui-craft/spec.md が作成されるか、画面のセクションが追記されます。[✓] shape (spec) とします。
  • ユーザーが保存を明示的にオプトアウトした場合 → [–] shape (spec, unsaved) とします。後続への影響として、「spec.md がない → craft(build)は shape の表示出力に基づいて構築します。受け入れ基準は保存されません」と明記してください。
ゲート 4 — クラフト(構築)

$ARGUMENTS の説明に一致する <surface> を指定して /craft <surface> を実行します。

/craft は構築前に Craft Read(references/craft-intent.md)を宣言します。宣言するのは、サーフェスの種類、対象者、テーマ/アクセント、DESIGN_VARIANCE、そして 1 つの シグネチャーベットです。シグネチャーベットはこのゲート内で構築し、収束や磨き込みの段階まで先送りしません。仕様セクションにコンポジションが記載されている場合、Craft Read はそれと一致している必要があります。

/craft は構築前に .ui-craft/spec.md を読み込みます。[✓] shape (spec) が設定されている場合、仕様で選択されたコンポジション、コンポーネント一覧、状態ラティス、受け入れ基準がレシピのデフォルトより優先されます。craft が完了を報告する前に、仕様の受け入れ基準の項目がすべて合格している必要があります。

[–] shape (spec, unsaved) の場合、craft はターミナルに出力された shape の内容に基づいて構築します。チェックリストに記録してください。

構築が完了したら、[✓] craft (build) にします。

ゲート 5 — 収束

../skills/ui-craft/references/loops.md の visual-anti-slop プリセットを実行します。このプロセスでは、ゼロ重大指摘のゲートに合格するか、予算を使い切るまで、「評価 → 1 つ修正 → 再評価」を繰り返します(デフォルトの予算:3 回)。

  • ループのゲートに合格した場合(重大な指摘がゼロ)→ [✓] converge にします。
  • 指摘が残った状態で予算を使い切った場合 → [>] converge (open findings) にします。ループレポートにある未解決の指摘を列挙してください。
ゲート 6 — 出荷

/finalize の判定を実行します。Finalize は、10 項目の仕上げ基準と brief/token ゲートに基づいて READY/NOT READY/BLOCKED を報告します。

最終判定と、解決済みチェックリスト全体を出力します。

[✓] brief   [✓] tokens   [✓] shape (spec)   [✓] craft (build)   [✓] converge   [✓] ship

劣化モードの誠実な開示。 いずれかのゲートが [–] になった場合は、その下流への影響とともに出荷判定に記載してください。

「スキップしたゲート:tokens(スキップ)→トークンの中核部分は検証されていません。shape(spec, unsaved)→受け入れ基準は保存されていません。これらの欠落により、出荷判定の確信度が下がります。」


優先順位

Brief §6 の学習済み制約と、アクセシビリティ/正確性の最低基準は、すべてのゲートで spec.md のコンポジション選択より優先されます。制約と spec.md の決定が矛盾する場合は、制約を優先します。仕様セクションをその選択に合わせて更新し、brief §6 の参照箇所を記録してください。

次のステップ: 出荷します。このパイプラインではすでに段階 1 から 3 まで進んでいます。.ui-craft/spec.md は次のセッションに引き継ぐ記録です。

コメント