task-center-design

name	task-center-design
description	美团营销活动会场UI规范。根据活动意图（签到/下单/助力/浏览等）自动生成符合美团营销视觉体系的C端活动组件HTML代码，照搬高达素材库真实组件样式。触发词：生成签到组件、生成活动页面、营销会场组件、签到日历、进度条任务、任务列表、邀请助力、活动H5、消费得免单、签到领红包、做任务得奖励、营销活动UI、活动C端组件、玩法组件生成。凡涉及美团营销活动/玩法组件的UI代码生成需求，均应激活此Skill而非通用前端Skill。

美团营销活动会场UI规范

基于高达素材库真实组件样式的营销活动C端组件生成器。

---

核心能力

1. 照搬高达真实样式：签到格子、任务列表、阶梯进度条全部源自高达素材库生产组件截图，不凭空发明。
2. 意图驱动组件选择：从活动意图（提频次/促消费/拉活跃/裂变拉新）自动映射到正确的组件类型。
3. 注入美团营销视觉规范：#FF2D19 主色、MTNewDigital 价格字体、rem 适配、三态按钮规格。
4. 输出可直接预览的单文件 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末尾：

<!--
=== 美团营销活动会场UI规范 自查报告 ===
[component_key]: SIGN_IN_CALENDAR
[参考高达组件]: 通用签到任务组件
[locked_constraints]:
  cta_required: [YES/NO]
  state_tricolor_required: [YES/NO]
[禁止项]:
  Emoji: [CLEAN/FAIL]
  规范外色值: [CLEAN/FAIL]
  按钮>4字: [CLEAN/FAIL]
  字体: [OK/FAIL]
[div平衡]: [OK/FAIL]
=== 自查 [通过/未通过] ===
-->

---

错误处理

场景	处理方式
意图/组件类型不明确	询问：是签到/消费/浏览任务/邀请助力？
缺少子任务数	使用典型默认值（签到7天/消费3档/任务5条）
要求删locked元素	告知系统锁定，解释原因，拒绝
要求加Emoji	告知规范禁止，提供SVG替代
样式与高达差异大	回退到高达截图参考，不自由发挥

---

输出规范

1. 完整HTML（可直接存.html打开预览）
2. 简短说明：组件类型、渲染状态、画像差异点
3. 需运营覆盖的参数说明（配色/文案/奖励数值）

---

参考文件

• references/task-atoms-snapshot.yaml — 能力字典
• references/task-visual-rules-snapshot.yaml — 视觉模式 + locked_constraints
• references/ui-spec-summary.md — 颜色/字体/间距/按钮/禁止项
• /root/.openclaw/workspace/gundam-refs/STYLE_SUMMARY.md — 高达素材库真实样式汇总