デザイン&モーション · daymade/claude-code-skills

interaction-design-board

単一のプロダクト画面に対して実際に動作する全く異なる複数のHTMLインタラクションプロトタイプを生成し、それらをインタラクティブなDesign Boardに統合して、構造化された選択/リミックスのフィードバックを収集した上で、承認された挙動のみをプロダクション実装へと引き渡します。クリック可能な複数のUIバージョン、インタラクションの代替案、段階的開示(progressive disclosure)の選択肢、Design Board、HTMLプロトタイプ、プロダクトデザインにおけるテスト時スケーリング(test-time scaling)が求められる場合や、視覚スタイルには問題ないものの情報階層、ワークフロー、レイアウト、インタラクションが依然として洗練されていないと感じられる場合に使用します。クリック、展開、選択、フィルタリング、状態遷移の後に何が起こるかによって意思決定が左右される場合は、静的画像による検討よりもこちらを優先してください。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT(仓库根 LICENSE;GitHub API spdx MIT)Commit d5c4678cb5
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

プロセスの関門:まずDecision Contract(ユーザーの目的/決定スコープ/変更不能な事実/既存のデザイン言語/ファーストビューの不変条件/インタラクション状態/終了条件)を凍結し、その後に3つの独立したインタラクション設計候補(コマンド優先/キュー詳細/オブジェクト主導/比較主導/レジャー優先などのファミリ)を提案します。各候補は単なる見た目の差し替えではなく1つのインタラクション仮説であり、変数として変更するのはナビゲーション/選択/開示/アクションの帰属/情報順序のみに限定します。

daymade-codex/interaction-design-board/SKILL.md
Each candidate embodies a distinct interaction hypothesis rather than a skin.
SKILL:『Decision Contractを一定に保つこと。カラー、コピー、データを一度にすべて変更するのではなく、ナビゲーション/選択/開示/アクションの帰属/情報順序を変更すること』。静的画像は裏付けの証拠に過ぎません:『スクリーンショットでは折りたたみ状態、キーボード操作パス、選択モデル、タスクの引き継ぎを証明できない』。

build_board.py はコンプライアンスのゲートウェイ:board.json(schemaVersion=interaction-design-board/v1)を読み込み、2〜8個のバリアントであること、バリアントファイルがmanifestのディレクトリを逸脱せずシンボリックリンクでないこと、sha256による重複排除(バイト単位で同一なものは拒否)、各バリアントが自己完結型HTMLであること(外部script/img/link/poster/url()リソースの禁止、CSS @importの禁止、title必須、<base>禁止)を検証した上で、テンプレートを埋めて単一ファイルのBoardを出力します。

daymade-codex/interaction-design-board/scripts/build_board.py
f"{field} depends on external resource {locator!r}; inline it as CSS, JS, or data URL"
resolve_variant はパストラバーサルを防ぐために 'candidate.relative_to(root.resolve())' を検証します。validate_self_contained は StyleBlockExtractor を用いてコメントやraw-textコンテナを無視した上で @import を検査します。'variants must contain between 2 and 8 candidates' を強制します。

実行時分離=テンプレート注入CSP + srcdoc sandbox iframe:各候補はsrcdocフレーム内にカプセル化され、Boardは default-src 'none' のCSP(unsafe-inline のスタイル/スクリプトおよび data:/blob: メディアのみ許可、connect-src/frame-src/object-src/form-action は全面禁止)を注入し、さらに sandbox='allow-scripts allow-forms allow-modals' を重ねて適用します。

daymade-codex/interaction-design-board/assets/design-board-template.html
policy.content = "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; media-src data: blob:; font-src data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"
securedCandidateHtml は候補HTMLを documentCopy に複製し、CSP metaを先頭に追加(prepend)してから srcdoc に設定します。frame.setAttribute('sandbox', 'allow-scripts allow-forms allow-modals')。SKILL:『Boardはすべてのサンドボックス化された候補にネットワークを拒否するContent Security Policyも注入するため、動的JavaScriptが未宣言の実行時依存関係を作成することはできない』。

テスト時スケーリング(test-time scaling):独立したワーカーコンテキストが存在する場合、1つの候補に対して1つのワーカーを割り当て、同一の凍結されたContractを共有しつつ、相互の出力を不可視に保つことで、類似案への収束を防ぎます。ワーカーが存在しない場合は直列に生成しますが、直前の候補ではなく凍結されたContractを再読み込みして処理します。

daymade-codex/interaction-design-board/SKILL.md
assign one candidate to each worker with the same frozen decision contract and only that candidate's hypothesis. Do not let workers see one another's output.
SKILL:『この分離こそがテスト時スケーリングのメカニズムである。類似した案へ収束させることなく、明確に異なる仮説を維持する』。

フィードバックループ:Boardが feedback.json / feedback-pending.json(regenerated:true の場合は regenerateAction iterate|remix を含む)を送信 → エージェントは承認された部分を保持し、失敗した軸を変更して、影響を受ける候補のみを再生成 → Boardファイルをバージョン管理 → gstack serve が既に存在する場合は POST /api/reload(レスポンス: {"reloaded":true})を実行。重複して serve を起動してもリロードとは見なされません。

daymade-codex/interaction-design-board/SKILL.md
curl -sS -X POST "${BOARD_URL%/}/api/reload" \ -H 'Content-Type: application/json' \ -d '{"html":"<absolute-versioned-board-path>"}'
テンプレートの deliver():__GSTACK_SERVER_URL または http(s) プロトコルが存在する場合はまず POST ./api/feedback を試行し、失敗時またはローカルファイルモードでは feedback.json をダウンロードします——『レスポンスの成功やファイルのダウンロードは転送の証拠であり、承認ではない』。

プロダクション実装の関門:ユーザーがフィードバック要約を確認した後に初めて approved.json(選択結果/承認されたインタラクションルール/ファーストビューの不変条件/却下されたトレードオフ/実際に検証された状態/残された未知の事項/プロトタイプファイルの識別情報)を書き込み、その後にプロダクト実装へと進み、実ブラウザで同一の代表タスクを検証します——ピクセル単位の類似性だけでは完了と見なされません。

daymade-codex/interaction-design-board/SKILL.md
Then—and only then—implement in the product.
SKILL末尾の制約事項:『作成者自身のクリックスルーによるユーザビリティ検証を主張してはならない。エージェントのQAは破損した状態を検出し、ユーザーによるタスク観察がインタラクションを決定する』。

2コア機能

01複数の実行可能なHTMLインタラクションプロトタイプ候補の生成(同一のビジネス事実/デザイン言語のもとでインタラクション設計を変更)
02board.json の準拠ビルド:2〜8個のバリアント、sha256重複排除、自己完結性の強制、パストラバーサル/シンボリックリンクの拒否
03CSP+srcdoc sandbox によるプロトタイプの2層実行時分離(ネットワーク/ネスト/ポップアップの全面禁止)
04構造化されたフィードバック収集と名前付きリミックス(feedback.json/feedback-pending.json スキーマ + バージョン管理されたBoard + /api/reload)
05ワーカー分離による並列生成(テスト時スケーリング、案の収束防止)
06承認ゲートとプロダクションへの移交(approved.json → プロダクト実装 → 実ブラウザでのタスク検証)
07Board内タスク観察プロトコル(最初に気づいた点/次のステップの把握/開示が役立ったか妨げになったか/自然な遷移か予期せぬ状態遷移か)

3外部依存関係

KindDependency / Endpoint
clipython3(build_board.py,纯 stdlib)
cligstack design 可执行(可选:serve Board + /api/feedback + /api/reload;未装则开文件直用)
clicurl(可选:Board 重载探测/触发)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: python3 build_board.py(標準ライブラリのみ使用;manifestとバリアントHTMLを読み込み、design-board.htmlを出力)
  • 环境变量 / API Key: ベンダーサービスAPIキーの読み取り: なし
  • 本地工作目录: ファイルの読み書きと成果物の出力: build_board.py が session-dir/design-board.html を書き出し、エージェントがプロセスに従って session-dir に boa を書き出す
監査ノート: 標準ライブラリのPythonスクリプトを使用し、session-dir 配下のローカルファイルに書き込みを行い、外部へのネットワーク送信(レンダリング層でもネットワークを禁止)や認証情報の読み取りは行いません。オプションの gstack design serve はローカルサービスとして動作します。ディスク書き込み対象はセッションワークスペース内の成果物および(承認後の)プロダクトソースコードに限定され、後者はタスク本来の目的でありユーザー確認ゲートによって制御されます。破壊的または削除を伴う操作は含まれていません。

5二重目の独立検証

  • [ok] 穿越/symlink/外部资源拒绝 — resolve_variant: symlink 拒 + relative_to(root) 校验;validate_self_contained: RESOURCE_PATTERNS 扫 script/img/link/video/url(),仅放行 data:/blob:/about:。
  • [ok] CSP 断网声明 — 模板 241 行 CSP 含 connect-src 'none'; frame-src 'none'; object-src 'none';srcdoc + sandbox allow-scripts allow-forms allow-modals 双保险。
  • [ok] sha256 去重与变体数上限 — seen_hashes 重复即 ContractError;'2 <= len(variants) <= 8'。
  • [ok] 无网络外发/凭证 — build_board.py imports 仅 stdlib(argparse/hashlib/html/json/re/sys/html.parser/pathlib);无 http/密钥。
  • [unlocatable] gstack serve/reload 集成 — 依赖外部 gstack 工具(仓库外),本环境未安装;SKILL 中 serve/reload/反馈端点语义无法端到端验证,代码侧仅见模板对 __GSTACK_SERVER_URL 与 ./api/feedback 的 POST。
  • [unlocatable] Board 内候选交互可用性(UI 层) — 模板 434 行含 tab/对比视图/反馈面板 JS,未在浏览器实测;fixtures+test_build_board.py 覆盖构建层而非视觉层。

6結論

  • 『実行可能、クリック可能、比較可能』を成果物の絶対条件とし、静的画像は裏付けの証拠としてのみ扱う点
  • ビルダーがセキュリティやコンプライアンスを単なる推奨ではなく厳密なバリデーション(パストラバーサル、外部リンク、重複、欠落状態の完全拒否)として強制する点
  • CSP/sandbox レベルまで徹底された実行時分離:候補のJSは物理的にネットワーク接続やフレーム埋め込みが不可能
  • ワーカー分離型の並列処理により、テスト時スケーリングをプロダクトデザインのプロセスに具体的に落とし込んでいる点
  • 厳格なプロダクションゲート:approved.json の作成前には製品コードに手を加えず、QAのクリック検証をユーザー検証と偽らない点
  • 最適な用途: インタラクションの不確実性が高い単一画面/単一フローの意思決定に最適:階層構造、ワークフロー、段階的開示、選択モデル、タスクの引き継ぎなどが『何となく洗練されていないが、どこが悪いのか言葉にできない』場合に実用的な比較を提示できます。並列仮説生成(テスト時スケーリング)を行うマルチワーカー環境や、design-style-picker とのリレー連携(視覚スタイルを決定した後にインタラクションを比較)、gstack シリーズとの協調運用に適しています。
    不向きな用途: 1行のCSS調整や、既に承認された仕様に基づく単純な実装タスクには不向き(SKILLで明記);ブラウザや gstack が存在しない純粋なテキスト環境には不向き(Boardは人間がクリック操作することを前提とするため);意思決定が『クリックした後に何が起きるか』に依存しない静的な視覚選択には design-style-picker を使用すべきです;プロトタイプデータとして実バックエンドのレスポンスを必須とするシナリオには不向き(SKILLは誠実なローカル状態を要求し、製品に存在しないバックエンドのモック作成を禁止しています)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload interaction-design-board.tar.gz
    sha256: bb7d5b878d07fe8e…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d5c4678cb5.