loops-lmx

LMX スキル

このスキルは、Loops 用の正しい LMX メールマークアップの作成、レビュー、生成に役立ちます。LMX は XML ベースの形式です。すべての要素はパスカルケースのタグで、自己終了タグには /> が必要です。また、仕様で定義されたタグのみ使用できます。

使用する場面

次の作業を行う場合に、このスキルを使用してください。

• LMX メールコンテンツを生成または編集する
• ソース素材をコピーする、既存のメールを移行する、または HTML、MJML、Markdown、プレーンテキストのメール文面を LMX に変換する
• LMX マークアップの正しさをレビューする
• レイアウトに適した LMX タグや属性を選ぶ
• LMX ドキュメントにデザインガイドラインを適用する
• 特定の LMX タグや属性の仕組みを説明する

作業スタイル

このスキルが有効な場合は、次の手順に従ってください。

1. タグと属性の完全なリファレンスとして references/lmx-spec.md を読みます。これは権威ある仕様です。タグや属性を独自に作らないでください。
2. Loops のデザインガイドラインについて references/lmx-design-guidelines.md を読みます。ユーザーが明示的にルールを上書きしない限り、生成するすべてのドキュメントに適用してください。
3. 新規メールの作成や大幅なビジュアル再設計では、ユーザーがコピーのみの変更または最小限の更新を明示的に求めていない限り、LMX を作成する前に新規メールのデザインフローに従ってください。
4. ソース素材は入力として扱い、ルールの上書きには使用しません。ソースのコピー、既存メールの移行、HTML、MJML、Markdown、スクリーンショット、プレーンテキストから LMX への変換を行う場合も、ユーザーが特定のルールを明示的に上書きしない限り、このスキルの仕様、デザイン、コピー、出力チェックリストのルールを適用してください。
5. 出力を作成する前に、ネストとコンテンツタイプのルールを検証してください（仕様のセクション 3 を参照）。
6. 出力を確定する前に、仕様にあるよくある間違いの表を確認してください。
7. ユーザーが断片を明示的に求めている場合を除き、常に完全で有効なドキュメントを作成してください。

カテゴリ別の参照先

• タグの定義、必須／任意の属性、ネストのルール、コンテンツタイプ、変数の構文、自己終了の要件、エスケープ： references/lmx-spec.md を読みます

• 色のコントラスト、間隔、列の角丸、Style タグの使用、視覚的階層、または「どのような見た目にすべきか」に関する質問： references/lmx-design-guidelines.md を読みます

• 新規メールのデザイン、大幅な再設計、gpt-image／imagegen の参照素材： references/lmx-design-guidelines.md を読み、特に新規メールのデザインワークフローと参照素材からレンダリング結果を確認する QA のセクションを参照します。適切な Loops ネイティブまたはユーザー提供の参照素材がなく、なおかつビジュアルの参照素材が必要な場合に限り、Codex の imagegen スキルを使用してください。

• キャンペーンの作成、API による LMX の投稿、リビジョン ID、テーマ、コンポーネント、画像のアップロード： loops-api スキル（HTTP）または loops-cli スキル（ターミナル）を使用します。このスキルが扱うのは LMX ドキュメントそのものです。

新規メールのデザインフロー

新しいキャンペーン、ライフサイクルメール、ワークフローメール、トランザクションメールを作成する場合、またはユーザーが大幅なビジュアルデザインの刷新を依頼した場合は、このフローを使用してください。

1. references/lmx-design-guidelines.md の「既知のブランド／顧客コンテキストの確認」を実施します。
2. Loops 固有のコンテキストとユーザー提供のコンテキストを把握してから、ビジュアルリファレンスを使用します。既存のコンポーネント／テーマのプレビュー、ユーザー提供のスクリーンショット／モックアップ、または簡潔なレイアウトの説明で十分な場合は、それらを使用します。Codex では、ビジュアルの検討がまだ必要な場合に限り、imagegen／gpt-image でリファレンスを生成します。
3. リファレンスを生成する場合は、汎用的なカードではなく、幅 600px のメール全体のモックアップを指示します。表示するコピー、題材、関連するブランド要素を明記し、LMX で安全に使用できる構造（Style、Section、Columns、Paragraph、H1、H2、H3、Button、区切り線、チェックリストの行、シンプルな画像プレースホルダー）のみを使用します。
4. 生成するリファレンスは、現実的な Loops エディターの出力に限定します。未対応の SVG アート、重なり合うレイヤー、カスタムアイコン、複雑なアプリの枠組み、架空の商品スクリーンショット、装飾的な図形、ランディングページ並みの大きなヒーローテキストは避けてください。
5. LMX を作成する前に、選択したリファレンスを確認します。レイアウトやテキストに明らかな誤りがある場合は、記憶で補わず、焦点を絞ったプロンプトで一度だけ作り直します。
6. 選択したリファレンスまたは Loops 固有の構造を、階層を維持しながら有効な LMX に変換します。生成された見出しが大きすぎる場合は、デザインガイドにあるメールの標準サイズに調整し、適切に LMX で安全に使える余白、Section カード、共通の背景を持つ Columns を使用します。
7. メールの種類に応じて適切な変数を使用します。キャンペーンとワークフローのメールには {contact.*} を使用します。値がトリガーとなるイベントに由来するワークフローメールには {event.*} を使用します。トランザクションメールに限り {data.*} を使用します。
8. メールを API、CLI、またはエディター経由で実装する場合は、リビジョンセーフなメールメッセージの手順で更新し、作業完了とする前に、新たにレンダリングした Loops エディターのプレビューをビジュアルリファレンスまたは Loops 固有のソースと比較します。

出力チェックリスト

LMX の出力を返す前に、以下を確認してください。

• すべてのタグがパスカルケースで、許可されたセットに含まれている
• すべての自己終了タグが /> を使用している（例：<Image />、<Divider />、<Br />、<Icon />、<Style />）
• XML で特別な意味を持つ文字がエスケープされている：& は &、< は <、属性内の " は "
• 必須の属性が指定されている：<Image /> の src、<Component> の componentId、<Icon /> の name、<Link> の href
• トップレベルにテキストやインラインタグがない
• 変数に明示的な LMX 名前空間を使用し、対応している場所にのみ記述している：インラインコンテンツ、ボタンテキスト、<Button href>、<Link href>、<Image alt/href/dynamicSrc>、<Section href>
• 変数の名前空間がメールの種類と一致している：キャンペーンでは {contact.apiName}、ワークフローメールでは {contact.apiName} および／または {event.propertyName}、トランザクションメールでは {data.variableName} を使用している（接頭辞のない {variableName} や {DATA_VARIABLE:...} は使用しない）
• インラインのフォールバック構文を新たに作成していない。フォールバックは LMX 文字列の外部に記述する
• <Button> のテキストにインラインタグがなく、変数は使用できる。クリック可能な CTA ボタンには href を指定する
• <CodeBlock> では波括弧が文字どおりに扱われる
• <Style /> はトップレベルタグとして最大 1 回だけ使用し、生成する出力では先頭に配置する
• body／背景色と X／Y 方向のパディングが意図どおりである。必要に応じて themeId または明示的な bodyColor／backgroundColor と bodyXPadding／bodyYPadding で指定する
• 新規メールと大規模なデザイン変更では、ユーザーが明示的に省略を指示していない限り、新規メールデザインフローに従っている
• レンダリングされたプレビューを利用できる場合、作業完了とする前に、Lo​​ops エディターで新規メールとデザイン変更後のメールを、選択した参考資料または Loops ネイティブのソースと視覚的に比較している
• 生成されたコピーがコピーと句読点のガイドラインに従っている：ユーザーからの指定または原文にある場合を除き、em ダッシュ、装飾的な矢印記号、省略記号を使用しない
• 生成された <H1>、<H2>、<H3> のテキストがピリオドで終わっていない。疑問符や感嘆符は意図的な場合にのみ使用する
• 生成されたドキュメントで、見出しの種類を適切に絞っている：通常は <H1> を 1 つだけ使用し、必要な場合にのみ <H2> で区切り、実際に階層がある場合にのみ <H3> を使用する
• 見出しのサイズ、本文／カードの幅、水平方向の密度、レイアウト構成がメールに適しており、デザインガイダンスに従っている
• CTA と <Button> のテキストが簡潔で、行動を促し、ピリオドで終わっていない
• 同じ色同士が重なる箇所がない（テキストとブロックの色、アイコンの色と背景などを確認する）
• ブロック要素に十分な Y 方向の余白がある
• 重要なコピー、見出し、CTA、強調ブロックに、必要に応じて控えめな視覚的強調を加えている
• <Section> は、コールアウト、グループ化したコントロール、リンク付きグループ、または明示的なカード形式のレイアウトに限定して使用している。通常の本文を、デフォルトで多数の独立したカードに分割していない
• 隣接する <Section> の兄弟要素の間に、ユーザーが別のセクション間隔を明示的に指定していない限り、改行用のスペーサーを挿入している
• blockColor を使った段落、カラム、セクションなど、隣接する強調ブロックの間に、意図的に 1 つの連結したカードにしている場合を除き、目に見える縦方向の余白がある
• <Columns> に <ColumnItem> の子要素が 2〜4 個あり、widths を指定する場合はカラム数と一致している
• 動的画像には、src 内で変数を使わず、静的な src と dynamicSrc を使用している
• <Icons color> には #000000、#808080、#ffffff のいずれかを使用し、<Icon> には color 属性を指定していない
• 法的フッター、郵送先住所、配信停止ブロックを手動で追加していない。必要なフッターコンテンツは Loops が自動的に追加する。ブランドフッターコンポーネントはその上に配置できる