| name | task-center-design |
| description | 美团营销活动会场UI规范。根据活动意图（签到/下单/助力/浏览等）自动生成符合美团营销视觉体系的C端活动组件HTML代码，照搬高达素材库真实组件样式。触发词：生成签到组件、生成活动页面、营销会场组件、签到日历、进度条任务、任务列表、邀请助力、活动H5、消费得免单、签到领红包、做任务得奖励、营销活动UI、活动C端组件、玩法组件生成。凡涉及美团营销活动/玩法组件的UI代码生成需求，均应激活此Skill而非通用前端Skill。 |
美团营销活动会场UI规范
基于高达素材库真实组件样式的营销活动C端组件生成器。
核心能力
- 照搬高达真实样式：签到格子、任务列表、阶梯进度条全部源自高达素材库生产组件截图，不凭空发明。
- 意图驱动组件选择：从活动意图（提频次/促消费/拉活跃/裂变拉新）自动映射到正确的组件类型。
- 注入美团营销视觉规范：
#FF2D19 主色、MTNewDigital 价格字体、rem 适配、三态按钮规格。
- 输出可直接预览的单文件 HTML：包含 rem 适配、完整 CSS、示例数据填充，附自查报告。
与通用前端 Skill 的差异：内置营销活动的业务约束（意图→玩法→组件映射、组件三态逻辑、locked_constraints 校验），不是通用UI——它知道"签到不能渲染进度条"、"助力组件的邀请链接不能删"。
高达素材库参考组件（照猫画虎，不可偏离）
组件1：通用签到任务组件（高达ID: 2744755324）
真实样式特征（从高达截图提取）：
- 背景：暖色渐变（橙红/粉紫），圆角卡片容器，宽750px
- 签到格：一行7格横排（连续7天），每格约70×95px
- 未签到：心形/礼盒造型 + 奖励金额预览（如"1元优惠券"），橙红暖色
- 已签到：同造型 + 深色"已签到"遮罩标签
- 今日待签：高亮描边/呼吸动效
- 签到按钮：大圆角胶囊（402×82px），橙红渐变，白色粗体"立即签到"
- 标题文案示例："签到领小象超市红包" / "连续1/2/4/7签到 得1/3/8/12元优惠券"
- 支持阶梯奖励：连续签到天数越多，奖励越大
- 支持连续循环签到和累计循环签到
变体（女神节风格）：
- 粉紫渐变背景
- 圆形格子 + 1×~7×倍数标签
- 粉色签到按钮
组件2：通用任务组件-任务2.0（高达ID: 2726910150）
真实样式特征：
- 标题区：渐变背景，大字标题（如"做任务 得推现金次数"）
- 任务列表：白色卡片列表，每行：
- 左侧：任务描述（"逛游戏大厅领次数"）+ 灰色进度提示（"浏览10秒 次数+10"）
- 右侧：操作按钮（绿色/橙色圆角"去逛逛"/"去完成"/"去领取"）
- 已完成态：按钮变灰"已完成"
- 支持任务类型：签到、浏览、分享、下单、订阅提醒、直播、投票
- 最多20个任务
组件3：日常消费计划-任务（高达截图提取）
真实样式特征：
- 标题："消费得免单 8.10-10.10消费均可参入" + "我的奖励 | 规则"
- 阶梯进度条：累计消费30元 → 50元 → 100元
- 进度条：线性渐变填充（橙→红），节点圆圈标记档位
- 每个档位下方挂奖励卡片
- 商品券横排：外卖大额券¥30 / 咖啡九块九 / 背德基套餐
- 底部CTA："参与活动得免单"绿色按钮
- 暖黄橙渐变背景
意图 → 玩法 → 组件映射表
| 活动意图 | 推荐玩法 | C端组件 | component_key |
|---|
| 提频次（提升访问频率） | 签到打卡 | 签到日历格子 | SIGN_IN_CALENDAR |
| 促消费（提升客单价/下单量） | 阶梯消费任务 | 阶梯进度条 | PROGRESS_BAR_TASK |
| 拉活跃（浏览/互动/分享） | 做任务得奖励 | 任务列表 | TASK_LIST |
| 裂变拉新 | 邀请助力 | 邀请助力卡 | INVITE_BOOST_TASK |
| 通用/不确定 | 通用任务卡 | 极简任务卡 | GENERAL_TASK |
输入规格
| 字段 | 必填 | 说明 | 示例 |
|---|
intent | ✅ | 活动意图 | "提频次" / "促消费" / "拉活跃" |
component_key | 选填 | 组件类型（不填则从intent自动推断） | SIGN_IN_CALENDAR |
task_config | ✅ | 活动配置（自然语言或结构化） | "连续签到7天，奖励阶梯1/3/5/8/10/12/15元" |
persona | 选填 | 用户画像标签 | "流失风险" / "价格敏感" |
theme | 选填 | 视觉主题 | "暖橙红" / "粉紫" / "金黄" / "清新绿" |
title | 选填 | 活动标题 | "签到领超市红包" |
component_key 枚举
| 值 | 组件名 | 参考高达组件 |
|---|
SIGN_IN_CALENDAR | 签到日历组件 | 通用签到任务组件 |
PROGRESS_BAR_TASK | 阶梯进度条组件 | 日常消费计划-任务 |
TASK_LIST | 任务列表组件 | 通用任务组件2.0 |
INVITE_BOOST_TASK | 邀请助力组件 | （自有规范） |
GENERAL_TASK | 通用任务卡 | 极简形态 |
执行流程
Step 1：解析意图 → 确定组件类型
用户说"签到/打卡/连续签到/累计签到" → SIGN_IN_CALENDAR
用户说"下单任务/消费任务/阶梯奖励/累计消费" → PROGRESS_BAR_TASK
用户说"做任务/浏览/分享/互动/每日任务" → TASK_LIST
用户说"邀请好友/助力/裂变" → INVITE_BOOST_TASK
用户说"提频次" → SIGN_IN_CALENDAR（默认推荐签到）
用户说"促消费" → PROGRESS_BAR_TASK（默认推荐阶梯消费）
用户说"拉活跃" → TASK_LIST（默认推荐任务列表）
Step 2：查视觉规范
读取 references/ui-spec-summary.md 注入颜色/字体/按钮/禁止项约束。
读取 references/task-visual-rules-snapshot.yaml 确定组件状态列表和 locked_constraints。
Step 3：按高达真实样式生成 HTML
必须照搬高达素材库的布局结构，不可自由发挥。
SIGN_IN_CALENDAR 生成规范
参考：通用签到任务组件（高达）
结构：
┌─────── 暖色渐变背景 ──────────┐
│ [标题] 签到领XX红包 │
│ [副标] 连续X天签到得Y元优惠券 │
│ │
│ ┌──┐ ┌──┐ ┌──┐ ... ┌──┐ │ ← 签到格横排
│ │D1│ │D2│ │D3│ │D7│ │
│ │¥1│ │¥3│ │¥5│ │¥15│ │
│ └──┘ └──┘ └──┘ ... └──┘ │
│ │
│ ┌──────────────────────┐ │
│ │ 立即签到 │ │ ← 胶囊按钮
│ └──────────────────────┘ │
│ │
│ 已连续签到 X 天 │
└────────────────────────────────┘
格子三态：
- 已签到：实色填充 + SVG勾 + "¥X" 白字
- 今日待签：高亮描边 + 奖励预览 + 微动效
- 未来：#F5F5F5 灰底 + 锁形图标 + 灰色金额
签到按钮：胶囊型，宽80%居中，高 0.8rem
- 可签：橙红渐变 + 白色"立即签到"
- 已签：灰色 + "今日已签到"
PROGRESS_BAR_TASK 生成规范
参考：日常消费计划-任务（高达）
结构：
┌─────── 暖色渐变背景 ──────────┐
│ [标题] 消费得免单 │
│ [副标] X.XX-X.XX 消费均可参与 │
│ │
│ [阶梯进度条] │
│ ●───────●───────●───────● │
│ 0 30元 50元 100元 │
│ ↓ ↓ ↓ │
│ ┌─────┐┌─────┐┌─────┐ │ ← 奖励卡片
│ │¥5券 ││¥15券││¥30券│ │
│ │外卖 ││咖啡 ││套餐 │ │
│ └─────┘└─────┘└─────┘ │
│ │
│ ┌──────────────────────┐ │
│ │ 去完成 │ │
│ └──────────────────────┘ │
└────────────────────────────────┘
进度条：底色#F5F5F5，激活渐变橙→红(#FF6B2D→#FF2D19)
节点：圆圈，已达成实色，未达成空心描边
TASK_LIST 生成规范
参考：通用任务组件2.0（高达）
结构：
┌─────── 渐变背景标题区 ─────────┐
│ 做任务 得推现金次数 │
└────────────────────────────────┘
┌────────────────────────────────┐
│ [图标] 逛游戏大厅领次数 │
│ 浏览10秒 次数+10 [去逛逛]│
├────────────────────────────────┤
│ [图标] 每日下单领次数 │
│ 下单1次 次数+10 [领任务]│
├────────────────────────────────┤
│ [图标] 刷短视频领次数 │
│ 浏览15秒 次数+5 [去逛逛] │
└────────────────────────────────┘
每行：左侧（图标+任务名+灰色进度描述），右侧（圆角按钮）
按钮：弱化胶囊，#FFF1F0底+#FF2D19字（去完成）
完成态：#F5F5F5底+#999字（已完成）
Step 4：画像差异化渲染（如有persona参数）
同一组件，不同画像呈现不同参数：
| 维度 | 流失风险 | 价格敏感 | 品类探索 |
|---|
| 主题色 | 暖橙红（紧迫感） | 金黄色（省钱感） | 清新绿（新鲜感） |
| 签到天数 | 3天（短周期召回） | 7天（养成习惯） | 5天（探索期） |
| 奖励力度 | 大额券¥15 | 满减券满30减8 | 首单券¥5 |
| 按钮文案 | "签到领大券" | "签到省更多" | "签到尝新" |
| 标题文案 | "好久没来，签到领惊喜" | "连续签到，天天省" | "签到发现新口味" |
Step 5：自查
生成完毕后执行自查，以注释追加在HTML末尾：
错误处理
| 场景 | 处理方式 |
|---|
| 意图/组件类型不明确 | 询问：是签到/消费/浏览任务/邀请助力？ |
| 缺少子任务数 | 使用典型默认值（签到7天/消费3档/任务5条） |
| 要求删locked元素 | 告知系统锁定，解释原因，拒绝 |
| 要求加Emoji | 告知规范禁止，提供SVG替代 |
| 样式与高达差异大 | 回退到高达截图参考，不自由发挥 |
输出规范
- 完整HTML（可直接存.html打开预览）
- 简短说明：组件类型、渲染状态、画像差异点
- 需运营覆盖的参数说明（配色/文案/奖励数值）
参考文件
references/task-atoms-snapshot.yaml — 能力字典references/task-visual-rules-snapshot.yaml — 视觉模式 + locked_constraintsreferences/ui-spec-summary.md — 颜色/字体/间距/按钮/禁止项/root/.openclaw/workspace/gundam-refs/STYLE_SUMMARY.md — 高达素材库真实样式汇总
