sddesign について
sddesign は ui-craft のコマンドをつなぎ、プロジェクトの brief とトークンから構築、収束、最終確認まで進める仕様駆動のデザインパイプラインです。既存成果物を検出して各工程の実行を提示し、省略した工程とその影響を報告します。
主な機能
- 01brief とトークン成果物の確認
- 02画面仕様の作成と保存
- 03構築とビジュアル収束の実行
- 04最終的な準備状況の確認
- 05省略工程と影響の報告
活用シーン
- 01段階的な新規 UI デザイン
- 02実装前の画面仕様の記録
- 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 スキルを読み込んでください。
オーケストレーションのみのルール
このコマンドは、既存のフェーズコマンドを順番に実行します。それらのロジックを再実装または複製してはなりません。構成ルール、ワイヤーフレームのアルゴリズム、クラフトのルール、収束エンジンは、すべて各フェーズコマンドに含まれています。このコマンドが担うのは、次の処理のみです。
- ゲートの検出(成果物が存在するか)
- 実行の提案(フェーズ X を実行するか、スキップするか)
- 進捗の報告(チェックリスト)
- 縮退モードの明示(何をスキップし、それによって何が損なわれるか)
迷った場合は、手順をここに書き出すのではなく、フェーズコマンドを呼び出してください。
進捗チェックリスト
最初にこれを表示し、各ゲートの解決後に更新してください。
[ ] 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 は次のセッションに引き継ぐ記録です。