SHELEG Design は何をしますか？
概要
ページがシネマティックに見えるのは、多くのアニメーションからではなく、単一の情報源（計測されたスクロール位置）から多くの安価で、レイヤー化され、独立してデグラデーション可能な応答を駆動することにあります。スクロールを1つのストアに集中させ、レイヤーはフレームごとにそれを読み取り、それぞれの言語で反応します。何もクロスフェードしません——物事は再配置されます。すべてのレイヤーは静かな静的状態にデグラデーションします。
必須のリファレンス — シネマティックパスの場合： スクロール駆動ページを実装する前に SHELEG_DESIGN.md を読んでください。アーキテクチャ、モーフ数学、DOM↔WebGLブリッジ、ビルドレシピ（§11）、ファイルマップについて説明しています。プロダクトUIの作業はこの読み物を必要としません；もし必要となる唯一のルールはここに繰り返されています：パックのモーショントークンがSHELEGのデフォルトと異なる場合、パックが優先されます。
アニメーションの前の必須事項： MOTION_DOCTRINE.md を読んでください。SHELEG_DESIGN.md はモーションの構築方法を説明します；教義は構築すべきかどうかを決定します——高反復パスでアニメーションを無効にする頻度テーブル、イージングツリーと ease-in の禁止、持続時間の上限、禁止された形式、そして reduced-motion 契約についてです。
使用すべき場合
- モーションが明確な目標であるランディング/マーケティング/ヒーローページ；スクロールに連動したパーティクルまたはWebGL背景；スクロールリンクチャート、ステップフロー、レール、パララックス
- 既存のスクロールサイトが、不安定、ぎこちない、または位相がずれていると感じられる場合
- ロックされたビジュアルシステムが必要なプロダクトUI — ダッシュボード、管理画面、内部/開発ツール、トークン、ライト/ダーク — スタイルパックのみ、
workbench経由 - AIプロダクトサーフェス：チャットとエージェントUI、ストリーミング出力、実行ログ、モデルエラー、生成コンテンツと確認状態（
AI_PRODUCT_PATTERNS.md） - ビジュアルシステムをFigmaの境界線を越えて双方向に移動する場合（
FIGMA_BRIDGE.md）
シネマティックモーションレイヤーを決して適用しないもの： プロダクトUI、ドキュメントサイト、静的コンテンツサイト — またはビジュアルシステムやコピーがまだ完成していないページ。プロダクトUIはスタイルパックの半分だけを採用し、それ以外は何も使用しません。
コアパターン — 5つの原則、順に
- 1つのクロック。 すべてのモーションは1つの計測されたスクロール状態から派生します。どのレイヤーもスクロールを自分で測定しないため、レイヤーが位相から外れることはありません。
- フレームごとに読み取り、まれに通知。 ホットなコンシューマー（WebGL/キャンバス/レール）は、ストアを命令的に読み取り、フレームワークレンダリングはゼロです；大まかなact/セクションの変更のみがフレームワークに通知します。
- 保持してから再配置。 セクションの約80%でフォーメーションを保持し、その後、短い位相ずらしのアーク状のウェーブでモーフィングします。クロスフェードは禁止されています。
- 獲得されたモーション。 時間とともに状態を説明するインストゥルメントに対してのみスクラブ；ホバー/エントランスモーションは500ms未満に保ち、決してコンテンツをゲートしません。
- 静けさにデグラデーション。 Reduced-motion / 粗いポインター / WebGL非対応は、静的な完全に可読なページに縮退します。エフェクトはボーナスであり、依存関係ではありません。
スタイルパック
モーション方法論はスタイルに依存しません；ビジュアルアイデンティティは styles/ のスタイルパックから提供されます。各パックファイルは独自の完全な説明で始まります — この表は選択のためであり、パックの代わりに読むためではありません：
| パック | 外観 | 選択すべき場合 |
|---|---|---|
instrument-console | ほぼ黒の航空宇宙コンソール、1つのエレクトリックブルー、モノテレメトリ | テクニカル/システム/インフラ · コアコントラクト |
editorial-luxury | クリームとエスプレッソインク、セージアクセント、Fraunces/Newsreader | エディトリアル/リサーチ/プレミアムB2B · コアコントラクト |
workbench | 静かなライト/ダークプロダクトUI、境界線としての高さ、モノデータ | ダッシュボード/管理画面/内部および開発ツール（スタンドアロン） · コアコントラクト |
briefing-room | ダーク16:9デッキ、OKLCHの1つのブルーヒュー、ディザードアート | 投資家＆取締役会デッキ、ブリーフィング、ページとしてのトーク（スタンドアロン） · コアコントラクト |
atrium | クリームデイライト、1つのテラコッタ、写真の上のフルートガラス | コンシューマーヘルス、長寿、ウェルネス、高信頼DTC · コアコントラクト |
orchard | 温かみのあるオーツ麦スラブ、セージとキャンディオレンジ、ソフト3Dピル | フレンドリーなコンシューマーバイオテクノロジー、DTCウェルネス、キット＆サプリメント · コアコントラクト |
field-notes | グリーンキャスト紙、ヘアラインで罫線、ラストアクセント、トンボ | 監査可能性で販売されるオープンソースおよび開発者ツール（スタンドアロン） |
showroom | ホワイトギャラリー、ほぼ黒のインク、7層のフレーミングシャドウ | 最高の主張が画面上のアプリであるプロダクト中心の企業 |
blueprint | ホワイトストック、32pxグリッド、レジストレーションマーク、半径なし | 精度で販売されるインフラ — ベクトル検索、ストレージ、クエリエンジン |
prism | ハードエッジを持つ虹色のウォッシュ、モノボディ上のグロテスク | OSSインフラプロジェクトのフロントドア、最初のステップがコマンドである場合 |
maquette | ほぼ黒のテーブル、クリームのアクソノメトリックモデル、ペールアクア | アーキテクチャバイヤーに販売されるエンタープライズデータインフラ |
cyclorama | 32秒ループ上のパステルフィールド、タイプライターセリフ、オレンジフィル | エンタープライズAIトランスフォーメーションおよび応用AIコンサルタンシー |
scoreboard | 温かみのある紙、インクプライマリ、マークのみを行うホットオレンジ、ピクセル数字 | 累積する数字が主張である製品 — グロース、広告、SEO |
マテリアライズドキットは、コアパックが省略する部分の一部に答えます。 npx sheleg-design-skill --kit <pack> は src/styles.css を生成します。そのコンポーネント半分は、コアパックが指定を拒否する状態（:hover、:focus-visible、:disabled、選択済み）に対してオーサリングされたCSSです。これはこのスキルに同梱されていないため、このバンドルのみを読んでいるエージェントはそれらを発明することになります。最初にキットを取得し、キットとパックの間の相違を選択ではなく、いずれかの欠陥として扱ってください。
13のうち6つはコアコントラクト上にあり、それが得られるものを変えます。 コアコントラクトとマークされたパックは、## Components、## Hero、## Responsive、## Signature element を指定しません — したがって、コンポーネントごとの状態、開いたビューポートとその行の上限、折りたたみルール、およびページが記憶される単一の要素はあなたが決定するものであり、そうするときにそれを声に出して言います。他の7つは4つすべてに答えます。この非対称性は、ライブラリに関してあなたが値を発明し、それを読んだと信じ込む可能性が最も高いものです：コアパックが述べることは小数点第2位まで測定されており、その精度はそれが沈黙する半分に関する証拠ではありません。各パックは、そのRegisterの上にある Contract: 行で独自のレベルを宣言します。
何かをスタイルする前に、選択したパックを完全に読んでください — パレット、タイプ、テクスチャ、モーショントークン値、シグネチャーモチーフ、禁止事項が提供されます。各パックは styles/tokens/<pack>.css に既製のトークンレイヤーを同梱しています — 表を書き写す代わりに、そのファイルをそのままコピーしてください。新しいスタイルについては、styles/STYLE_PACK_TEMPLATE.md をコピーし、すべての見出し（Register / Palette / Type / Texture & surface / Components / Hero / Responsive / Motion tokens / Signature motifs / Signature element / Motion flavor（シネマティックパックのみ） / Micro-interactions / Bans / Gotchas）を保持し、同じ変更でその tokens/<pack>.css を作成してください；トークン値をアドホックに発明しないでください。
キャリブレーション — 3つのダイヤル
パックはどのレジスターかに答えます。どの程度かには答えません。同じパック上の2つのランディングページ、1つは規制対象の保険会社用、もう1つはデザインスタジオ用は、同じページではありません。3つのダイヤルがその違いを伝え、それらは一度、どのレイアウトも存在する前に、声に出して設定されます。
DESIGN_VARIANCE1–10 — 1は完全な対称性、10は意図的な非対称性で、2つのセクションが同じものはありません。MOTION_INTENSITY1–10 — 1は静的、10はシネマティックで物理的です。VISUAL_DENSITY1–10 — 1はギャラリーの壁、10はコックピットです。
ベースライン 7 / 5 / 4。 構築する前に値を1行の理由とともに述べてください；ユーザーにファイルを編集するよう求めず、あなたが宣言したことから静かに逸脱しないでください。
ブリーフから読み取る
| ブリーフが示すもの | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| ミニマリスト、静か、エディトリアル、「Linearのように静か」 | 5–6 | 3–4 | 2–3 |
| プレミアムコンシューマー、ブランド主導、「高級感がある」 | 7–8 | 5–7 | 3–4 |
| エージェンシー、ポートフォリオ、実験的、賞狙い | 9–10 | 7–9 | 3–4 |
| ランディング/マーケティングページ、他にシグナルなし | 7 | 5 | 4 |
| プロダクトUI：ダッシュボード、管理画面、内部ツール | 4–5 | 2–3 | 6–8 |
| 信頼第一：規制対象、公共部門、臨床 | 3–4 | 2–3 | 4–5 |
| プレゼンテーションデッキ | 5–6 | 1–2 | 3–4 |
| リデザイン、既存のアイデンティティを維持 | 一致 | 一致 +1 | 一致 |
| リデザイン、明示的な全面見直し | +2 | +2 | 一致 |
ブリーフは2つの行に一致する可能性があり、それらは3倍異なる場合があります。 「静かな内部管理ダッシュボード」は、「Linearのように静か」（DENSITY 2–3）と「プロダクトUI」（DENSITY 6–8）の両方を発火させます。優先順位ルール：サーフェスに名前を付ける行が、ムードに名前を付ける行よりも優先されます。 サーフェスはどれだけ収まる必要があるかを決定します；ムードはそれがどのように処理されるかを決定します — プロダクトUIパックでは、「静か」は色とモーションの抑制によって購入され、空虚によってではありません。2つが発火したときに、どの行を採用したか、そしてその理由を述べてください。
それらがどのように結びつくか
- 値ではパックが勝ち、量ではダイヤルが勝ちます。 ダイヤルが色、フェイス、または半径を発明することは決してありません — それらはパックのトークンレイヤーから来ます。グリッドがどれだけの非対称性を運ぶか、ページのどの程度が動くか、そしてどれだけ密に詰め込まれるかを決定します。
MOTION_INTENSITYは頻度テーブルによって上限が設定され、その逆ではありません。 設定画面での9は、それでもキーボードパスがアニメーションしないことを意味します。最初にMOTION_DOCTRINE.md§1 を読んでください；ダイヤルは、そのテーブルがカットした後に残ったものを上げます。- 主張されたモーションは表示されたモーションです。 4を超えると、ページは実際に動きます — ヒーロー上のエントランス、キーセクション上のリビール、プライマリアクション上の応答。7を宣言している静的なページは壊れています。動くモーションがスコープに収まらない場合は、ダイヤルを3に下げてきれいな静的なページを出荷してください；失速したり、途切れたり、ジャンプするモーションを中途半端に構築しないでください。
- スタンドアロンパックは独自の上限を固定します。
workbenchとbriefing-roomはシネマティックではありません；いずれかでMOTION_INTENSITYが3を超えることは、パックの誤読であり、大胆な選択ではありません。field-notesはデフォルトでスタンドアロンであり、シネマティックレイヤーをオプトインできます — その方法を説明する## Motion flavorセクションを持っています — したがって、ハードな上限がない唯一のスタンドアロンパックです。その上でダイヤルを上げる前にそのセクションを読んでください。
クラフトの基準 — 「完了」の意味（順に）
誰でもプロトタイプをプロンプトできるようになったとき、クラフトだけが残された唯一の差別化要因です。デザイナーがその意味をランク付けしました（Figma、State of the Designer 2026、n=906）：ビジュアルポリッシュ 58% · 思慮深い問題解決 47% · 明確で直感的なUX 36% · 感情と喜び 35% · 一貫性 15%。 それを完了の定義として、その順序で読んでください：
- ポリッシュ — パックが例外なく適用されている：トークン、リテラルではない。diff内のアドホックな16進数、半径、フォントサイズはありません。
- システム思考 — ビジュアル上の決定は1つの場所（トークンレイヤー、
SCENESレジストリ）に存在し、他のすべてがそれを読み取ります。 - 明確なUX — 構造と動作はこのスキルの担当範囲ではありません；フローと状態が決定されていない場合は、停止して最初にそれらを決定してください。
- 感情 — 獲得されたモーションのみ（原則4）、決して1–3を犠牲にしないでください。
- 一貫性 — すべての画面にわたって、1つのイージング、1つの持続時間セット、1つのアクセント、ジョブごとに1つの原子。
オンデマンドの負荷 — パックレイヤーが決定しない3つのこと
- シーンの深さ — 6つのレイヤー（
SURFACE_COMPOSITION.md）、シネマティックページのCSSを書く前に。シーンにはプレーンがあります；1つのプレーン上のすべては、どんな量のイージングも修復できない失敗です。 - チャート — パックを
datavizに渡す（同じファイル）、任意のパックでチャートを描く前に。トークン名は13全体で統一されていません — 解決されるのは--bgと--inkだけです — そして、未定義のカスタムプロパティはエラーにならず、静かにフォールバックします。推測することは、間違ったチャートを出荷する最も静かな方法です。 - モバイルサーフェス（
MOBILE_SURFACES.md）、ブリーフがネイティブアプリ画面またはモバイルウェブビューである場合 — 唯一のモバイル上の懸念が折りたたみであるデスクトップページではありません。各パックが単独で述べる5つのモバイルルール、どのパックも答えない6番目（タイプランプはユーザーのテキストサイズではなくビューポート幅に従う）、そしてどのパックも電話で決めない半分：プラットフォームの慣習。
パック間の選択 — 想像せずにマウントせよ
複数のパックが製品を運べる場合、それについて議論しないでください。それらをレンダリングしてください。
候補のパックを既存の、データが入力されたページにマウントしてください — 実際のヘッダー、実際のデータ、実際の密度 — ?variant=<pack> 検索パラメータで切り替え、ブラウザでそれらの間を切り替えてください。トークンレイヤーのみが変更されます；マークアップは変わりません。
プレースホルダーコンテンツのある使い捨てルートは真空です：すべてのパックがその中で問題なく見えますが、それがまさに何も解決しない理由です。実際にデータが入力されたページが本当にない場合、選択は時期尚早です — ブリーフのレジスターが指すパックでページを構築し、切り替えるための実際のものができたら再検討してください。ブリーフが全くシグナルを与えない場合、デフォルトはプロダクトUIには workbench、マーケティングページには showroom です：どちらも十分に静かなので、後で切り替えてもレイアウトは犠牲になりますが、アイデンティティは犠牲になりません。（以前は「デフォルトパック」とだけ書いて名前は挙げていませんでしたが、それはフォールバックとしては機能しません。）
比較用ハーネスは足場であり、成果物ではありません：決定を記録する同じ変更で除去されます。
AI駆動のプロダクトサーフェス
AI製品のデザインは、同じ調査で3番目に需要の高いスキル（37%）になっています — モーションやIAよりも — そしてサーフェスは新しいものです：ストリーミングするモデル、行動するエージェント、間違っている可能性のある回答。AIプロダクトサーフェスをデザインする前に AI_PRODUCT_PATTERNS.md を読んでください。