デザインデモ（疑似製品UI）は何をしますか？

最初にdesign-leanを読み込んでください。 そちらの方向性、クラフトルール、トークン、コンポーネントゲートがここでも適用されます。このスキルは、プロダクトショットに必要なものを追加します。デモ作業は、ページに製品プレビューが必要な場合はビルドのステップ5に配置し、デモ自体が作業全体の場合は単独で実行します。

デモ実行のゲート

ゲート	合格条件	残す証拠	キャップ	キャップ失敗時
D1 計画	配置、焦点オブジェクト、アクション、ペイオフ、除外するものをコードの前に文章化	計画書	—	—
D2 フレーム	表示幅と390pxでの静止画が、空、フラット、ボックス化されていないこと	2枚の静止画	2回のリフレーム	フレーミングの欠陥を明記して引き継ぎ
D3 リハーサル	ポスターフレームが設定されていること。両方の幅のコンタクトシートに、末尾のリストにない欠陥がないこと	コンタクトシート	3回のフィルムラウンド	残存する欠陥をリスト化して引き継ぎ
D4 ホストゲート	`gate.js`がホストページ自身のコントロール（Pauseを含む）で合格すること	ゲート集計	チェックごとに2回の修正試行	オープンイシューとして報告

セットアップ（再入力せず、抽出してください。各スキル読み込み時にベースディレクトリが表示されます）：

mkdir -p .design && for f in "<design-lean ベースディレクトリ>/SKILL.md" "<design-demo ベースディレクトリ>/SKILL.md"; do python3 - "$f" <<'PY'
import re, sys
for name, code in re.findall(r"`{3}js\n// file: (\S+)\n(.*?)`{3}", open(sys.argv[1]).read(), re.S):
    open(".design/" + name, "w").write("// file: " + name + "\n" + code); print("wrote .design/" + name)
PY
done

ミニチュア製品UI：信頼できるインターフェースで、その空間にフレーミングされ、1枚の静止画または1つのイベントが発生する短いアニメーションとして提示されます。閲覧者は画面を認識し、イベントが発生するのを確認できます。これらは、ブラウザの自動化ではなく、作成者が描いたイラストです。スクリプトはカーソルが押下する様子を描き、シーンを変更します。design-leanのクラフトルールとトークンは引き続き有効ですが、このセクションではプロダクトショットに必要なものを追加し、異なる部分ではdesign-leanのモーションをオーバーライドします。

唯一のアイデア： 実際の製品として読めること、閲覧者が必要とするものに簡略化されていること、意図を持ってフレーミングされていること、すべてのモーションに原因があること。

失敗する5つのパターン：

詰め込みすぎ。 すべての行に実際のテキスト、いたるところに数字、すべてが詰め込まれている。詳細が多いほど、生成されたように見えます。
ワイヤーフレーム。 2つの灰色の塊と1つのボタン。小さすぎるか、認識可能な要素が削ぎ落とされている。
ボックス化。 ウィンドウ全体が均等なマージンのカード内に縮められている：貼り付けられたスクリーンショットであり、プロダクトショットではない。
フラット。 すべてのオブジェクトが同じ境界線の同じカード内に同じ重みで配置されている。視線の着地場所がない。
退屈。 灰色のウィンドウとカーソル、ブリーフが何であれ同じ。ブリーフのルックとエネルギー（設計図、ガラス越しの色、Dynamic Island、マスコットなど）が重要です。このルールに従って、要求されたものを構築してください。

修正方法：静かなグレーで構成された完全な構造の画面。ストーリーが何についてかに関係する部分のみ実際の単語を配置し、残りはプレースホルダーバーを使用します。余白を確保し、ストーリーが伝わるようにクロップします。単語を簡略化しても、文脈は簡略化しないでください。空のコーナー、リストの下の空白、ペイン全体に広がる行、プレートの上に浮かぶウィンドウ：未完成であっても、落ち着いていないように見せない。

どれだけ力を入れるか。 あなたが評価されるローンチページのように構築してください。次に、あなたが知る中で最も厳しいデザイナーがフレームを見ると想像してください。間違った点をスクリーンショットして「これは何だ？」と送り返すデザイナーです：アバターから外れたドット、単独行になった単位、カードに触れているコピー。そのスクリーンショットが想像できるなら、次の修正点が見つかっています。

Stageshowキット

利用可能な場合は、これを使用します：Reactパーツ（Stage、Window、Phone、Row、Bar、Text、Roll、Count、Collapse、Fly、Connectorなど、ActスクリプトAPI付き）、約70のゴールド例と製品スタディ、コンタクトシートを撮影しフレーミングとモーションの欠陥をフラグ付けするscripts/film.mjs。プロジェクト内のstageshowスキルフォルダまたはkit/（stageshow.cssを含む）を探してください。そうでない場合は、ネットワークアクセスがあればインストールするか（npx skills add benjitaylor/skills --skill stageshow）、https://github.com/benjitaylor/skillsをクローンしてstageshow/から作業します。その後、そのSKILL.md、references/、最も近いゴールド例が詳細なルールとなり、このセクションは概要です。インストールすると、そのリポジトリ独自のパッケージスクリプトが実行されますが、サンドボックスによってはブロックされる可能性があります。キットがない場合は、以下のルールに従ってプレーンなReactまたはHTML/CSSで構築し、キットなしのフィルミングのセクションのスクリプトで撮影します。

実行

品質の大部分はコードを書く前に決まります。最初に計画を書きましょう：配置、焦点オブジェクト、アクション、ペイオフ、除外できるもの。

媒体と場所。 静止画またはアニメーション（ループ、ビュー内で1回、またはホバー時）。ページ、その背景、幅。表示されるサイズでデザインし、1:1で表示します：コピー横のヒーローで約720×340、全幅ヒーローで900～1100幅、カードで400×300。デモで約320幅未満は避けてください。ベントータイルやサテライトカードはそれより小さくてもかまいません。電話の列に収まるものは、358幅のコンパクトデザインにします（より近いクロップ、サテライトの削除または積み重ね）、単なる圧縮ではありません。
ルック。 製品のコードやサイトがあれば、実際のトークン、アイコン、クローム、単語を使用します。ない場合は、design-leanの方向性を実行します。忠実度を選択します：最小（すべてバー）、標準（意味を持つ場所に単語、それ以外はバー、デフォルト）、リアリスティック（すべての場所に実際のコンテンツ。ヒーロースケールの場合、名前付きの実際の製品、またはリストやページを主題とする静止画）。スタイル（かわいい、紙、ポスターカラーなど）のブリーフがある場合、このルールに従って構築されたそのスタイルを完全に適用します。
ストーリー。 製品が評価される点から形状を選びます：使用感（カーソルが1つの満足できるアクションを実行し、その結果が手元に表示される）、フロー（1つの連続したオブジェクトとして表示されるいくつかの画面、最後にペイオフ）、またはシステムが行うこと（結果が別の場所に現れ、リンクが見え、通常はカーソルなし）。3～5ビートとペイオフ、10～16秒。より豊かなストーリーとより落ち着いたフレームの間では、フレームを選びます。
ゴールドから始め、フレーミングする。 キットがあれば、最も近いゴールド例を撮影し、そのフォルダを開始点としてコピーします。ステージサイズ、クロップ、行とタイプのサイズ、スペーシング、ビートを保持し、そのルックとコンテンツをブリーフの製品に置き換えます。名前だけを変更したコピーは完成ではありません。キットがない場合は、以下の表からレイアウトを選び、同じようにそれに従います。モーションの前にフレーミングします：両方の幅で1枚の静止画を撮影します。必要以上に空、フラット、ボックス化されている場合は、最初にフレームを修正します。
画面。 実際の文字列を数えます。通常3～7個：要素ではなく単語の予算。すべてのコントロールのテキストが移動する前に収まるようにします。カーソルが触れるものをDOMから測定します。絶対的な位置をハードコードしないでください。
コレオグラフ。 マウントされたままのものを維持し、トグルして終了アニメーションが発生するようにします。オブジェクトだけでなく、関係性をアニメーション化します：新しい行はその下の行を運びます。サイズ変更するサーフェスはテキストを引き伸ばしません。ビートは重なり、グループはスタガーし、ペイオフは保持され、ループは開始位置で終了するか、目に見える原因でリセットされます。
リハーサル。 最初にポスターフレームを設定します：単独でストーリーを伝えるビート。変化の途中でキャッチされたものではなく、結果が画面に残っているもの。次に、静止画だけでなく、ループ全体を撮影します：表示幅と390pxでのコンタクトシート。すべての押下、メニュー、モーフ、ループの継ぎ目をフレームごとにステップ実行します。静止画ではポップアップを表示できません。最初に最大の目に見える欠陥（フレーミング、次に階層、次にモーション、次にポリッシュ）を修正し、再撮影します。キャップ：3回のフィルムラウンド。その後、残った欠陥をリストにして引き継ぎます。自問自答：目が最初に着地するのはどこか、それは結果か？1つのウィンドウ、タイル、またはデバイスが明確にリードしているか？「いいえ」があれば、それが最大の欠陥です。合格するスクリプトは必要ですが、十分ではありません。簡単なメモを添えて引き継ぎます：開始したゴールドまたはレイアウト、変更点、確認しなかった点。

フレーミング

1つのヒーローオブジェクト、最大1～2つのサテライト（レシート、電話、詳細カード）がポイントを伝えます。製品を識別するもの（タイトル、実際のクローム、アクションに理由を与える行）を維持します。ロゴとナビはオプションです。
フィラーのみをクロップします。 ペイオフ、アクション、カーソルが触れるもの、すべての実際の単語は完全なままにします。クロップによってスライスされるプレースホルダーアクションは、スライスせずに削除します。ステージエッジによってスライスされたボタン、チップ、シャドウは通常の欠陥です。
ヒーローの10～40%をステージ外にクロップします。 ウィンドウまたは電話はステージ幅の少なくとも3分の2を占め、エッジからはみ出します。ステージはすべてをマスクします（overflow: hidden）。
ページが背景です。 白または暗いページでは、ウィンドウの後ろにプレートを置かず、ウィンドウを四方に空気のある完全な状態にしません。それは浮いて見えます。フレームなし（完全、中央揃え、シャドウと同じくらいの均等なマージン）は、開発者が要求した場合のみです。
1つのガター。 最終的なクロップで測定します。すべてのエッジ距離がそれに一致するか、完全なガターか、十分に離れている必要があります。24px未満でそれを横切るか、数ピクセル手前で止まるのは間違いです。
サテライトはヒーローのエッジにまたがり、約半分が外側に配置されます。 クローム（サイドバー、ヘッダー、マージン）の上に配置し、コンテンツの上には決して配置しません。2つのサテライトは、異なる種類とサイズにします（カードと実際のサイズの通知）。同一のカードを2つ積み重ねることはしません。アンカーされたUI（ポップオーバー、メニュー、トースト）はサテライトではありません。製品が配置する場所に配置します。
ウィンドウはデバイスの形状を維持します： 1.25:1以上では完全な状態。ブリードしている場合、表示される部分は少なくとも正方形。クロップで修正し、押しつぶしてはなりません。
ストーリーが開くものはフレーム内に留まります。 すべてのフレームで各エッジからガター分の距離を保ちます。オーバーレイに余裕を持たせるようにトリガーを配置します。静止時またはループ内のどこにもデッドコーナーを作らないでください。
フラットで正面から始めます。 奥行きはシャドウ、z-order、スケール、不透明度で表現します。傾きはそれが価値を発揮する場合のみ（緩く積まれた紙の山）、パースペクティブは要求された場合のみ使用します。
電話： サテライト電話は、ウィンドウの表示幅の40%、かつ少なくとも220pxから始めます。縮めるよりも下部をはみ出させます。通知は実際のiOSの比率を維持し、決してカットしません。上部でクロップされた電話は、ステータスバーとナビゲーションバーを同時に失います。ステータスバーやホームインジケーターを手動で描かないでください。キットまたは実際のリファレンスからフレームを取得します。

レイアウト	ヒーロー	使用目的
固定、下部ブリード	左、右、上に8～12%インセット。下部に15～35%はみ出し	フィーチャーカードとベントータイル
コーナーブリード	上と左に10%インセット。右と下に15～35%はみ出し。サテライトは左または下の端	コピー横のヒーロー
ガター付きステージ	色付きステージの各辺に8～20%インセット、下部からはみ出し	ブランドの瞬間
サテライトフォーカス	ヒーローをハードにクロップ。大きなサテライト（ヒーロー幅の30～40%）がストーリーを伝える	小さなもの：通知、レシート、差分
ワイドヒーロー	1:1で900～1100pxのウィンドウ、下部からはみ出し。リアリスティックな忠実度	全幅のホームページヒーロー
デバイスペア	デスクトップは75～80%幅、下部からはみ出し。電話は右端にまたがり、3分の1が外側	クロスデバイスストーリー
同一多数	1つのもののグリッドをすべての端からはみ出させる。1つのタイルが奥行きでフォーカスされ、単語がある唯一のもの	反復としてのスケール表示
フェードクロップ	ウィンドウを上部と側面にインセット、最後の3分の1でマスクアウト、フェード下はフィラーのみ	エッジが任意の線でウィンドウをカットする場合
クローズアップ	ウィンドウ全体を1.3～1.6倍、クロームも含めて、対象行は完全	1つのコントロールに関するカード
製品上のパネル	製品のマージンの上に設定パネル、変更されたものへの1つの中立的なリーダー	設定とその効果
対角コーナー	コピーは左下。製品は右上隅から吊り下げ	コピー行付きベントータイル

ベントーグリッドは1つのセットです：1つのヒーロータイル、次にウィンドウ、統計、オブジェクト、図。それぞれが異なる種類です。タイルの前にグリッドを計画します。

静止画フレーム

抑制。 実際の文字列は、タイトル、操作対象、入力内容、結果にのみ使用します。残りはバーです。バーは端のフィラーであり、視線が着地する場所のバーは未完成に見えます。ストーリーがリストに触れる場合、2～3行の実際の行。小さなサーフェスでは、行は1行：アバター、名前、値。プレースホルダーの幅は行ごとに異なります（60、45、70、52）。ラベルと値は一致させます：両方とも単語、または両方ともバー。1つの数字だけは大きくしてもかまいません。機能のシグナルは1回だけ述べ、ヘッダー、サテライト、すべての行で繰り返さないでください。
ドメインのシグネチャコンテンツを維持します： アルバムアート、サムネイル、アバター（各名前付きアバターは独自の色）。置き換えると、一般的なリストになります。
架空の名前のマストヘッドは使用せず、ブリーフがそれに依存し、実際の製品がそこにそれを表示する場合を除き、画面上に製品名を表示しません。疑似アプリのタイトルはdivで、h1からh6は使用しません。デモは誰かのページアウトライン内に存在します。
タイポグラフィ： 実際の11～15pxのUIサイズを使用し、ステージでスケーリングします。7pxは使用しません。小さなテキストの行間は少なくとも1.3。等幅フォントはコード、識別子、整列した数値のみに使用します。
スペーシング： 単語は、任意のウィンドウ、カード、パネル、ホバーされた行の端から12pxのインセットを維持します（8px未満は不可）。バーはブリードしてもかまいませんが、単語はしてはいけません。行のパディングは12px、密集したリストでは8px。タイトルとそのサブタイトルは4～6px離します。ボタンはその上のフィールドから8px以上離します。ニアタンジェントは避けてください：1～3px離れたエッジは事故と読まれます。正確に整列させるか、少なくとも8px離します。
光学的センタリング： ピル、ボタン、アバター内のラベルをその文字で中央揃えにします（text-box: trim-both cap alphabetic）。中央揃えの金額はその数字を中央揃えにし、通貨記号はright: 100%で外側に吊り下げます。
アイコンはセットから使用し、手書きは禁止です： 最初に製品自身のパック。次に、意図的に選択された1つのセット（Appleクローム用のSFスタイル、Android用のMaterial Symbols、それ以外はPhosphor、Iconoir、Radix、Tabler、Heroicons、Lucide）、1つのサイズ（14～16px）、シーンごとに1つのストローク。14px以下では塗りつぶし。絵文字はコンテンツであり、アイコンではありません。他の製品のロゴは、オリジナルの比率の実際のマークであり、類似品ではありません。
AI機能： スパークル、ワンド、星、AIカラーとしての紫は使用しません。AIが何をするかを表示します（送信された質問、思考、高さとともにストリーミングされる回答、最後にソース）。製品自身のアイコンがスパークルであっても、それを使用してもかまいません。
発明しないでください…

…（翻訳のために一部省略）

デザインデモ（疑似製品UI）