template-builder-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Template builder UI

模板构建器UI

Overview

概述

Use this skill to design or improve a Sent template builder UI. Sent templates are reusable message blueprints across SMS, WhatsApp, and RCS. The UI must let users create valid templates, preview channel-specific rendering, supply variable samples, submit for review where required, and understand status without exposing irrelevant provider internals.

The Sent v3 template API supports create, list, retrieve, update, and delete operations. The first-message workflow sends templates through

POST /v3/messages

using a

template.id

. A good UI therefore optimizes both authoring and later sendability.

使用本技能设计或优化Sent模板构建器UI。Sent模板是可在SMS、WhatsApp和RCS间复用的消息蓝图。该UI必须允许用户创建合规模板、预览渠道专属渲染效果、提供变量示例、在需要时提交审核，并且无需暴露无关的供应商内部细节即可了解模板状态。

Sent v3模板API支持创建、列表查询、详情获取、更新和删除操作。首条消息工作流通过

POST /v3/messages

接口并传入

template.id

来发送模板。因此，优质的UI需同时优化模板创作和后续的发送可用性。

When to use

使用场景

Use this skill when the user asks for a template builder, template editor, template management UI, template validation, Meta import flow, JSON template builder, WhatsApp approval UI, RCS rich template editor, SMS template preview, template status page, or a product/engineering spec for Sent templates.

Do not use this skill to write final WhatsApp template copy; use

waba-template-author

. Do not use it to decide Sender Profile boundaries; use

sender-profile-architect

. Do not use it to diagnose delivery failures after sends; use

messaging-performance-analyzer

当用户需求为模板构建器、模板编辑器、模板管理UI、模板验证、Meta导入流程、JSON模板构建器、WhatsApp审核UI、RCS富模板编辑器、SMS模板预览、模板状态页面，或Sent模板的产品/工程规格时，使用本技能。

请勿使用本技能编写最终的WhatsApp模板文案；请使用

waba-template-author

技能。请勿使用本技能确定Sender Profile边界；请使用

sender-profile-architect

技能。请勿使用本技能诊断发送后的投递失败问题；请使用

messaging-performance-analyzer

技能。

Product principles

产品原则

A Sent template UI should make the valid path obvious and the invalid path hard. Users should understand three things at all times: what channels the template targets, what variables need examples, and whether the template is editable, pending, approved, or rejected.

Principle	UI behavior	Why it matters
Channel-first editing	User chooses SMS, WhatsApp, RCS, or combinations before components.	Component support differs by channel.
Variable-first validation	Every variable has a sample value before review/submission.	Reviewers and test sends need concrete rendered examples.
Status-aware actions	Drafts can be edited; pending/approved/rejected states guide next action.	Users should not unknowingly break reviewed content.
Provider-specific details are scoped	WhatsApp category and Meta import appear only where WhatsApp applies.	Keeps cross-channel UI from becoming WhatsApp-only.
JSON escape hatch	Advanced users can paste/edit JSON with schema validation.	Sent docs include JSON definition as a creation path.

Sent模板UI应让合规路径清晰可见，让违规路径难以触发。用户需随时了解三件事：模板针对哪些渠道、哪些变量需要示例、模板处于可编辑、待审核、已通过还是已驳回状态。

原则	UI行为	重要性说明
渠道优先编辑	用户在选择组件前先选择SMS、WhatsApp、RCS或其组合。	不同渠道对组件的支持存在差异。
变量优先验证	每个变量在审核/提交前都需设置示例值。	审核人员和测试发送需要具体的渲染示例。
状态感知操作	草稿可编辑；待审核/已通过/已驳回状态引导下一步操作。	用户不应在不知情的情况下破坏已审核内容。
供应商专属细节按需展示	WhatsApp分类和Meta导入仅在涉及WhatsApp时显示。	避免跨渠道UI沦为仅适配WhatsApp的界面。
JSON逃生舱	高级用户可粘贴/编辑JSON并进行 schema 验证。	Sent文档将JSON定义列为创建路径之一。

Process

流程

1. Start with the template intent and channels

1. 从模板意图和目标渠道入手

Ask what the template is for before showing component controls. Intent drives category, variables, and review risk. Then ask which channels the user wants to support.

Example. “Order shipped” targeting SMS, WhatsApp, and RCS should start from one intent but render differently: SMS may be plain text, WhatsApp may need a utility category and sample variables, and RCS may use richer actions if configured.

在展示组件控件前，先询问模板的用途。意图决定分类、变量和审核风险。然后询问用户想要支持的渠道。

示例。针对SMS、WhatsApp和RCS的“订单已发货”模板需从同一意图出发，但渲染方式不同：SMS可能为纯文本，WhatsApp可能需要实用类分类和变量示例，RCS若配置则可使用更丰富的操作。

2. Model the Sent template lifecycle

2. 建模Sent模板生命周期

Use Sent’s documented statuses in the UI: Draft, Pending, Approved, and Rejected. Do not introduce provider-only states as global Sent states unless Sent event types or API responses expose them for the account.

Status	UI meaning	Allowed primary action
Draft	Saved but not submitted.	Edit, preview, validate, submit.
Pending	Submitted for review/approval where required.	View, cancel if supported, duplicate.
Approved	Available for production sends where channel setup allows.	Use in send flow, duplicate for revision.
Rejected	Review failed or validation blocked approval.	View reason, revise, resubmit or duplicate.

Although the OpenAPI says

PUT /v3/templates/{id}

can update name, category, language, definition, or submit for review, the UI should still protect approved templates with a “duplicate and revise” path when auditability matters. Present immutability as a product-safety choice, not a Sent API fact.

在UI中使用Sent文档定义的状态：Draft（草稿）、Pending（待审核）、Approved（已通过）和Rejected（已驳回）。除非Sent事件类型或API响应为账户暴露了仅供应商专属的状态，否则不要将其作为全局Sent状态引入。

状态	UI含义	允许的主要操作
Draft（草稿）	已保存但未提交	编辑、预览、验证、提交
Pending（待审核）	已提交等待审核/批准（如需要）	查看、取消（若支持）、复制
Approved（已通过）	可在渠道配置允许的情况下用于生产发送	在发送流程中使用、复制以进行修订
Rejected（已驳回）	审核未通过或验证阻止了批准	查看原因、修订、重新提交或复制

尽管OpenAPI规定

PUT /v3/templates/{id}

可更新名称、分类、语言、定义或提交审核，但当审计性要求较高时，UI仍应通过“复制并修订”路径保护已通过的模板。将不可变性呈现为产品安全选择，而非Sent API的既定事实。

3. Back the UI with Sent template endpoints

3. 基于Sent模板端点支撑UI

Keep the UI contract aligned to the verified v3 template operations.

UI action	Endpoint	Notes
Create template	`POST /v3/templates`	Create with header, body, footer, buttons, and review/draft intent.
List/search templates	`GET /v3/templates?page=&pageSize=&search=&status=&category=`	Support filtering by status, category, and search.
Open template detail	`GET /v3/templates/{id}`	Show name, category, language, status, and definition.
Save/update	`PUT /v3/templates/{id}`	Update editable fields or submit for review.
Delete	`DELETE /v3/templates/{id}`	Optionally delete from Meta where supported by the API request.
Send test after approval	`POST /v3/messages`	Use `template.id` and channel selection.

Use optional

Idempotency-Key

headers when create/update requests may be retried by the frontend or backend.

保持UI契约与已验证的v3模板操作一致。

UI操作	端点	说明
创建模板	`POST /v3/templates`	创建包含标题、正文、页脚、按钮以及审核/草稿意图的模板。
列表/搜索模板	`GET /v3/templates?page=&pageSize=&search=&status=&category=`	支持按状态、分类和关键词过滤。
打开模板详情	`GET /v3/templates/{id}`	显示名称、分类、语言、状态和定义。
保存/更新	`PUT /v3/templates/{id}`	更新可编辑字段或提交审核。
删除	`DELETE /v3/templates/{id}`	若API请求支持，可选择从Meta删除。
批准后发送测试	`POST /v3/messages`	使用 `template.id` 和渠道选择。

当前端或后端可能重试创建/更新请求时，使用可选的

Idempotency-Key

请求头。

4. Design the editor around components

4. 围绕组件设计编辑器

Represent the template as a structured definition rather than one text blob. Sent’s docs describe template components such as header, body, footer, and buttons, with practical support differences across SMS, RCS, and WhatsApp.

Component	UI guidance	Channel notes
Header	Optional title/media area with clear preview.	Most relevant to WhatsApp/RCS; validate per selected channel.
Body	Required main content with variable insertion.	Needed across channels; SMS preview should show plain-text length behavior.
Footer	Optional low-emphasis text.	Useful for compliance or context where supported.
Buttons/actions	Explicit button type and target.	Validate per channel; do not allow unsupported combinations.
Variables	Named or positional placeholders with sample values.	Samples are required for review and testing.

将模板表示为结构化定义，而非单一文本块。Sent文档描述了标题、正文、页脚和按钮等模板组件，且这些组件在SMS、RCS和WhatsApp中的实际支持存在差异。

组件	UI指导	渠道说明
标题	可选的标题/媒体区域，带有清晰预览。	对WhatsApp/RCS最为重要；需按所选渠道进行验证。
正文	必填的主要内容，支持变量插入。	所有渠道均需；SMS预览应显示纯文本长度限制行为。
页脚	可选的低优先级文本。	在合规或上下文需求场景中有用（若渠道支持）。
按钮/操作	明确按钮类型和目标。	按渠道验证；不允许不支持的组合。
变量	命名或位置占位符，带有示例值。	示例值是审核和测试的必填项。

5. Make validation staged and explainable

5. 分阶段进行可解释的验证

Run validation in layers so users know whether a problem is a Sent schema issue, a channel support issue, or a policy/review issue.

Layer	Example error	Fix
Required fields	“Body is required.”	Add body content.
Variable samples	“ `{{order_id}}` has no sample value.”	Add a realistic sample.
Channel support	“SMS cannot render this rich button.”	Remove button for SMS or split channel variants.
WhatsApp review risk	“Marketing language in a utility template may be rejected or reclassified.”	Change category or remove promotional content.
JSON schema	“Definition does not match Sent template shape.”	Correct JSON before save.

Example validation. If a utility WhatsApp template says “Your order shipped. Add 20% off accessories today,” the UI should warn that promotional content conflicts with utility intent. For SMS, the same content may be syntactically valid but still must align with 10DLC use-case registration.

分层运行验证，让用户了解问题属于Sent schema问题、渠道支持问题还是政策/审核问题。

层级	错误示例	修复方案
必填字段	“正文为必填项。”	添加正文内容。
变量示例	“ `{{order_id}}` 未设置示例值。”	添加真实的示例值。
渠道支持	“SMS无法渲染此富按钮。”	为SMS移除按钮或拆分渠道变体。
WhatsApp审核风险	“实用类模板中包含营销语言可能会被驳回或重新分类。”	修改分类或移除推广内容。
JSON schema	“定义不符合Sent模板格式。”	保存前修正JSON。

验证示例。若某实用类WhatsApp模板内容为“您的订单已发货。今日配件享8折优惠”，UI应警告推广内容与实用类意图冲突。对于SMS，相同内容在语法上可能合规，但仍需符合10DLC用例注册要求。

6. Support Sent’s creation paths

6. 支持Sent的创建路径

Sent's dashboard exposes four template creation flows at

app.sent.dm/dashboard/templates

. Mirror them by name and intent.

Path	Best for	UI requirement
Create from Sample	New users and common templates	Curated examples with editable variables.
Create from Scratch	Product teams building custom flows	Guided component editor.
Import from Meta	Existing WhatsApp template libraries	Import review, mapping, and status reconciliation.
Create From Definition	Developers and migrations	Schema validation, diff view, and clear errors.

Sent仪表盘在

app.sent.dm/dashboard/templates

提供四种模板创建流程。需按名称和意图镜像这些流程。

路径	适用场景	UI要求
从示例创建	新用户和通用模板	提供可编辑变量的精选示例。
从零创建	构建自定义流程的产品团队	提供引导式组件编辑器。
从Meta导入	现有WhatsApp模板库	支持导入审核、映射和状态协调。
从定义创建	开发人员和迁移场景	提供schema验证、差异视图和清晰的错误提示。

7. Preview the send path, not only the design

7. 预览发送路径，而非仅预览设计

An approved template is only useful if it can be sent. Add a test-send preview that asks for Sender Profile/channel context, recipient test number, variable values, and sandbox/production mode where applicable. Show that production sending uses

POST /v3/messages

with the selected

template.id

已通过的模板只有能被发送才有价值。添加测试发送预览功能，询问Sender Profile/渠道上下文、收件人测试号码、变量值以及适用的沙盒/生产模式。展示生产发送需使用

POST /v3/messages

接口并传入选中的

template.id

。

Common rationalizations to avoid

需避免的常见误区

Do not build a WhatsApp-only UI and call it a Sent template builder. Sent templates span SMS, WhatsApp, and RCS.

Do not mark name/language/category immutable as a Sent API fact. The verified update endpoint can update those fields; immutability is a product governance decision.

Do not show provider policy warnings globally. Only show WhatsApp-specific category/review warnings when WhatsApp is selected.

Do not hide sample values in an advanced panel. Missing or unrealistic samples are a common review and testing failure.

Do not rely on frontend validation alone. The backend should validate the Sent request shape and preserve API error messages for users.

不要构建仅适配WhatsApp的UI并称之为Sent模板构建器。Sent模板覆盖SMS、WhatsApp和RCS。

不要将名称/语言/分类的不可变性作为Sent API的既定事实。已验证的更新端点可更新这些字段；不可变性是产品治理决策。

不要全局显示供应商政策警告。仅当选中WhatsApp时，才显示WhatsApp专属的分类/审核警告。

不要将示例值隐藏在高级面板中。缺失或不真实的示例是审核和测试失败的常见原因。

不要仅依赖前端验证。后端应验证Sent请求格式，并为用户保留API错误信息。

Verification checklist

验证清单

The UI starts with template intent and target channels.
Statuses match Sent’s documented Draft, Pending, Approved, and Rejected states.
Template CRUD maps to verified
```
/v3/templates
```
endpoints.
Variables cannot be submitted without sample values.
Component validation is channel-aware for SMS, WhatsApp, and RCS.
WhatsApp-specific category/review warnings are scoped to WhatsApp templates.
JSON definition mode validates schema before save.
Test-send preview uses
```
POST /v3/messages
```
with
```
template.id
```
after approval/readiness checks.

UI从模板意图和目标渠道开始。
状态与Sent文档定义的Draft、Pending、Approved和Rejected一致。
模板CRUD操作映射到已验证的
```
/v3/templates
```
端点。
变量未设置示例值则无法提交。
组件验证针对SMS、WhatsApp和RCS具备渠道感知能力。
WhatsApp专属的分类/审核警告仅针对WhatsApp模板显示。
JSON定义模式在保存前进行schema验证。
测试发送预览在批准/就绪检查后使用
```
POST /v3/messages
```
接口并传入
```
template.id
```
。

Related skills

Suggested bundled references and scripts

建议捆绑的参考资料和脚本

File	Type	Purpose
`references/template-validation-matrix.md`	Lookup table	List component support, variable rules, and channel-specific restrictions without bloating the skill body.
`references/template-ui-wireflows.md`	Worked examples	Show sample, scratch, Meta import, and JSON creation flows.
`references/template-status-handling.md`	Decision matrix	Map Sent status and provider review outcomes to UI actions.

文件	类型	用途
`references/template-validation-matrix.md`	查找表	列出组件支持、变量规则和渠道专属限制，避免技能主体过于冗长。
`references/template-ui-wireflows.md`	示例流程	展示示例创建、从零创建、Meta导入和JSON创建流程。
`references/template-status-handling.md`	决策矩阵	将Sent状态和供应商审核结果映射到UI操作。

Unverified claims to confirm or remove

需确认或移除的未验证声明

Whether template name/language/category are immutable after first save is not documented in the snapshot; the
```
PUT /v3/templates/{id}
```
endpoint accepts these fields, so behavior should be verified against the live OpenAPI before assuming. Treat product-side locking as a governance choice, not an API fact.
Mixed-button rules (quick-reply XOR CTA, ordering, per-category constraints) remain external Meta concerns — link to Meta's WhatsApp template docs, do not mirror.
Template-status webhook event names follow the
```
<field>.<event>
```
pattern (the snapshot confirms the envelope) but the snapshot does not enumerate template-specific events. Discover the exact names via
```
GET /v3/webhooks/event-types
```
for the account.

模板名称/语言/分类在首次保存后是否不可变未在快照文档中说明；
```
PUT /v3/templates/{id}
```
端点接受这些字段，因此在假设前需针对实时OpenAPI验证行为。将产品端锁定视为治理选择，而非API既定事实。
混合按钮规则（快速回复XOR CTA、排序、分类约束）仍是Meta的外部问题 —— 链接到Meta的WhatsApp模板文档，无需在UI中镜像。
模板状态webhook事件名称遵循
```
<field>.<event>
```
模式（快照确认了信封格式），但快照未列出模板专属事件。需通过
```
GET /v3/webhooks/event-types
```
接口为账户查询确切名称。