loops-lmx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

LMX Skill

LMX技能

This skill helps write, review, and generate correct LMX email markup for Loops. LMX is an XML-based format: every element is a PascalCase tag, self-closing tags require

/>

, and only the tags in the spec are valid.

此技能可帮助编写、审核和生成符合规范的Loops邮件LMX标记。LMX是一种基于XML的格式：每个元素均为PascalCase标签，自闭合标签需使用

/>

，且仅规范中列出的标签才有效。

When To Use

使用场景

Use this skill when the task involves:

generating or editing LMX email content
copying source material, migrating an existing email, or converting HTML, MJML, Markdown, or plain-text email copy into LMX
reviewing LMX markup for correctness
choosing the right LMX tags or attributes for a layout
applying design guidelines to an LMX document
explaining how a specific LMX tag or attribute works

当任务涉及以下内容时，请使用此技能：

生成或编辑LMX邮件内容
将源素材复制、迁移现有邮件，或将HTML、MJML、Markdown或纯文本邮件文案转换为LMX
审核LMX标记的正确性
为布局选择合适的LMX标签或属性
为LMX文档应用设计指南
解释特定LMX标签或属性的工作原理

Working Style

工作方式

When this skill is active:

Read
```
references/lmx-spec.md
```
for the full tag and attribute reference. It is authoritative; do not invent tags or attributes.
Read
```
references/lmx-design-guidelines.md
```
for Loops design guidelines. Apply these to every document you generate unless the user explicitly overrides a rule.
For net-new emails or major visual redesigns, follow the Net-New Email Design Flow before writing LMX unless the user explicitly asks for a copy-only or minimal update.
Treat source material as input, not as an override. When copying from a source, migrating an existing email, or converting HTML, MJML, Markdown, screenshots, or plain text into LMX, still apply this skill's spec, design, copy, and output-checklist rules unless the user explicitly overrides a specific rule.
Validate nesting and content-type rules before producing output (see spec section 3).
Check the common-mistakes table in the spec before finalizing output.
Always produce a complete, valid document, not fragments, unless the user specifically asks for one.

激活此技能时：

阅读
```
references/lmx-spec.md
```
获取完整的标签和属性参考。该文档具有权威性，请勿自创标签或属性。
阅读
```
references/lmx-design-guidelines.md
```
了解Loops设计指南。除非用户明确覆盖规则，否则请将这些指南应用于所有生成的文档。
对于全新邮件或重大视觉重新设计，在编写LMX之前请遵循《全新邮件设计流程》，除非用户明确要求仅复制文案或进行最小化更新。
将源素材视为输入，而非覆盖规则的依据。从源素材复制、迁移现有邮件，或将HTML、MJML、Markdown、截图或纯文本转换为LMX时，仍需遵循此技能的规范、设计、文案和输出检查清单规则，除非用户明确覆盖特定规则。
在生成输出前验证嵌套和内容类型规则（请参阅规范第3节）。
在最终确定输出前，检查规范中的常见错误表。
始终生成完整、有效的文档，而非片段，除非用户明确要求提供片段。

Category Routing

分类路由

Tag definitions, required/optional attributes, nesting rules, content types, variable syntax, self-closing requirements, or escaping: Read
```
references/lmx-spec.md
```
Color contrast, spacing, column rounded corners, Style tag usage, visual hierarchy, or any "how should this look" question: Read
```
references/lmx-design-guidelines.md
```
Net-new email design, substantial redesigns, or gpt-image/imagegen references: Read
```
references/lmx-design-guidelines.md
```
, especially the Net-New Email Design Workflow and Reference-to-Render QA sections. Use the
```
imagegen
```
skill in Codex only when a suitable Loops-native or user-provided reference is not available and the task still needs a visual reference.
Creating campaigns, posting LMX via the API, revision IDs, themes, components, or image uploads: Use the
```
loops-api
```
skill (HTTP) or
```
loops-cli
```
skill (terminal). This skill covers the LMX document itself.

标签定义、必填/可选属性、嵌套规则、内容类型、变量语法、自闭合要求或转义规则：阅读
```
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文档本身。

Net-New Email Design Flow

全新邮件设计流程

Use this flow when creating a brand-new campaign, lifecycle, workflow, or transactional email, or when the user asks for a substantial visual redesign.

Run the Known Brand / Customer Context Gate in
```
references/lmx-design-guidelines.md
```
.
Start from a visual reference only after Loops-native and user-provided context are understood. Use an existing component/theme preview, user screenshot/mockup, or concise written layout reference when sufficient. In Codex, generate an
```
imagegen
```
/gpt-image reference only when the task still needs visual exploration.
When generating a reference, prompt for a full 600px-wide email mockup, not a generic card. Include exact visible copy, subject matter, relevant brand cues, and only LMX-safe structures:
```
Style
```
,
```
Section
```
,
```
Columns
```
,
```
Paragraph
```
,
```
H1
```
,
```
H2
```
,
```
H3
```
,
```
Button
```
, dividers, checklist rows, and simple image placeholders.
Constrain generated references to realistic Loops editor output. Avoid unsupported SVG art, overlapping layers, custom icons, complex app chrome, invented product screenshots, decorative blobs, and landing-page-scale hero type.
Inspect the selected reference before writing LMX. If the layout or text is visibly wrong, iterate once with a focused prompt rather than compensating from memory.
Convert the selected reference or Loops-native structure into valid LMX while preserving the hierarchy. Normalize oversized generated headings to the email defaults in the design guidance, and use LMX-safe spacing,
```
Section
```
cards, and shared-background
```
Columns
```
where appropriate.
Use variables for the right email type:
```
{contact.*}
```
for campaigns and workflow emails;
```
{event.*}
```
for workflow emails when the value comes from the triggering event;
```
{data.*}
```
only for transactional emails.
If the email is implemented through the API, CLI, or editor, update through the revision-safe email-message path and compare a fresh rendered Loops editor preview against the visual reference or Loops-native source before calling the work done.

当创建全新的营销活动、生命周期、工作流或事务性邮件，或用户要求进行重大视觉重新设计时，请使用此流程。

执行
```
references/lmx-design-guidelines.md
```
中的“已知品牌/客户上下文检查”。
仅在理解Loops原生和用户提供的上下文后，才从视觉参考开始。如有足够的参考，可使用现有组件/主题预览、用户截图/模型或简洁的书面布局参考。仅当任务仍需视觉探索时，才在Codex中生成
```
imagegen
```
/gpt-image参考。
生成参考时，提示生成完整的600px宽邮件模型，而非通用卡片。包含确切的可见文案、主题、相关品牌线索，且仅使用LMX支持的结构：
```
Style
```
、
```
Section
```
、
```
Columns
```
、
```
Paragraph
```
、
```
H1
```
、
```
H2
```
、
```
H3
```
、
```
Button
```
、分隔符、清单行和简单图片占位符。
将生成的参考限制为符合实际的Loops编辑器输出。避免使用不支持的SVG图形、重叠图层、自定义图标、复杂应用界面、虚构产品截图、装饰性 blob 和登陆页面级别的大标题。
在编写LMX前检查所选参考。如果布局或文本明显错误，请使用针对性提示迭代一次，而非凭记忆弥补。
将所选参考或Loops原生结构转换为有效的LMX，同时保留层次结构。将生成的超大标题标准化为设计指南中的邮件默认样式，并在适当情况下使用LMX支持的间距、
```
Section
```
卡片和共享背景的
```
Columns
```
。
为正确的邮件类型使用变量：营销活动和工作流邮件使用
```
{contact.*}
```
；当值来自触发事件时，工作流邮件使用
```
{event.*}
```
；事务性邮件仅使用
```
{data.*}
```
。
如果通过API、CLI或编辑器实现邮件，请通过支持修订的邮件消息路径进行更新，并在完成工作前，将Loops编辑器的最新渲染预览与视觉参考或Loops原生源进行对比。

Output Checklist

输出检查清单

Before returning any LMX output, verify:

All tags are PascalCase and in the allowed set

All self-closing tags use

/>

(e.g.

<Image />

<Divider />

<Br />

<Icon />

<Style />

)

XML-sensitive characters are escaped:
```
&
```
as
```
&amp;
```
,
```
<
```
as
```
&lt;
```
, and
```
"
```
in attributes as
```
&quot;
```

Required attrs are present:

src

<Image />

componentId

<Component>

name

<Icon />

, and

href

<Link>

No text or inline tags at the top level
Variables use explicit LMX namespaces and only appear where supported: inline content, button text,
```
<Button href>
```
,
```
<Link href>
```
,
```
<Image alt/href/dynamicSrc>
```
, and
```
<Section href>
```
Variable namespaces match the email type: campaigns use
```
{contact.apiName}
```
; workflow emails use
```
{contact.apiName}
```
and/or
```
{event.propertyName}
```
; transactional emails use
```
{data.variableName}
```
(not unprefixed
```
{variableName}
```
or
```
{DATA_VARIABLE:...}
```
)
No inline fallback syntax is invented; fallbacks live outside the LMX string
```
<Button>
```
text has no inline tags, but can contain variables; include
```
href
```
for clickable CTA buttons
```
<CodeBlock>
```
treats braces literally
```
<Style />
```
appears at most once as a top-level tag; put it first in generated output
Body/background colors and X/Y padding are intentional: supplied by
```
themeId
```
or explicit
```
bodyColor
```
/
```
backgroundColor
```
plus
```
bodyXPadding
```
/
```
bodyYPadding
```
when needed
Net-new emails and major redesigns followed the Net-New Email Design Flow unless the user explicitly skipped it
If a rendered preview is available, net-new and redesigned emails were visually compared in the Loops editor with the selected reference or Loops-native source before calling the work done
Generated copy follows the copy and punctuation guidance: no em dashes, decorative arrow glyphs, or ellipses unless requested or source-preserved
Generated
```
<H1>
```
,
```
<H2>
```
, and
```
<H3>
```
text does not end with a period; question marks or exclamation points are used only when intentional
Generated documents use a restrained heading set: usually one
```
<H1>
```
, only necessary
```
<H2>
```
breaks, and
```
<H3>
```
only for real nested hierarchy
Heading scale, body/card width, horizontal density, and layout structure are email-appropriate and follow the design guidance
CTA and
```
<Button>
```
text is concise, action-oriented, and does not end with a period
No same-color-on-same-color situations (check text vs block color, icon color vs background, etc.)
Sufficient Y-spacing on block elements
Important copy, headings, CTAs, and highlighted blocks use subtle visual emphasis where appropriate
```
<Section>
```
is used sparingly for callouts, grouped controls, linked groups, or an explicit card-style layout; ordinary body copy is not wrapped into many floating cards by default
Adjacent
```
<Section>
```
siblings are separated with a line-break spacer unless the user explicitly specifies a different section-spacing approach
Adjacent highlighted blocks, including
```
blockColor
```
paragraphs, columns, and sections, are separated with visible vertical space unless they are intentionally one connected card
```
<Columns>
```
has two to four
```
<ColumnItem>
```
children, with
```
widths
```
matching the column count when provided
Dynamic images use static
```
src
```
plus
```
dynamicSrc
```
, not variables in
```
src
```

<Icons color>

uses one of

#000000

#808080

, or

#ffffff

;

<Icon>

has no

color

attr

No legal footer, postal address, or unsubscribe block is added by hand; Loops adds required footer content automatically. A branded footer component can appear above it

在返回任何LMX输出前，请验证：

所有标签均为PascalCase格式且属于允许的集合
所有自闭合标签均使用
```
/>
```
（例如
```
<Image />
```
、
```
<Divider />
```
、
```
<Br />
```
、
```
<Icon />
```
、
```
<Style />
```
）
XML敏感字符已转义：
```
&
```
转为
```
&amp;
```
，
```
<
```
转为
```
&lt;
```
，属性中的
```
"
```
转为
```
&quot;
```

必填属性已存在：

<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 />
```
作为顶层标签最多出现一次；在生成的输出中请将其放在首位
正文/背景颜色和X/Y内边距是有意设置的：由
```
themeId
```
提供，或在需要时使用显式的
```
bodyColor
```
/
```
backgroundColor
```
加上
```
bodyXPadding
```
/
```
bodyYPadding
```
全新邮件和重大重新设计遵循了《全新邮件设计流程》，除非用户明确跳过
如果有渲染预览可用，在完成工作前，已在Loops编辑器中将全新和重新设计的邮件与所选参考或Loops原生源进行视觉对比
生成的文案遵循文案和标点规范：除非用户要求或需保留源内容，否则请勿使用破折号、装饰性箭头符号或省略号
生成的
```
<H1>
```
、
```
<H2>
```
和
```
<H3>
```
文本不以句号结尾；仅在有意时使用问号或感叹号
生成的文档使用简洁的标题集：通常一个
```
<H1>
```
，仅必要的
```
<H2>
```
分隔，仅在存在真正的嵌套层次结构时使用
```
<H3>
```
标题比例、正文/卡片宽度、水平密度和布局结构符合邮件设计规范，并遵循设计指南
CTA和
```
<Button>
```
文本简洁、以行动为导向，且不以句号结尾
无同色叠加情况（检查文本与块颜色、图标颜色与背景等）
块元素有足够的Y轴间距
重要文案、标题、CTA和高亮块在适当情况下使用微妙的视觉强调
```
<Section>
```
仅少量用于提示框、分组控件、链接组或明确的卡片式布局；普通正文文案默认不包裹在多个浮动卡片中
相邻的
```
<Section>
```
兄弟元素使用换行分隔符分开，除非用户明确指定不同的段落间距方式
相邻的高亮块（包括
```
blockColor
```
段落、列和章节）之间有明显的垂直间距，除非它们是有意设计为相连的卡片
```
<Columns>
```
有2到4个
```
<ColumnItem>
```
子元素，提供
```
widths
```
时需与列数匹配
动态图片使用静态
```
src
```
加
```
dynamicSrc
```
，而非在
```
src
```
中使用变量

<Icons color>

使用

#000000

、

#808080

或

#ffffff

之一；

<Icon>

无

color

属性

请勿手动添加法律页脚、邮政地址或退订块；Loops会自动添加所需的页脚内容。品牌化页脚组件可放在其上方",