phone-widget-2x2-composition

Imported from InnovationTea/CreateMyCard (widget_service/cloud/services/multi_step_generation/references/prompt_2x2/composition/SKILL.md). Install upstream with npx skills add InnovationTea/CreateMyCard --skill composition. Copyright stays with the author.

卡片生成编排

从信息到候选组件

B1. 组件候选原则

1. 逐项读取字段表，保留所有符合条件的组件候选；不得凭经验提前锁定一个组件。
2. 一个问题包含多个性质时，先分别映射，再组合为同一个语义组。
3. 数据性质不等于唯一视觉组件。空间不适配时，只能在同一性质允许的候选中切换。
4. 次要或辅助信息优先考虑紧凑组件或尺寸变体；换组件不得改变字段内容、数据性质和信息层级。
5. 当前候选均不适配时，先更换 Layout Pattern；仍不适配则停止并报告，不得拼假组件、删字段或跨区域移动信息。
6. 总表明确限定组件与 Layout Pattern 的组合时，必须同时满足组件语义、卡片 size 和布局槽位，不得只根据组件外观选型。
7. 要求占满模块宽度的组件，其组件包装层必须显式占满可用宽度并允许收缩；不得依赖内容宽度决定 Track 或背板宽度。

ProgressCircleSingle、InfoBlock 的进度环分支与 ProgressLine2 按以下顺序区分：

1. 先判断是否为单个设备的电量、剩余容量或其他当前余量状态；是则同时保留 ProgressCircleSingle 和 InfoBlock 进度环分支两个候选，不在此处提前锁定。
2. 需要独立的 Label、可见占比和可选第三行状态，或没有第二个可配对的紧凑信息块时，选择 ProgressCircleSingle。
3. 当卡片恰好有两组可独立理解的紧凑信息，两组都具备主文本、副文本，并可各自完整放入 134 × 63vp 槽位时，选择两个 InfoBlock；尾部视觉按数据语义可选，不得为了凑结构虚构 Icon，设备电量所在组可使用 visual.type="progressCircle"。卡片另有独立 Action 不影响此配对，Action 继续放入对应操作区。
4. 否则判断数据是否具有明确方向和终点，并且用户关心“当前完成到哪里、距离目标还差多少”；是则选择 ProgressLine2。
5. “手机电量 68%”单独展示时使用 ProgressCircleSingle；它与“当前温度 31℃／多云”组成两个紧凑信息块时，可使用两个 InfoBlock；“今日 5860／10000 步”“任务完成 7／10”“下载 68／100”表示目标或过程进度，使用 ProgressLine2。
6. “已用存储 43%”只有在卡片问题明确关注已用量相对于总容量的占用关系时才使用 ProgressLine2；若表达的是单个对象当前还剩多少，则按上述组合条件在 ProgressCircleSingle 与 InfoBlock 之间选择。

ProgressCircleSingle 右侧的 Label、Value、Unit 和 Secondary Label 属于单环内部文本组，不再分别实例化 EmphasizedData 或 SecondaryBody，也不重复计算为新的布局模块。

单模块与布局兼容

布局约束

• DataDisplay 只用于“核心居中”单模块布局，不额外添加标题、按钮或并列业务组件。
• 2×2 中放入 126 × 126vp 安全内容区并水平、垂直居中。
• 2×4 中只进入当前尺寸 layouts Skill 允许的 116 × 110vp 或 132 × 126vp“核心居中”子布局，并设置 align="center" justify="center"。
• 背景选择遵循 core Skill 的 Card.appearance 规则；融球背景仅适用于 2×2，2×4 使用该尺寸允许的纯色背景。禁止在业务 JSX 中手工添加椭圆 DOM、style、background 或硬编码颜色。

2×2 布局选择

2. 布局选择逻辑

布局由三部分组合：

Base Pattern + Placement + Action Component

• Base Pattern：单内容、上下二分、纵向三段、主次分层、局部双列或 2×2 网格。
• Placement：flow 顺序流式，或 anchor 固定边缘关系。
• Action Component：none、PillButton 或 CircleButton。

先根据信息层级选择基础骨架，再决定流式或锚点落位，最后选择操作区。局部双列和网格只能嵌套在所属内容区内，不能与整卡布局混为同一层级。

2.1 布局选择总表

2.2 根据 Action 确认操作区

• 先按真实内容高度检查底部空间。标题和必需内容完整呈现后，若仍可闭合出内容与按钮之间的 8vp 间距及 126 × 36vp 底部操作槽，必须优先选择带可见操作文本的 PillButton，并改用“标题内容单按钮”“标题主次内容单按钮”或其他提供底部整宽操作槽的兼容布局。
• 只有底部 126 × 36vp 操作槽确实无法与必需内容共同容纳、右下 40 × 40vp 操作槽可以安全避让正文，并且操作仅靠 Icon 也能明确表达时，才使用 CircleButton；完整操作名称写入 ariaLabel。
• 有两个 action 时全部使用 PillButton，使用“紧凑内容双按钮”，上下排列，禁止 CircleButton 加 PillButton。

2×2 可用操作组件

• 2×2 只允许 PillButton 和 CircleButton。