mobile-first-website-design

モバイルファーストのウェブサイトデザイン

エビデンスに基づくマーケティングページを作成します。スタイルを含まない構造、独立したアイデンティティ策定フェーズ、厳密な画像プロンプト、最小幅から最大幅への実装、再現可能なリリース証跡を備えます。

使用する場面

エビデンスに基づくレスポンシブデザイン、実装、リリース検証が必要なランディングページ、キャンペーンページ、製品ローンチページ、マーケティングウェブサイトに使用します。アプリケーションのタスクフローにはプロダクトインターフェース用スキルを、メディアを横断するシステムにはより広範なデザインスキルを使用してください。

開始時の契約

リソースの前提条件：ここで指定するパッケージファイルを使う前に、mise run validateを実行してください。

ブリーフ、事実に基づく主張、コンバージョンイベント、オーディエンス、訪問者の状態、セクションごとの要件、アセット、インテグレーション、リリース対象、サポートするすべての幅を、正規のJSONに正規化してください。不足している事実はnullとブロッカーで表してください。捏造してはいけません。

作業開始時にブリーフとリサーチおよびインテグレーションを読み込んでください。

固定ワークフロー

1. 訪問者の状態を診断し、5つの要素から成るコンバージョンの流れを1つ確定します。
2. 各セクションの問い、答え、証拠、アクション、画像の役割、アクセシビリティ要件を定義します。
3. 利用可能なRefero、Mobbin、Lazyweb、直接のファーストパーティウェブルートを、定められた順序で使い、すべてのセクションを調査します。
4. ルートのステータス、ソースID、目に見える仕組み、関連性、応用方法、フォールバックを記録します。
5. 最小幅で、スタイルを含まないワイヤーフレームの流れをちょうど3つ作成します。
6. 各フローを、より大きいすべてのブレークポイントに昇順で再構成します。
7. 完成したフローを採点し、利用可能な判定スキルを実行します。スコアと安定IDによるタイブレークで選定し、wireframe_sha256を確定します。
8. そのハッシュが存在してから初めて、ビジュアルアイデンティティの方向性を3つ作成して採点します。
9. すべてのプレースホルダーを、名前付きの画像ジョブに変換します。
10. 各画像ジョブに対し、厳密なプロンプトを記録したYAMLレコードを1つ選び、利用可能なツールルートを1つ選定します。
11. 利用可能な画像機能で候補を生成または編集し、利用可能なピクセル検査機能でレンダリングされたピクセルを確認して、選定したアセットのバイト列を確定します。
12. 最小幅からスタイルを適用して実装します。
13. 次に進む前に各幅を検証しながら、より大きいすべてのブレークポイントに進みます。
14. 中断可能な動作と、動きを抑える設定との同等性を備えた、繰り返し使う動きの方針を1つ追加します。
15. すべての整数CSS幅を走査し、すべてのブレークポイント境界を確認します。
16. アクセス、Web Vitals、外部判定、ブラウザー、ネイティブ画像認識、再生の各ゲートを実行します。
17. 制限付きの修正パスは最大2回までとし、その後、完全、縮退、ブロックのいずれかのリリース状態を出力します。

構造とスタイルのゲート

ワイヤーフレームに含められるのは、階層、セクションの順序、コピーの密度、証拠の配置、アクションの優先順位、意味上の順序、レイアウトの構成、レスポンシブ時の再配置、画像ジョブのプレースホルダーです。色、書体、画像の処理、テクスチャ、グラデーション、シャドウ、装飾モチーフ、アイコンのスタイル、ロゴの処理、動きのスタイリングは含められません。

アイデンティティの作業に入る前にmise run validate-packetを実行してください。スタイリングでは、承認済みのワイヤーフレームハッシュを参照する必要があります。まずワイヤーフレーム、次にビジュアルアイデンティティを読み込んでください。

モバイルファーストのゲート

• 構造、スタイル、実装、動き、検証をすべて最小幅から開始します。
• 1以上の異なる整数幅をすべて、厳密な昇順で処理します。
• すべての調整内容を記録するか、文字列UNCHANGEDをそのまま記録します。
• 幅を大きくする際は、余白、列数、スケール、補足的なディテールを追加できます。必須コンテンツを削除したり、主要なアクションを弱めたりしてはいけません。
• 幅の重複、降順、スキップ、未記録がある場合はBLOCKED_BREAKPOINT_ORDERを返します。

画像ゲート

リソースゲート：ここに記載されたパッケージファイルを使用する前に、mise run validate を実行してください。

パッケージには、公開されている1,000件すべてのプロンプト文字列が、assets/prompts/ 内に非圧縮の UTF-8 YAML レコードとして含まれています。各公開文字列は、コミット済みの証拠に保持されたバイト単位で正確なネイティブソースから、決定論的に句読点を正規化したものです。ソースプロンプトのパスが正規 ID のまま維持されます。正規化済みのジョブフィールドからドメイン、レーン、視点を選択し、公開 YAML の prompt スカラーを正確に読み込み、そのバイト数と SHA-256 を検証してから、assets/tool-registry.json からルートを選択してください。

対応する作業には、利用可能な直接の画像生成または編集機能を使用してください。現在のモデル、キャンバス、プロジェクト、手法、またはアクションのワークフローが必要な場合は、Flora の search_docs と承認済みの Flora execute を使用してください。ローカルのノードワークフローには ComfyUI を使用してください。プロバイダーやモデルをユーザーに代わって選択しないでください。画像ルーティング を読み込んでください。

統合と縮退ゲート

リソースゲート：ここに記載されたパッケージファイルを使用する前に、mise run validate を実行してください。

Refero、Mobbin、Lazyweb、Flora、Impeccable、TasteSkill、および該当する Emil の手順を、それぞれ独立して確認してください。許可される利用不可ステータスは、UNAVAILABLE_AUTH、UNAVAILABLE_TRANSPORT、UNAVAILABLE_SCHEMA、UNAVAILABLE_SKILL、UNAVAILABLE_DISABLED です。

指定されたすべてのフォールバックを実行してください。利用不可のツールの判定を流用しないでください。調査、ビジュアル、判断、パフォーマンスの各最低基準は引き続き必須です。すべてのルートが合格した場合は PASS_RELEASE、フォールバックですべての最低基準を満たした場合は PASS_RELEASE_DEGRADED、それ以外は BLOCKED_CAPABILITY_FLOOR を使用してください。

Flora はネイティブ HTTP OAuth を使用して https://agents.flora.ai/mcp に接続します。トップレベルのツールは search_docs と execute です。課金を伴う生成には、費用、バッチ、ワークスペース、エクスポートへの影響を明記した明示的な承認が必要です。統合 と Emil の手順 を読み込んでください。

実装とパフォーマンスのゲート

リソースゲート：ここに記載されたパッケージファイルを使用する前に、mise run validate を実行してください。

メディアクエリに依存せず、最小幅で実装してください。その後、コンテンツ上必要な場合に限り、min-width ルールを昇順で追加してください。宣言された各ブレークポイントで、全幅スイープ、キーボードとピクセルのチェック、アクセシビリティチェック、ラボ指標を実行してください。

75パーセンタイルで、LCP <=2.5s、INP <=200ms、CLS <=0.1 と、宣言された FCP および TTFB の予算を満たしてください。CrUX または PageSpeed のフィールドデータは分けて保持してください。データがない場合は UNAVAILABLE_FIELD_DATA を記録してください。実装とパフォーマンス を読み込んでください。

判断とモーション

リソースゲート：ここに記載されたパッケージファイルを使用する前に、mise run validate を実行してください。

トリガーに該当する場合は、ロックされたデザインエンジニアリング、アニメーション、用語、Apple 指向、機会、改善、プロトタイプ、レビュー、UI ライブラリ、トーストの各手順を適用してください。モーションは状態、因果関係、方向認識、フィードバック、または控えめな喜びの演出を1つ支える必要があります。構成とモーション と 判断 を読み込んでください。

決定性

ソート済み UTF-8 JSON、安定した ID、固定クエリ制限、整数スコア、UTF-8 バイト順のタイブレーク、上限付き修復、ソースロック、SHA-256 を使用してください。選択した生成バイト列を固定してください。プロバイダーを再実行しても、リプレイの証明にはなりません。シークレットを保存したり、ウェブ、ブラウザー、ビジョン、バリデーター、アクセス、パフォーマンスの結果を捏造したりしないでください。

パッケージマップ

• 検証は、フィクスチャ、証拠、修復、再生を管理します。
• ソースカバレッジは、リビジョン、権限、ドリフト、プライバシーを管理します。
• mise run breakpoint-rulesは、ブレークポイントの完全性が昇順になるように適用します。
• mise run prompt-corpusは、公開プロンプトの正確なバイト列を検証して取得します。
• assets/schemas.jsonは、パケットの構造を定義します。
• assets/source-lock.jsonは、リビジョンとエンドポイントを固定します。
• assets/tool-registry.jsonは、トリガーとフォールバックを定義します。
• assets/prompt-manifest.jsonとassets/prompts/内の非圧縮YAMLシャードは、すべてのプロンプトを紐付けます。
• assets/fixtures/には、完全版、劣化版、名前付きの失敗パケットが含まれます。
• evals/は、8つのネイティブフィクスチャを、公開された動作、トリガー、速度、コントラクト、ルーブリック、マッピング、系譜の記録に紐付けます。
• 1エントリーのローカルゲートはmise run ciで実行します。完全なコマンドの証拠については、リリース検証、失敗の拒否、プロンプトコーパスの検証を参照してください。

リリース

リンクとロックが解決され、完全版および劣化版フィクスチャがバイト単位で同一に再生され、すべてのネガティブフィクスチャが指定されたブロックコードを返し、すべてのプロンプトとツールルートが検証され、利用可能な外部バリデーターに拒否がなく、利用できないルートがネイティブフォールバックでカバーされ、すべてのブレークポイントにブラウザー、ピクセル、アクセシビリティ、パフォーマンスの証明があり、凍結された成果物がプロバイダーを再実行せずに再生される場合に限り、リリースしてください。

ファクトリー実行コントラクト

受け入れられる成果は次のとおりです。レスポンシブブレークポイント全体でコンバージョン経路が使いやすい状態に保たれる、モバイルファーストのページを設計して検証します。最小のオーナーを変更する際は、現在のモバイルファーストのページ動作を維持してください。

1. mise run ciで現在のパッケージを凍結し、そのダイジェストを記録します。
2. mise run domain-research-policyを実行し、現在のモバイルファーストのページソースと反証を評価します。
3. 指定されたモバイルファーストのページ操作に対してmise run agentic-requestを実行します。意味上の選択はモデルに委ねます。
4. mise run decision-policy、mise run ci、動作評価を実行します。失敗した最下位のオーナーに戻ります。
5. mise run invocation-policy -- <receipt>を実行し、すべてのタスク、またはそれぞれのドメインに固有の未使用理由を明確にします。
6. 任意でmise run improvement-policyを実行します。保護対象の次元に悪化がなければ、変更する次元は1つだけにします。

契約が必要な場合に限り、mise run use-case-policyを通じてassets/use-case-contract.jsonを、mise run evalsを通じてevals/evals.jsonを読み込みます。

Miseは、再現可能な仕組み、順序、レシート、チェックを管理します。モデルは、解釈、因果関係の判断、創造的な作業、コードでは得られない直接的な知覚を担います。権限が不足している場合、証拠が古い場合、またはゲートに失敗した場合は停止してください。