@szc-ft/mcp-szcd-client 0.25.0 → 0.26.0

package/agents/opencode-extension/agents/szcd-component-expert.md

@@ -131,6 +131,27 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 | 元素归属 | 凭 x/y 坐标判定（"x=272 列都是同区域"） | 看 `getMultipleNodeInfo` 返回的 `parent.id/name` 字段 |
 | 颜色提取 | 跳过 group 只取 text/rectangle | 同批提交 group ID，从 `style.fills` 取渐变背景 |
 
+#### getMultipleNodeInfo 返回字段契约（sketch-mcp-server ≥ v1.6.1）
+
+| 字段 | 适用类型 | 用途 |
+|------|----------|------|
+| `position:{x,y}` + `size:{width,height}` | 全部 | 步骤 2.6 表 1/2/3/4 的坐标推理 |
+| `parent:{id,name,type}` | 全部（顶层除外） | 步骤 2.6 表 1 大区归属、Pass 2 质检 |
+| `style.fills[].{color,gradient}` | rectangle / group / text | 表 5 样式映射 |
+| `style.borders[].{color,thickness}` | rectangle / group | 表 5 样式映射 |
+| `style.shadows[]` | rectangle / group | 表 5 样式映射 |
+| `text.attributes[0].attributes.{fontFamily,fontSize,color,lineHeight}` | text | 字号/字重/颜色（fontFamily 编码字重，如 PingFangSC-Semibold → 600） |
+| `children:[id]` | group / artboard | 推断容器子节点集合（与 parent 反向印证） |
+| `isVisualContainer:bool` | group / artboard | true = 该 group 自身带 fills/borders/shadows，必须作为 UI 容器渲染（不是纯图层分组） |
+| `shape.cornerRadius` | rectangle / oval | 圆角 |
+
+**字段缺失自检**（任一项失败 → sketch-mcp-server 版本过旧，升级到 ≥ v1.6.1 后重跑）：
+
+- [ ] 任取一个 text 节点，`parent.id` 非空 ✅
+- [ ] 任取一个 group 节点，`isVisualContainer` 类型是 boolean、`children` 是数组 ✅
+- [ ] 任取一个 rectangle 节点，`style.fills` 数组存在（即使为空也要是 `[]` 不能 undefined） ✅
+- [ ] 任取一个 text 节点，`text.attributes[0].attributes.fontFamily` 可读出（编码字重） ✅
+
 **实战经验沉淀（重要）**：
 
 **收获 1：首轮 `getMultipleNodeInfo` 必须全量拉取，不能挑**
@@ -145,15 +166,20 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
 正确做法：用 `queryNodes(type=["text","rectangle","group"])` 一次拿三类 ID，`getMultipleNodeInfo` 返回的 `parent` 字段直接告诉你归属关系
 
-**收获 3：元素归属必须走 group 父子关系，禁止 x 坐标平面判定**
+**收获 3：归属判定走 x+y+parent 三轴联合，禁止单轴定论（坐标和 parent 互为纠错器）**
 
-实战教训：`'主题'text(x=272,y=149)` 被错误识别为内容区块标题，实际是左侧树标题（与树节点同 x=272 列）。同列坐标不代表同区域。
+实战教训：
+- 反例 A：`'主题'text(x=272,y=149)` 单看 x 在右侧内容区列，但 `parent.name=leftTreeHeader` 强语义 → 归左树（情形 C：parent 修正坐标）
+- 反例 B（反馈 #11）：`'段码含义'text(x=300,y=257)` 坐标落在 `渐变容器(x=240..960, y=189..297)` 内，但 parent 是兄弟编组 `cataMain` → 视觉上属于渐变容器内（情形 B：图层拆开，按坐标渲染）
 
 正确做法：
-- 步骤 2 拿到完整节点树后，先识别顶层 group 分区（通常 2-5 个，对应 LeftTree区/Query+Table区/信息栏区/标题栏区）
-- `getMultipleNodeInfo` v1.5.0+ **自动返回** `parent: { id, name, type }` 字段，按 parent 归属到具体分区
-- "主题"这类标题文本，先看 `parent.name` 是否带 "LeftTree" / "树" / "PageContent" 等容器关键字，不要看 x 坐标
-- 坐标仅作为同 parent 内子元素排序兜底使用
+- 步骤 2.5 第 4 步先 `mode="tree"` 看顶层 group 分区（通常 2-5 个）
+- 步骤 2.6 做双向校验：Pass 1 坐标推假设 → Pass 2 parent 质检 → 四类情形 A/B/C/D 处理
+- 大区归属：`parent.name` 含 `LeftTree/树/PageContent/sidebar/cataMain` 等强语义关键字时优先于 x 分布
+- 容器归属：必须 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]`，单轴判定无效
+- 跨分区不比 y；同分区内按 y 升序；同行（y 差<8px）按 x 升序
+
+详细决策矩阵见步骤 2.6。
 
 **收获 4：信息栏/卡片容器必须先取 group 再取子元素**
 
@@ -199,14 +225,129 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 - **兜底方案**：① 用 `extractBitmaps` 提取的 PNG/PDF 资源；② `matchIconFromName` 的 Top-1（若 source=compound）；③ unmatched 时按 parent 上下文 + 上表选 antd `@ant-design/icons` 复合图标；④ 在代码注释中标注"⚠️ 矢量图标用 antd 图标替代，原始 Sketch 为 shapePath"
 
-**提示（sketch-mcp-server v1.5.0+）**：
+**收获 8：rectangle 的 fill/border 必须以内联样式或精确选择器落到 DOM，禁止借用通用 CSS class**
+
+实战教训（反馈 #11）：5 个段码视觉块的颜色（#f2f8fd/#f5ffed/#fffbe6/#f5f6f7）完整地从 rectangle 节点拿到了，但代码却用了 `.beforebg{background:#ebf0ff}` 这种与设计稿无对应关系的通用 class，导致 5 个块颜色全错。
+
+正确做法：
+- 步骤 2.6 的样式映射表（表 5）必须为每个"颜色块"列出 rectangle 数据 → 内联 style 的对应关系
+- 写代码时直接用 `<div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}>`
+- 若必须用 CSS class，类名要能反向追到 Sketch 节点（如 `.segmentBlock-blue` 而非 `.beforebg`），且 class 内容必须**精确等于** rectangle 的 fill/border
+- 反例排查：写完代码后 grep 一下 CSS class 名，出现 `.bg1/.box2/.before*` 这类无语义类名、且颜色和设计稿对不上 → 几乎确定是凭空兜底
+
+### 步骤2.6：布局推理（必做，写代码前的最后一道关）
+
+⚠️ 这一步专治"数据全拿到却放错位置"。反馈 #11 的 5 处错位全部由跳过此步骤导致。
+
+**核心思路**：x+y 坐标先画"视觉假设"，parent 字段做质检纠错。两套信号**互为纠错器**，不是单方向"谁优先"。
+
+**输入**：步骤 2.5 产出的 `text + rectangle + group` 节点全量数据（含 `position.{x,y}`、`size.{width,height}`、`parent.{id,name,type}`、`style`、`isVisualContainer`）
+
+#### Pass 1：坐标推假设（产出 5 张表）
+
+每张表都必须输出，即使某类节点为空也要写"无"。
+
+##### 表 1：分区识别表（x+y+parent 联合，定大区）
+
+```
+| 节点 name      | x   | y   | parent.name      | 推断分区     | 决策依据                |
+|----------------|-----|-----|------------------|--------------|-------------------------|
+| 主题(text)     | 272 | 149 | leftTreeHeader   | 左树标题区   | parent 强语义压过 x 列  |
+| 段码定义(text) | 320 | 200 | cataMain         | 右侧内容-顶部 | parent 含 PageContent 类语义 |
+```
+
+判定流程：
+1. 按 x 把画板切成 1-3 列（x<300 → 左区、x≥300 → 右区，或按设计稿实际边界）
+2. 用 `parent.name` 校验：含 `LeftTree/树/sidebar/cataMain/PageContent/header/footer` 等关键字时以 parent 为准
+3. 冲突时遵循"收获 3"的 A/B/C/D 矩阵（见下方 Pass 2）
+
+→ 此表输出**布局类型**：UpDown（单列）/ LeftRight（双列）/ LeftMiddleRight（三列）
+
+##### 表 2：纵向顺序表（同分区内按 y）
+
+```
+| 分区       | 节点          | y   | 推断角色          |
+|------------|---------------|-----|-------------------|
+| 右侧内容区 | 段码定义      | 200 | 卡片 1            |
+| 右侧内容区 | Tabs          | 420 | Tabs(type=card)   |
+| 右侧内容区 | 配置说明      | 478 | 卡片 2(Tabs 下方) |
+```
+
+铁律：**同分区内**渲染顺序按 y 升序。跨分区不比 y（左树第 100 行 y 和右内容区第 1 行 y 没有可比性）。
+
+##### 表 3：横向排列表（同行按 x，y 差<8px 视为同行）
+
+```
+| 分区/容器       | 节点         | x   | y   | 推断角色                |
+|-----------------|--------------|-----|-----|-------------------------|
+| Query 操作栏    | 名称输入框   | 320 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 状态下拉     | 540 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 查询按钮     | 980 | 50  | 操作按钮(右对齐)        |
+```
+
+判定流程：
+1. y 差<8px 识别同一行
+2. 同行按 x 升序排
+3. 计算 x 间距推算 antd Col span（24 栅格）或 flex
+4. 最右元素若 `x + width` 接近容器右边界 → 右对齐（justify-content: flex-end）
+
+##### 表 4：容器归属表（x+y 双轴边界检测）
+
+仅对 `isVisualContainer === true` 的 group 和带 fill/border 的 rectangle 做检测。
+
+```
+| 容器             | x..x+w   | y..y+h   | 落入子元素                       |
+|------------------|----------|----------|----------------------------------|
+| 渐变容器(group)  | 240..960 | 189..297 | 段码含义(x=300,y=257) ✅          |
+| 段码块-蓝(rect)  | 320..420 | 320..360 | (无子节点，仅样式)               |
+```
+
+判定式：子元素 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]` → 渲染在容器内部。**单轴判定无效**。
+
+##### 表 5：样式映射表（rectangle/group fill → UI 组件内联样式）
+
+```
+| Sketch 节点          | 数据来源                 | bg/border                | 映射到代码                                                |
+|----------------------|--------------------------|--------------------------|-----------------------------------------------------------|
+| 段码块-蓝(rectangle) | style.fills[0]/borders[0]| bg #f2f8fd / b #d9eafb   | <div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}> |
+| 渐变容器(group)      | style.fills[0].gradient  | linear #f3faff→#f8fdff   | <div style={{background:'linear-gradient(180deg,#f3faff,#f8fdff)'}}> |
+| Tab 激活态           | rect bg #fff border #0079f7 | bg #fff / b #0079f7   | Tabs type="card" + .segmentTabs .ant-tabs-tab-active 覆盖 |
+```
+
+铁律（见收获 8）：rectangle 的 fill/border 必须以**内联样式**或精确选择器落到代码，**禁止**用 `.beforebg{background:#ebf0ff}` 这类与设计稿无对应关系的 CSS class。
+
+#### Pass 2：parent 质检（按 A/B/C/D 矩阵处理冲突）
+
+逐行扫表 1，对照 parent 字段：
+
+| 情形 | 坐标判定 | parent 判定 | 处理 |
+|------|----------|-------------|------|
+| A | 在容器 X 内 | parent 链含 X | ✅ 双向一致，直接采用 |
+| B | 在容器 X 内 | parent 是兄弟节点 Y | ⚠️ **视觉容器优先**（设计师把图层拆开了）→ 按坐标渲染到 X 内 |
+| C | 不在容器 X 内 | parent.name 强语义 = X | ⚠️ **parent 优先**（绝对定位/溢出布局）→ 按 parent 归属，加 `position:absolute` 标注 |
+| D | 双向都不落 | parent 是顶层 | 独立元素，按坐标走纵向顺序 |
+
+输出**最终归属表**：在表 1 末尾追加 `情形(A/B/C/D)` 列。
+
+#### Pass 3：自检清单（写代码前必跑）
+
+- [ ] 表 1 是否按 x 分布判定了布局类型（UpDown / LeftRight / LeftMiddleRight）？
+- [ ] 表 2 同分区内是否按 y 排序，没有跨分区比 y？
+- [ ] 表 3 同行元素（y 差<8px）是否按 x 排序，计算了栅格 span 或右对齐？
+- [ ] 表 4 容器归属是否做了 x+y 双轴检测，不是只看一轴？
+- [ ] 表 5 所有"颜色块/卡片/渐变"样式都来自 rectangle/group 的 style.fills/borders，没有出现凭空 CSS class？
+- [ ] Pass 2 冲突行是否标了 A/B/C/D 情形和决策依据？
+
+任一项 ❌ → 回 Pass 1 补；禁止跳到步骤 3 前未输出全部 5 张表 + 最终归属表。
+
+**提示（sketch-mcp-server v1.6.1+）**：
 - 大型 .sketch 文件先 `queryNodes(pageId, type="artboard")` 锁定目标画板，避免一次性加载整个文档
 - `queryNodes(pageId, type=["text","rectangle","group"])` 一次拿三类节点 ID（type 字段支持数组），跳过 `getPageStructure(mode="ids")` 单独调用
 - `getPageStructure(pageId, mode="tree", maxDepth=2-3)` 用于看分区层级；`mode="summary"` 用于按类型统计概况
-- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段，元素归属直接走 parent，禁止用 x/y 坐标
+- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段 + group/artboard 额外有 `children` 和 `isVisualContainer` —— 步骤 2.6 的双向校验同时用 parent 和 x/y，不是只挑一个
 - `matchIconFromName` 评分制返回 Top-3 + `bestMatch.source === "compound"` 强映射，shapePath 节点优先走它
 - 仅当结构化样式数据仍不足（如复杂渐变、阴影）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
-- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g @szc-ft/sketch-mcp-server`
+- 如果 sketch-mcp-server 工具不可用或版本 < v1.6.1（parent / isVisualContainer 字段缺失），提示用户升级：`npm install -g @szc-ft/sketch-mcp-server@latest`
 
 ### 步骤3：分析设计稿（条件执行）
 
@@ -332,6 +473,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ProTable/ProForm 等使用 valueType 配置列/字段类型
 - 复合组件配合 TemplateMode 使用实现标准页面布局
 
+
 **交互节点**：代码生成后，主动询问用户是否需要调整：
 - "代码已生成，是否需要调整样式或交互细节？"
 - "是否需要补充表单校验规则？"

package/agents/qwen-extension/agents/szcd-component-expert.md

@@ -127,6 +127,27 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 | 元素归属 | 凭 x/y 坐标判定（"x=272 列都是同区域"） | 看 `getMultipleNodeInfo` 返回的 `parent.id/name` 字段 |
 | 颜色提取 | 跳过 group 只取 text/rectangle | 同批提交 group ID，从 `style.fills` 取渐变背景 |
 
+#### getMultipleNodeInfo 返回字段契约（sketch-mcp-server ≥ v1.6.1）
+
+| 字段 | 适用类型 | 用途 |
+|------|----------|------|
+| `position:{x,y}` + `size:{width,height}` | 全部 | 步骤 2.6 表 1/2/3/4 的坐标推理 |
+| `parent:{id,name,type}` | 全部（顶层除外） | 步骤 2.6 表 1 大区归属、Pass 2 质检 |
+| `style.fills[].{color,gradient}` | rectangle / group / text | 表 5 样式映射 |
+| `style.borders[].{color,thickness}` | rectangle / group | 表 5 样式映射 |
+| `style.shadows[]` | rectangle / group | 表 5 样式映射 |
+| `text.attributes[0].attributes.{fontFamily,fontSize,color,lineHeight}` | text | 字号/字重/颜色（fontFamily 编码字重，如 PingFangSC-Semibold → 600） |
+| `children:[id]` | group / artboard | 推断容器子节点集合（与 parent 反向印证） |
+| `isVisualContainer:bool` | group / artboard | true = 该 group 自身带 fills/borders/shadows，必须作为 UI 容器渲染（不是纯图层分组） |
+| `shape.cornerRadius` | rectangle / oval | 圆角 |
+
+**字段缺失自检**（任一项失败 → sketch-mcp-server 版本过旧，升级到 ≥ v1.6.1 后重跑）：
+
+- [ ] 任取一个 text 节点，`parent.id` 非空 ✅
+- [ ] 任取一个 group 节点，`isVisualContainer` 类型是 boolean、`children` 是数组 ✅
+- [ ] 任取一个 rectangle 节点，`style.fills` 数组存在（即使为空也要是 `[]` 不能 undefined） ✅
+- [ ] 任取一个 text 节点，`text.attributes[0].attributes.fontFamily` 可读出（编码字重） ✅
+
 **实战经验沉淀（重要）**：
 
 **收获 1：首轮 `getMultipleNodeInfo` 必须全量拉取，不能挑**
@@ -141,15 +162,20 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
 正确做法：用 `queryNodes(type=["text","rectangle","group"])` 一次拿三类 ID，`getMultipleNodeInfo` 返回的 `parent` 字段直接告诉你归属关系
 
-**收获 3：元素归属必须走 group 父子关系，禁止 x 坐标平面判定**
+**收获 3：归属判定走 x+y+parent 三轴联合，禁止单轴定论（坐标和 parent 互为纠错器）**
 
-实战教训：`'主题'text(x=272,y=149)` 被错误识别为内容区块标题，实际是左侧树标题（与树节点同 x=272 列）。同列坐标不代表同区域。
+实战教训：
+- 反例 A：`'主题'text(x=272,y=149)` 单看 x 在右侧内容区列，但 `parent.name=leftTreeHeader` 强语义 → 归左树（情形 C：parent 修正坐标）
+- 反例 B（反馈 #11）：`'段码含义'text(x=300,y=257)` 坐标落在 `渐变容器(x=240..960, y=189..297)` 内，但 parent 是兄弟编组 `cataMain` → 视觉上属于渐变容器内（情形 B：图层拆开，按坐标渲染）
 
 正确做法：
-- 步骤 2 拿到完整节点树后，先识别顶层 group 分区（通常 2-5 个，对应 LeftTree区/Query+Table区/信息栏区/标题栏区）
-- `getMultipleNodeInfo` v1.5.0+ **自动返回** `parent: { id, name, type }` 字段，按 parent 归属到具体分区
-- "主题"这类标题文本，先看 `parent.name` 是否带 "LeftTree" / "树" / "PageContent" 等容器关键字，不要看 x 坐标
-- 坐标仅作为同 parent 内子元素排序兜底使用
+- 步骤 2.5 第 4 步先 `mode="tree"` 看顶层 group 分区（通常 2-5 个）
+- 步骤 2.6 做双向校验：Pass 1 坐标推假设 → Pass 2 parent 质检 → 四类情形 A/B/C/D 处理
+- 大区归属：`parent.name` 含 `LeftTree/树/PageContent/sidebar/cataMain` 等强语义关键字时优先于 x 分布
+- 容器归属：必须 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]`，单轴判定无效
+- 跨分区不比 y；同分区内按 y 升序；同行（y 差<8px）按 x 升序
+
+详细决策矩阵见步骤 2.6。
 
 **收获 4：信息栏/卡片容器必须先取 group 再取子元素**
 
@@ -195,14 +221,129 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 
 - **兜底方案**：① 用 `extractBitmaps` 提取的 PNG/PDF 资源；② `matchIconFromName` 的 Top-1（若 source=compound）；③ unmatched 时按 parent 上下文 + 上表选 antd `@ant-design/icons` 复合图标；④ 在代码注释中标注"⚠️ 矢量图标用 antd 图标替代，原始 Sketch 为 shapePath"
 
-**提示（sketch-mcp-server v1.5.0+）**：
+**收获 8：rectangle 的 fill/border 必须以内联样式或精确选择器落到 DOM，禁止借用通用 CSS class**
+
+实战教训（反馈 #11）：5 个段码视觉块的颜色（#f2f8fd/#f5ffed/#fffbe6/#f5f6f7）完整地从 rectangle 节点拿到了，但代码却用了 `.beforebg{background:#ebf0ff}` 这种与设计稿无对应关系的通用 class，导致 5 个块颜色全错。
+
+正确做法：
+- 步骤 2.6 的样式映射表（表 5）必须为每个"颜色块"列出 rectangle 数据 → 内联 style 的对应关系
+- 写代码时直接用 `<div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}>`
+- 若必须用 CSS class，类名要能反向追到 Sketch 节点（如 `.segmentBlock-blue` 而非 `.beforebg`），且 class 内容必须**精确等于** rectangle 的 fill/border
+- 反例排查：写完代码后 grep 一下 CSS class 名，出现 `.bg1/.box2/.before*` 这类无语义类名、且颜色和设计稿对不上 → 几乎确定是凭空兜底
+
+### 步骤2.6：布局推理（必做，写代码前的最后一道关）
+
+⚠️ 这一步专治"数据全拿到却放错位置"。反馈 #11 的 5 处错位全部由跳过此步骤导致。
+
+**核心思路**：x+y 坐标先画"视觉假设"，parent 字段做质检纠错。两套信号**互为纠错器**，不是单方向"谁优先"。
+
+**输入**：步骤 2.5 产出的 `text + rectangle + group` 节点全量数据（含 `position.{x,y}`、`size.{width,height}`、`parent.{id,name,type}`、`style`、`isVisualContainer`）
+
+#### Pass 1：坐标推假设（产出 5 张表）
+
+每张表都必须输出，即使某类节点为空也要写"无"。
+
+##### 表 1：分区识别表（x+y+parent 联合，定大区）
+
+```
+| 节点 name      | x   | y   | parent.name      | 推断分区     | 决策依据                |
+|----------------|-----|-----|------------------|--------------|-------------------------|
+| 主题(text)     | 272 | 149 | leftTreeHeader   | 左树标题区   | parent 强语义压过 x 列  |
+| 段码定义(text) | 320 | 200 | cataMain         | 右侧内容-顶部 | parent 含 PageContent 类语义 |
+```
+
+判定流程：
+1. 按 x 把画板切成 1-3 列（x<300 → 左区、x≥300 → 右区，或按设计稿实际边界）
+2. 用 `parent.name` 校验：含 `LeftTree/树/sidebar/cataMain/PageContent/header/footer` 等关键字时以 parent 为准
+3. 冲突时遵循"收获 3"的 A/B/C/D 矩阵（见下方 Pass 2）
+
+→ 此表输出**布局类型**：UpDown（单列）/ LeftRight（双列）/ LeftMiddleRight（三列）
+
+##### 表 2：纵向顺序表（同分区内按 y）
+
+```
+| 分区       | 节点          | y   | 推断角色          |
+|------------|---------------|-----|-------------------|
+| 右侧内容区 | 段码定义      | 200 | 卡片 1            |
+| 右侧内容区 | Tabs          | 420 | Tabs(type=card)   |
+| 右侧内容区 | 配置说明      | 478 | 卡片 2(Tabs 下方) |
+```
+
+铁律：**同分区内**渲染顺序按 y 升序。跨分区不比 y（左树第 100 行 y 和右内容区第 1 行 y 没有可比性）。
+
+##### 表 3：横向排列表（同行按 x，y 差<8px 视为同行）
+
+```
+| 分区/容器       | 节点         | x   | y   | 推断角色                |
+|-----------------|--------------|-----|-----|-------------------------|
+| Query 操作栏    | 名称输入框   | 320 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 状态下拉     | 540 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 查询按钮     | 980 | 50  | 操作按钮(右对齐)        |
+```
+
+判定流程：
+1. y 差<8px 识别同一行
+2. 同行按 x 升序排
+3. 计算 x 间距推算 antd Col span（24 栅格）或 flex
+4. 最右元素若 `x + width` 接近容器右边界 → 右对齐（justify-content: flex-end）
+
+##### 表 4：容器归属表（x+y 双轴边界检测）
+
+仅对 `isVisualContainer === true` 的 group 和带 fill/border 的 rectangle 做检测。
+
+```
+| 容器             | x..x+w   | y..y+h   | 落入子元素                       |
+|------------------|----------|----------|----------------------------------|
+| 渐变容器(group)  | 240..960 | 189..297 | 段码含义(x=300,y=257) ✅          |
+| 段码块-蓝(rect)  | 320..420 | 320..360 | (无子节点，仅样式)               |
+```
+
+判定式：子元素 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]` → 渲染在容器内部。**单轴判定无效**。
+
+##### 表 5：样式映射表（rectangle/group fill → UI 组件内联样式）
+
+```
+| Sketch 节点          | 数据来源                 | bg/border                | 映射到代码                                                |
+|----------------------|--------------------------|--------------------------|-----------------------------------------------------------|
+| 段码块-蓝(rectangle) | style.fills[0]/borders[0]| bg #f2f8fd / b #d9eafb   | <div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}> |
+| 渐变容器(group)      | style.fills[0].gradient  | linear #f3faff→#f8fdff   | <div style={{background:'linear-gradient(180deg,#f3faff,#f8fdff)'}}> |
+| Tab 激活态           | rect bg #fff border #0079f7 | bg #fff / b #0079f7   | Tabs type="card" + .segmentTabs .ant-tabs-tab-active 覆盖 |
+```
+
+铁律（见收获 8）：rectangle 的 fill/border 必须以**内联样式**或精确选择器落到代码，**禁止**用 `.beforebg{background:#ebf0ff}` 这类与设计稿无对应关系的 CSS class。
+
+#### Pass 2：parent 质检（按 A/B/C/D 矩阵处理冲突）
+
+逐行扫表 1，对照 parent 字段：
+
+| 情形 | 坐标判定 | parent 判定 | 处理 |
+|------|----------|-------------|------|
+| A | 在容器 X 内 | parent 链含 X | ✅ 双向一致，直接采用 |
+| B | 在容器 X 内 | parent 是兄弟节点 Y | ⚠️ **视觉容器优先**（设计师把图层拆开了）→ 按坐标渲染到 X 内 |
+| C | 不在容器 X 内 | parent.name 强语义 = X | ⚠️ **parent 优先**（绝对定位/溢出布局）→ 按 parent 归属，加 `position:absolute` 标注 |
+| D | 双向都不落 | parent 是顶层 | 独立元素，按坐标走纵向顺序 |
+
+输出**最终归属表**：在表 1 末尾追加 `情形(A/B/C/D)` 列。
+
+#### Pass 3：自检清单（写代码前必跑）
+
+- [ ] 表 1 是否按 x 分布判定了布局类型（UpDown / LeftRight / LeftMiddleRight）？
+- [ ] 表 2 同分区内是否按 y 排序，没有跨分区比 y？
+- [ ] 表 3 同行元素（y 差<8px）是否按 x 排序，计算了栅格 span 或右对齐？
+- [ ] 表 4 容器归属是否做了 x+y 双轴检测，不是只看一轴？
+- [ ] 表 5 所有"颜色块/卡片/渐变"样式都来自 rectangle/group 的 style.fills/borders，没有出现凭空 CSS class？
+- [ ] Pass 2 冲突行是否标了 A/B/C/D 情形和决策依据？
+
+任一项 ❌ → 回 Pass 1 补；禁止跳到步骤 3 前未输出全部 5 张表 + 最终归属表。
+
+**提示（sketch-mcp-server v1.6.1+）**：
 - 大型 .sketch 文件先 `queryNodes(pageId, type="artboard")` 锁定目标画板，避免一次性加载整个文档
 - `queryNodes(pageId, type=["text","rectangle","group"])` 一次拿三类节点 ID（type 字段支持数组），跳过 `getPageStructure(mode="ids")` 单独调用
 - `getPageStructure(pageId, mode="tree", maxDepth=2-3)` 用于看分区层级；`mode="summary"` 用于按类型统计概况
-- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段，元素归属直接走 parent，禁止用 x/y 坐标
+- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段 + group/artboard 额外有 `children` 和 `isVisualContainer` —— 步骤 2.6 的双向校验同时用 parent 和 x/y，不是只挑一个
 - `matchIconFromName` 评分制返回 Top-3 + `bestMatch.source === "compound"` 强映射，shapePath 节点优先走它
 - 仅当结构化样式数据仍不足（如复杂渐变、阴影）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
-- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g @szc-ft/sketch-mcp-server`
+- 如果 sketch-mcp-server 工具不可用或版本 < v1.6.1（parent / isVisualContainer 字段缺失），提示用户升级：`npm install -g @szc-ft/sketch-mcp-server@latest`
 
 ### 步骤3：分析设计稿（条件执行）
 
@@ -328,6 +469,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - ProTable/ProForm 等使用 valueType 配置列/字段类型
 - 复合组件配合 TemplateMode 使用实现标准页面布局
 
+
 **交互节点**：代码生成后，主动询问用户是否需要调整：
 - "代码已生成，是否需要调整样式或交互细节？"
 - "是否需要补充表单校验规则？"

package/agents/src/szcd-component-expert.md

@@ -202,6 +202,27 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 元素归属 | 凭 x/y 坐标判定（"x=272 列都是同区域"） | 看 `getMultipleNodeInfo` 返回的 `parent.id/name` 字段 |
 | 颜色提取 | 跳过 group 只取 text/rectangle | 同批提交 group ID，从 `style.fills` 取渐变背景 |
 
+#### getMultipleNodeInfo 返回字段契约（sketch-mcp-server ≥ v1.6.1）
+
+| 字段 | 适用类型 | 用途 |
+|------|----------|------|
+| `position:{x,y}` + `size:{width,height}` | 全部 | 步骤 2.6 表 1/2/3/4 的坐标推理 |
+| `parent:{id,name,type}` | 全部（顶层除外） | 步骤 2.6 表 1 大区归属、Pass 2 质检 |
+| `style.fills[].{color,gradient}` | rectangle / group / text | 表 5 样式映射 |
+| `style.borders[].{color,thickness}` | rectangle / group | 表 5 样式映射 |
+| `style.shadows[]` | rectangle / group | 表 5 样式映射 |
+| `text.attributes[0].attributes.{fontFamily,fontSize,color,lineHeight}` | text | 字号/字重/颜色（fontFamily 编码字重，如 PingFangSC-Semibold → 600） |
+| `children:[id]` | group / artboard | 推断容器子节点集合（与 parent 反向印证） |
+| `isVisualContainer:bool` | group / artboard | true = 该 group 自身带 fills/borders/shadows，必须作为 UI 容器渲染（不是纯图层分组） |
+| `shape.cornerRadius` | rectangle / oval | 圆角 |
+
+**字段缺失自检**（任一项失败 → sketch-mcp-server 版本过旧，升级到 ≥ v1.6.1 后重跑）：
+
+- [ ] 任取一个 text 节点，`parent.id` 非空 ✅
+- [ ] 任取一个 group 节点，`isVisualContainer` 类型是 boolean、`children` 是数组 ✅
+- [ ] 任取一个 rectangle 节点，`style.fills` 数组存在（即使为空也要是 `[]` 不能 undefined） ✅
+- [ ] 任取一个 text 节点，`text.attributes[0].attributes.fontFamily` 可读出（编码字重） ✅
+
 **实战经验沉淀（重要）**：
 
 **收获 1：首轮 `getMultipleNodeInfo` 必须全量拉取，不能挑**
@@ -216,15 +237,20 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
 正确做法：用 `queryNodes(type=["text","rectangle","group"])` 一次拿三类 ID，`getMultipleNodeInfo` 返回的 `parent` 字段直接告诉你归属关系
 
-**收获 3：元素归属必须走 group 父子关系，禁止 x 坐标平面判定**
+**收获 3：归属判定走 x+y+parent 三轴联合，禁止单轴定论（坐标和 parent 互为纠错器）**
 
-实战教训：`'主题'text(x=272,y=149)` 被错误识别为内容区块标题，实际是左侧树标题（与树节点同 x=272 列）。同列坐标不代表同区域。
+实战教训：
+- 反例 A：`'主题'text(x=272,y=149)` 单看 x 在右侧内容区列，但 `parent.name=leftTreeHeader` 强语义 → 归左树（情形 C：parent 修正坐标）
+- 反例 B（反馈 #11）：`'段码含义'text(x=300,y=257)` 坐标落在 `渐变容器(x=240..960, y=189..297)` 内，但 parent 是兄弟编组 `cataMain` → 视觉上属于渐变容器内（情形 B：图层拆开，按坐标渲染）
 
 正确做法：
-- 步骤 2 拿到完整节点树后，先识别顶层 group 分区（通常 2-5 个，对应 LeftTree区/Query+Table区/信息栏区/标题栏区）
-- `getMultipleNodeInfo` v1.5.0+ **自动返回** `parent: { id, name, type }` 字段，按 parent 归属到具体分区
-- "主题"这类标题文本，先看 `parent.name` 是否带 "LeftTree" / "树" / "PageContent" 等容器关键字，不要看 x 坐标
-- 坐标仅作为同 parent 内子元素排序兜底使用
+- 步骤 2.5 第 4 步先 `mode="tree"` 看顶层 group 分区（通常 2-5 个）
+- 步骤 2.6 做双向校验：Pass 1 坐标推假设 → Pass 2 parent 质检 → 四类情形 A/B/C/D 处理
+- 大区归属：`parent.name` 含 `LeftTree/树/PageContent/sidebar/cataMain` 等强语义关键字时优先于 x 分布
+- 容器归属：必须 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]`，单轴判定无效
+- 跨分区不比 y；同分区内按 y 升序；同行（y 差<8px）按 x 升序
+
+详细决策矩阵见步骤 2.6。
 
 **收获 4：信息栏/卡片容器必须先取 group 再取子元素**
 
@@ -270,14 +296,129 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 - **兜底方案**：① 用 `extractBitmaps` 提取的 PNG/PDF 资源；② `matchIconFromName` 的 Top-1（若 source=compound）；③ unmatched 时按 parent 上下文 + 上表选 antd `@ant-design/icons` 复合图标；④ 在代码注释中标注"⚠️ 矢量图标用 antd 图标替代，原始 Sketch 为 shapePath"
 
-**提示（sketch-mcp-server v1.5.0+）**：
+**收获 8：rectangle 的 fill/border 必须以内联样式或精确选择器落到 DOM，禁止借用通用 CSS class**
+
+实战教训（反馈 #11）：5 个段码视觉块的颜色（#f2f8fd/#f5ffed/#fffbe6/#f5f6f7）完整地从 rectangle 节点拿到了，但代码却用了 `.beforebg{background:#ebf0ff}` 这种与设计稿无对应关系的通用 class，导致 5 个块颜色全错。
+
+正确做法：
+- 步骤 2.6 的样式映射表（表 5）必须为每个"颜色块"列出 rectangle 数据 → 内联 style 的对应关系
+- 写代码时直接用 `<div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}>`
+- 若必须用 CSS class，类名要能反向追到 Sketch 节点（如 `.segmentBlock-blue` 而非 `.beforebg`），且 class 内容必须**精确等于** rectangle 的 fill/border
+- 反例排查：写完代码后 grep 一下 CSS class 名，出现 `.bg1/.box2/.before*` 这类无语义类名、且颜色和设计稿对不上 → 几乎确定是凭空兜底
+
+### 步骤2.6：布局推理（必做，写代码前的最后一道关）
+
+⚠️ 这一步专治"数据全拿到却放错位置"。反馈 #11 的 5 处错位全部由跳过此步骤导致。
+
+**核心思路**：x+y 坐标先画"视觉假设"，parent 字段做质检纠错。两套信号**互为纠错器**，不是单方向"谁优先"。
+
+**输入**：步骤 2.5 产出的 `text + rectangle + group` 节点全量数据（含 `position.{x,y}`、`size.{width,height}`、`parent.{id,name,type}`、`style`、`isVisualContainer`）
+
+#### Pass 1：坐标推假设（产出 5 张表）
+
+每张表都必须输出，即使某类节点为空也要写"无"。
+
+##### 表 1：分区识别表（x+y+parent 联合，定大区）
+
+```
+| 节点 name      | x   | y   | parent.name      | 推断分区     | 决策依据                |
+|----------------|-----|-----|------------------|--------------|-------------------------|
+| 主题(text)     | 272 | 149 | leftTreeHeader   | 左树标题区   | parent 强语义压过 x 列  |
+| 段码定义(text) | 320 | 200 | cataMain         | 右侧内容-顶部 | parent 含 PageContent 类语义 |
+```
+
+判定流程：
+1. 按 x 把画板切成 1-3 列（x<300 → 左区、x≥300 → 右区，或按设计稿实际边界）
+2. 用 `parent.name` 校验：含 `LeftTree/树/sidebar/cataMain/PageContent/header/footer` 等关键字时以 parent 为准
+3. 冲突时遵循"收获 3"的 A/B/C/D 矩阵（见下方 Pass 2）
+
+→ 此表输出**布局类型**：UpDown（单列）/ LeftRight（双列）/ LeftMiddleRight（三列）
+
+##### 表 2：纵向顺序表（同分区内按 y）
+
+```
+| 分区       | 节点          | y   | 推断角色          |
+|------------|---------------|-----|-------------------|
+| 右侧内容区 | 段码定义      | 200 | 卡片 1            |
+| 右侧内容区 | Tabs          | 420 | Tabs(type=card)   |
+| 右侧内容区 | 配置说明      | 478 | 卡片 2(Tabs 下方) |
+```
+
+铁律：**同分区内**渲染顺序按 y 升序。跨分区不比 y（左树第 100 行 y 和右内容区第 1 行 y 没有可比性）。
+
+##### 表 3：横向排列表（同行按 x，y 差<8px 视为同行）
+
+```
+| 分区/容器       | 节点         | x   | y   | 推断角色                |
+|-----------------|--------------|-----|-----|-------------------------|
+| Query 操作栏    | 名称输入框   | 320 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 状态下拉     | 540 | 50  | Form.Item col-span=6    |
+| Query 操作栏    | 查询按钮     | 980 | 50  | 操作按钮(右对齐)        |
+```
+
+判定流程：
+1. y 差<8px 识别同一行
+2. 同行按 x 升序排
+3. 计算 x 间距推算 antd Col span（24 栅格）或 flex
+4. 最右元素若 `x + width` 接近容器右边界 → 右对齐（justify-content: flex-end）
+
+##### 表 4：容器归属表（x+y 双轴边界检测）
+
+仅对 `isVisualContainer === true` 的 group 和带 fill/border 的 rectangle 做检测。
+
+```
+| 容器             | x..x+w   | y..y+h   | 落入子元素                       |
+|------------------|----------|----------|----------------------------------|
+| 渐变容器(group)  | 240..960 | 189..297 | 段码含义(x=300,y=257) ✅          |
+| 段码块-蓝(rect)  | 320..420 | 320..360 | (无子节点，仅样式)               |
+```
+
+判定式：子元素 `x ∈ [容器x, 容器x+w]` **且** `y ∈ [容器y, 容器y+h]` → 渲染在容器内部。**单轴判定无效**。
+
+##### 表 5：样式映射表（rectangle/group fill → UI 组件内联样式）
+
+```
+| Sketch 节点          | 数据来源                 | bg/border                | 映射到代码                                                |
+|----------------------|--------------------------|--------------------------|-----------------------------------------------------------|
+| 段码块-蓝(rectangle) | style.fills[0]/borders[0]| bg #f2f8fd / b #d9eafb   | <div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}> |
+| 渐变容器(group)      | style.fills[0].gradient  | linear #f3faff→#f8fdff   | <div style={{background:'linear-gradient(180deg,#f3faff,#f8fdff)'}}> |
+| Tab 激活态           | rect bg #fff border #0079f7 | bg #fff / b #0079f7   | Tabs type="card" + .segmentTabs .ant-tabs-tab-active 覆盖 |
+```
+
+铁律（见收获 8）：rectangle 的 fill/border 必须以**内联样式**或精确选择器落到代码，**禁止**用 `.beforebg{background:#ebf0ff}` 这类与设计稿无对应关系的 CSS class。
+
+#### Pass 2：parent 质检（按 A/B/C/D 矩阵处理冲突）
+
+逐行扫表 1，对照 parent 字段：
+
+| 情形 | 坐标判定 | parent 判定 | 处理 |
+|------|----------|-------------|------|
+| A | 在容器 X 内 | parent 链含 X | ✅ 双向一致，直接采用 |
+| B | 在容器 X 内 | parent 是兄弟节点 Y | ⚠️ **视觉容器优先**（设计师把图层拆开了）→ 按坐标渲染到 X 内 |
+| C | 不在容器 X 内 | parent.name 强语义 = X | ⚠️ **parent 优先**（绝对定位/溢出布局）→ 按 parent 归属，加 `position:absolute` 标注 |
+| D | 双向都不落 | parent 是顶层 | 独立元素，按坐标走纵向顺序 |
+
+输出**最终归属表**：在表 1 末尾追加 `情形(A/B/C/D)` 列。
+
+#### Pass 3：自检清单（写代码前必跑）
+
+- [ ] 表 1 是否按 x 分布判定了布局类型（UpDown / LeftRight / LeftMiddleRight）？
+- [ ] 表 2 同分区内是否按 y 排序，没有跨分区比 y？
+- [ ] 表 3 同行元素（y 差<8px）是否按 x 排序，计算了栅格 span 或右对齐？
+- [ ] 表 4 容器归属是否做了 x+y 双轴检测，不是只看一轴？
+- [ ] 表 5 所有"颜色块/卡片/渐变"样式都来自 rectangle/group 的 style.fills/borders，没有出现凭空 CSS class？
+- [ ] Pass 2 冲突行是否标了 A/B/C/D 情形和决策依据？
+
+任一项 ❌ → 回 Pass 1 补；禁止跳到步骤 3 前未输出全部 5 张表 + 最终归属表。
+
+**提示（sketch-mcp-server v1.6.1+）**：
 - 大型 .sketch 文件先 `queryNodes(pageId, type="artboard")` 锁定目标画板，避免一次性加载整个文档
 - `queryNodes(pageId, type=["text","rectangle","group"])` 一次拿三类节点 ID（type 字段支持数组），跳过 `getPageStructure(mode="ids")` 单独调用
 - `getPageStructure(pageId, mode="tree", maxDepth=2-3)` 用于看分区层级；`mode="summary"` 用于按类型统计概况
-- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段，元素归属直接走 parent，禁止用 x/y 坐标
+- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部按 100 一批自动分片），无需手动拆分；每个节点自带 `parent: {id,name,type}` 字段 + group/artboard 额外有 `children` 和 `isVisualContainer` —— 步骤 2.6 的双向校验同时用 parent 和 x/y，不是只挑一个
 - `matchIconFromName` 评分制返回 Top-3 + `bestMatch.source === "compound"` 强映射，shapePath 节点优先走它
 - 仅当结构化样式数据仍不足（如复杂渐变、阴影）时，才回退到 `renderNodeAsBase64` + `{{TOOL:analyze_design_image}}`
-- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g @szc-ft/sketch-mcp-server`
+- 如果 sketch-mcp-server 工具不可用或版本 < v1.6.1（parent / isVisualContainer 字段缺失），提示用户升级：`npm install -g @szc-ft/sketch-mcp-server@latest`
 
 ### 步骤3：分析设计稿（条件执行）
 
@@ -478,9 +619,21 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 组件 | 依赖的 szcd 组件 | 依赖的 hooks |
 |------|-----------------|-------------|
 
+### 布局顺序（来自步骤 2.6 表 2 压缩，按 y 排序）
+[页面级垂直顺序，如：TitleAndBack → 段码定义卡片 → Tabs → 配置说明卡片]
+
+### 关键样式映射（来自步骤 2.6 表 5，仅列非默认样式）
+| UI 元素 | Sketch 数据来源 | 落地方式 |
+|---------|----------------|----------|
+| 段码块×5 | 5 个 rectangle 的 fills[0]/borders[0] | 内联 style |
+| 渐变容器 | group(isVisualContainer) 的 fills[0].gradient | 内联 linear-gradient |
+| Tab 激活态 | rectangle bg #fff border #0079f7 | type="card" + .segmentTabs 覆盖 |
+
 ### 备选方案（如有）
 [说明]
 ```
+
+用户在确认环节即可发现"段码块颜色没列上"或"Tab 样式漏识别"，避免反馈 #11 那样要等代码生成后反复修。
 <!-- /INCLUDE:enhanced -->
 
 <!-- INCLUDE:full -->
@@ -511,6 +664,22 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - Hooks 按依赖关系正确引入（如 useLeftTree、useTable）
 <!-- /INCLUDE:enhanced -->
 
+<!-- INCLUDE:enhanced -->
+#### 步骤 6 末尾必做：样式落地校验
+
+代码生成完成后，**逐行核对**步骤 2.6 表 5（样式映射表）的每一项是否真落到代码里：
+
+```
+| 样式映射表行                                | 代码中对应位置                                              | 校验 |
+|---------------------------------------------|-------------------------------------------------------------|------|
+| 段码块-蓝 bg #f2f8fd border #d9eafb         | CreateOrEdit.tsx:L120 `<div style={{background:'#f2f8fd',border:'1px solid #d9eafb'}}>` | ✅ |
+| 渐变容器 linear #f3faff→#f8fdff             | CreateOrEdit.tsx:L98 `style={{background:'linear-gradient(...)'}}` | ✅ |
+| Tab 激活态 bg #fff border #0079f7           | styles.less:L45 `.segmentTabs .ant-tabs-tab-active{...}`    | ✅ |
+```
+
+❌ 如果某行找不到对应代码位置 → 直接补到代码里再继续，**禁止说"代码已生成"前留缺口**。这是反馈 #11"5 个段码块全错"的根因——所有颜色都拿到了，但没逐一回查是否落到了代码上。
+<!-- /INCLUDE:enhanced -->
+
 <!-- EXCLUDE:enhanced -->
 **交互节点**：代码生成后，主动询问用户是否需要调整：
 - "代码已生成，是否需要调整样式或交互细节？"