一、技术背景与定位
1.1 核心挑战：两类自定义生码场景
AI 生码领域核心面临两类自定义需求，需针对性突破：
| 场景类型 | 说明 |
|---|---|
| A 类场景（100% 自定义） | 高度定制化、非标需求，无法套用 C 类样板间，需从零通过组件拼搭或自由编排生成代码。 |
| B 类场景（局部自定义） | 基于 C 类样板间，局部生成或集成自定义代码，分为 B1（插槽）、B2（区块）两种形式。 |
1.2 核心洞察：生码需求同源性
A 类整页生码与 B1/B2 局部生码技术内核完全同源，均需"理解组件化与自由逻辑"的 AI 生码引擎支撑：
- A 类生码：
AI + 组件 A + 组件 B + ... → 完整页面 - B1 局部生码：
AI + "局部 JSSlot" → 业务逻辑代码片段 - B2 局部生码：
AI + 组件 X + 组件 Y → 自定义区块
1.3 战略定位：从独立产品到核心服务
为避免重复开发，A 类生码方案进行战略重定位，聚焦"能力复用"：
| 版本 | 定位 | 说明 |
|---|---|---|
| v1.0 | 独立组件拼搭方案 | 覆盖全场景，功能分散，复用性差。 |
| v2.0 | 可复用核心生码服务 | 作为生码平台能力底座，支撑各类自定义生码需求。 |
1.4 核心目标
构建高内聚、高 SLA、可调用的 A 类智能生码引擎，提供两种服务模式，覆盖全自定义场景：
| 服务模式 | 说明 |
|---|---|
| 独立服务（服务 A 类） | 开发者可直接调用，通过组件拼搭或自然语言描述，快速开发纯 A 类页面。 |
| 嵌入式服务（服务 B1/B2） | C 类工作流处理 B1/B2 需求时，将自定义部分作为 API 请求发送，引擎返回代码完成拼接。 |
二、服务契约定义
A 类生码引擎为输入驱动型 API，核心原则：调用方输入模式直接决定输出 SLA。共定义 4 种输入模式，适配不同场景：
2.1 GUI DSL (JSSlot + CustomBlocks)
| 属性 | 说明 |
|---|---|
| 核心描述 | JSON 结构化 DSL，精准传递 UI 结构与配置。 |
| 输入举例 | 含组件、属性、子节点的 JSON 格式 DSL（示例如下）。 |
| 输出 SLA | UI 还原度高（对齐 GUI）；代码质量同组件库 Demo；无逻辑层（GUI 不含逻辑信息）。 |
| 主要用途 | C + 局部 JSSlot + CustomBlocks、C + GUI 自定义拖拽场景。 |
typescript
{
"type": "JSSlot",
"id": "slot_form_range",
"value": [
{
"componentName": "Layout.Blocks",
"id": "layout_horizontal_center",
"props": {
"direction": "horizontal",
"style": { "alignItems": "center", "justifyContent": "flex-start" }
},
"children": [
{ "componentName": "Input", "id": "input_range_start", "props": { "defaultValue": "", "size": "default" } },
{ "componentName": "Text", "id": "text_separator", "props": { "children": "-", "size": "body" } },
{ "componentName": "Input", "id": "input_range_end", "props": { "defaultValue": "", "size": "default" } }
]
}
]
}2.2 Text (纯文本)
| 属性 | 说明 |
|---|---|
| 核心描述 | 简洁自然语言指令，传递需求意图。 |
| 输入举例 | 1. 添加一个按钮；2. Table 添加 user 列。 |
| 输出 SLA | UI 还原度中等（AI 自主选 UI 模型）；代码质量同组件库 Demo；含对应业务逻辑。 |
| 主要用途 | C + 自定义区块（文本描述）、纯文本需求场景。 |
2.3 PNG/Image (静态截图)
| 属性 | 说明 |
|---|---|
| 核心描述 | 静态截图，直观呈现视觉需求。 |
| 输入举例 | 需求相关静态截图文件。 |
| 输出 SLA | UI 还原度中等（AI 多模态解析）；代码质量同组件库 Demo；无逻辑层。 |
| 主要用途 | 基础能力储备，暂无明确落地场景。 |
2.4 Figma Link (设计稿链接)
| 属性 | 说明 |
|---|---|
| 核心描述 | Figma 设计稿链接，可提取完整设计信息。 |
| 输入举例 | 设计稿链接 |
| 输出 SLA | UI 还原度高；代码质量与出码方案相关；无逻辑层。 |
| 主要用途 | C + 自定义区块（设计稿）、全新 A 类页面开发。 |
三、出码方案
引擎提供两种核心出码工作流，适配不同输入类型，平衡质量与效率：
3.1 DSL/Text/PNG 工作流（核心）
3.1.1 工作流概述
作为引擎核心工作流，采用 AI 驱动模式，无需依赖 C 类样板间，可统一处理 A 类整页、B1 插槽、B2 区块所有自定义生码需求，兼顾质量与效率。
核心流程：
plain
输入 → 组件功能清单 → 组件签名生成 → RAG 检索 → 代码生成(v1) → 代码校验 → 代码修复(v2) → 出码支持输入类型：
- GUI DSL：适配 B1 JSSlot、B2 CustomBlock 场景，传递精准 UI 结构与配置
- Text：自然语言指令，简洁传递用户需求意图
- PNG：静态截图，直观呈现视觉需求
3.1.2 核心节点详解（含完整流程图）
核心工作流包含 8 个核心节点，形成"输入-处理-校验-输出"完整闭环，各节点职责明确、联动紧密，通过标准化管控保障生码质量与效率，流程及节点详情如下：
校验通过
校验失败
- Start 开始节点
- 组件清单节点
- 组件签名生成节点
- 多轮检索 RAG
- 代码生成节点
- 代码校验节点(LLM x 2 并行)
- Answer 结束节点
- 代码修复节点
节点 1：Start (开始节点)
| 属性 | 说明 |
|---|---|
| 功能 | 工作流唯一入口，接收并传递原始输入，衔接后续节点 |
| 输入 | 1. query：用户原始输入（DSL/Text/PNG）；2. conversation_id：会话上下文追踪 ID |
| 输出 | 将 query 和 conversation_id 同步传递至"组件清单节点"，确保上下文连贯 |
节点 2：组件清单节点
| 属性 | 说明 |
|---|---|
| 功能 | 提供系统可用组件及功能说明，作为组件大纲，通过 mustKnow 字段沉淀常见问题，为组件签名生成及后续校验提供支撑 |
| 输入 | 开始节点传递的 query、conversation_id，用于匹配需求对应的组件范围 |
| 输出 | 基础组件库、高级组件库、图标库的功能清单（含组件功能、使用规范及 mustKnow 踩坑提示），同步传递至"组件签名生成节点" |
节点 3：组件签名生成节点
| 属性 | 说明 |
|---|---|
| 核心定位 | 生码质量的关键 SLA 节点 |
| 功能 | 识别需求签名，生成结构化组件列表（作为 RAG 检索锚点），将用户原始需求翻译为系统可理解的组件列表 |
| 输入 | 用户 query、conversation_id、组件清单节点 输出的组件功能清单 |
| 输出 | 结构化组件签名清单（如['Modal', 'ProTable']），同步传递至"多轮检索 RAG 节点" |
| 核心逻辑 | 接收用户输入（query）和组件清单，AI 基于组件功能推断所需组件，输出结构化组件签名清单，优先使用高级组件库 |
节点 4：多轮检索 RAG
| 属性 | 说明 |
|---|---|
| 工具/技能 | 组件库知识库（基础/高级组件库、图标库等） |
| 输入 | 组件签名生成节点 输出的结构化组件签名清单、conversation_id |
| 输出 | merged_context（RAG 富上下文，含组件类型定义、mustKnow 信息及差异化片段合并后的 JSON 格式结果），传递至"代码生成节点" |
| 核心逻辑 | 基于组件签名多轮检索知识库，获取相关文档片段；去重聚合（相似度 > 85% 则丢弃），判断上下文充足性，停止检索后输出 merged_context，不总结，避免 AI 幻觉 |
节点 5：代码生成节点
| 属性 | 说明 |
|---|---|
| 功能 | 生成 v1 版本初稿代码，是生码主引擎，基于 RAG 富上下文，按生产级标准生成可执行、模块化代码 |
| 输入 | 用户 query、merged_context、Prompt、conversation_id |
| 输出 | code.json（v1 版本多文件代码，遵循 React + TS + Less 技术栈），传递至"代码校验节点" |
| 核心逻辑 | 先自检补全上下文（缺失则紧急调用知识库）；再按规范拆分文件（index.tsx/less 等），最终输出严格 JSON 格式的多文件代码 code.json |
节点 6：代码校验节点
| 属性 | 说明 |
|---|---|
| 核心定位 | 自动化代码评审，拦截 v1 代码中的各类错误，作为质量门禁 |
| 输入 | code.json（v1_code）、merged_context、conversation_id |
| 输出 | 两种结果：1. 无错误：放行信号，传递至"结束节点"；2. 有错误：校验错误清单（props_errors、must_know_errors），传递至"代码修复节点" |
| 核心逻辑 | 并行执行两项校验------props 属性校验（确保组件调用合法）、mustKnow 信息校验（规避踩坑）；汇总错误清单，根据校验结果分流至对应节点 |
节点 7：代码修复节点
| 属性 | 说明 |
|---|---|
| 功能 | 生成 v2 最终代码，智能决策修复或保持原样，兼顾修复有效性与代码安全性，避免修复引发新 Bug |
| 输入 | code.json（v1_code）、校验错误清单、merged_context、conversation_id |
| 输出 | v2_code（最终 JSON 格式多文件代码），传递至"结束节点" |
| 核心逻辑 | 接收 v1 代码与校验错误清单，验证错误有效性并补足上下文；决策修复（有效错误可安全修复）或保持原样（误报/修复有风险），最终输出严格 JSON 格式结果 |
节点 8：Answer (结束节点)
| 属性 | 说明 |
|---|---|
| 功能 | 工作流最终出口，打包最终结果返回调用者，支持代码插入编辑器，交付最终代码 |
| 输入 | 两种输入场景：1. 校验通过：v1_code；2. 修复完成：v2_code |
| 输出 | 最终代码（v1_code 或 v2_code），以 API 返回格式交付调用者，完成生码闭环 |
3.1.3 测试集与核心指标
3.1.3.1 评估体系
A 类生码采用后验机制评估出码准确度：通过同一份输入，在不同时间段内连续运行多次，统计代码生成正确的次数，量化生码质量。
3.1.3.2 出码核心指标
统计 A 类生码相关核心指标，明确性能与成本基准，具体如下：
| 指标 | 数值 |
|---|---|
| Token 消耗量（单次生码） | 1 ~ 20 w，取决于需求复杂度（使用的组件知识库信息量） |
| 单次出码耗时 | 5 分钟内 |
3.2 Figma 出码工作流
针对 Figma 设计稿输入场景，结合其高精度、结构化特点，提供两种差异化出码方案，兼顾 UI 还原度与代码质量，适配不同落地需求，核心思路为"精准解析设计稿+灵活适配生码逻辑"，具体方案如下：
| 方案类型 | 输出 SLA | 核心优势 | 依赖条件 | |
|---|---|---|---|---|
| DSL 转换方案 | 较高，适配现有校验修复流程 | 复用核心工作流，无需新增生码逻辑，DSL 格式统一易维护 | 新增 Figma 转 DSL 方法，工作流支持 DSL 切换，完成联调回测 | |
| 不转换 DSL 方案 | 较高，需单独适配校验逻辑 | 上下游职责清晰，可分阶段评估代码腐化风险 | 工作流支持 tsx 源字符串输入，需多场景案例验证 |
补充说明：两种方案均支持 Figma 设计稿全量解析（组件结构、样式、交互等），落地时可根据项目"还原度优先级"、"维护成本"等需求选择，后续结合测试数据优化 SLA 表现。
四、质量保障与测试集
围绕生码全流程构建四层防护，与 C/B 类生码质量体系一致，确保稳定：
4.1 源头防控：物料质量管控
| 物料类型 | 质量要求 |
|---|---|
| 组件功能清单 | 及时更新组件特性，Bad Case 沉淀至 mustKnow 字段。 |
| 组件库物料 | Demo 无报错、TS 类型完整，控制物料大小。 |
| 组件 types 物料 | 类型定义准确无误。 |
4.2 过程抑制：AI 幻觉防控
| 措施 | 说明 |
|---|---|
| 优化提示词 | 明确要求、覆盖边界，引导 AI 生成准确内容。 |
| 微调检索逻辑 | 优化 RAG 检索，获取精准知识库片段，减少幻觉。 |
| 增强校验节点 | 完善校验逻辑，拦截幻觉错误代码。 |
4.3 事后校验：自动化 CI 校验
代码输出后，需通过以下 CI 校验，确保可运行：
- 静态代码扫描 (Linting)：检查代码风格规范；
- 自动编译构建 (Compile)：检查语法与依赖合法性（需 WebContainer 支持）。
4.4 闭环迭代：测试集优化
| 测试类型 | 说明 |
|---|---|
| Good Case 测试集 | 覆盖全输入模式典型需求，工作流变更后 Full Run，避免功能回退。 |
| Bad Case 反馈闭环 | 自动收集失败案例，GUI 提供反馈入口，定期 Review 优化。 |
五、后续优化方向
当前方案已验证可行，后续围绕"速度、成本、准确度、标准化"四大方向优化：
- 优化出码速度：当前出码速度能控制在 5 分钟内，后续探索如何增强出码效率，适配 PM 场景。
- 降低 Token 消耗：在保证准确度的前提下，减少 Token 使用，降低运营成本。
- 提升生码准确度：当前生码结果仍需少量修改方可运行，后续结合工程化体系优化，适配 PM 需求。
- 对齐代码标准：当前达组件库标准，后续优化 RAG 与生码逻辑，对齐团队内标准规范。
六、附录
6.1 高可用评判标准
6.1.1 结构清晰度
| 维度 | 核心要求 | 优化前 | 优化后 |
|---|---|---|---|
| 结构清晰 | 层级清晰、逻辑连贯 | 无层级、逻辑混乱 | 层级分明、职责明确 |
| 模块化 | 按功能拆分、低耦合 | 功能混合、高耦合 | 拆分 UI、逻辑、工具类模块 |
| 可复用性 | 组件通用、少冗余 | 重复开发、冗余严重 | 抽取公共组件、跨页复用 |
| 语义正确性 | 命名语义化、易维护 | 命名无意义、难区分 | 见名知意、易维护 |
6.1.2 样式规范
| 维度 | 核心要求 | 优化前 | 优化后 |
|---|---|---|---|
| CSS Module 隔离 | 样式独立、无冲突 | 全局样式、易冲突 | CSS Module 隔离、无冲突 |
| 语义正确性 | 类名语义化、易识别 | 类名无意义、难对应 | 见名知意、易识别 |
| 可复用性 | 抽取基础样式、少冗余 | 重复编写、冗余严重 | 抽取基础类、统一复用 |
6.2 DSL 比对
DSL 作为 A 类智能生码引擎的核心输入载体，Figma DSL 与 GUI DSL 定位不同、适配场景各异，以下从核心定位、文件结构、特性及场景进行精准比对，确保逻辑清晰、内容精炼。
6.2.1 Figma DSL（设计稿驱动型）
核心定位：面向 Figma 设计稿解析的全属性结构化语言，承接设计稿原生属性，支撑高精度生码。
文件目录：
plain
src/
├── dsl/
│ └── figma/
│ ├── base/ # 基础属性定义（通用、布局、样式等）
│ │ ├── common.ts # 通用属性类型
│ │ ├── layout.ts # 布局属性类型
│ │ ├── stroke.ts # 描边属性类型
│ │ ├── effects.ts # 阴影属性类型
│ │ ├── fill.ts # 填充属性类型
│ │ └── text.ts # 文本属性类型
│ ├── component.ts # 组件关联属性定义
│ └── index.ts # Figma DSL 统一出口
└── components/ # 基于 Figma DSL 生成的组件核心特性：以 ROOT 为根节点，全覆盖 Figma 原生属性（布局、样式、交互等），支持像素级还原设计稿，适配 Figma 出码两种方案。
适用场景：Figma 设计稿直出生码、A 类整页高精度还原、B2 自定义区块（设计稿驱动）。
6.2.2 GUI DSL（业务配置驱动型）
核心定位：面向低代码配置的轻量化业务语言，聚焦页面结构与组件编排，提升配置效率。
文件目录：
plain
src/
├── dsl/
│ └── gui/
│ ├── structure.ts # 页面结构定义
│ ├── component.ts # 组件配置定义
│ ├── routing.ts # 路由配置定义
│ ├── meta.ts # 元数据定义
│ └── index.ts # GUI DSL 统一出口
└── slots/ # 基于 GUI DSL 生成的插槽/区块组件核心特性：结构简洁、无复杂层级，快速传递 UI 结构与配置信息，无缝适配核心出码工作流，无需额外适配校验逻辑。
适用场景：JSSlot 插槽、CustomBlocks 自定义区块、C 类样板间局部自定义。
6.2.3 核心差异对比表
| 比对维度 | Figma DSL | GUI DSL |
|---|---|---|
| 核心定位 | 设计稿驱动，全属性结构化，高精度还原 | 业务配置驱动，轻量化，高效配置 |
| 对应输入模式 | Figma Link（设计稿链接） | GUI DSL（JSSlot + CustomBlocks） |
| 适配工作流 | Figma 出码工作流（两种方案） | 核心出码工作流（DSL/Text/PNG） |
| 核心优势 | 像素级还原，属性完整，贴合设计需求 | 结构简洁，适配性强，配置效率高 |
| 适用场景 | A 类整页、B2 区块（设计稿驱动） | B1 插槽、B2 区块、C 类局部自定义 |
6.3 相关源文件
6.3.1 Figma DSL 源文件
typescript
{
"type": "ROOT", // 根节点，Figma DSL 核心入口
"name": "tableRowElement", // 组件名称
"children": [
{
"id": "tableRowInstance", // 表格行实例
"name": "tableRowElement",
"type": "INSTANCE", // 实例类型，对应 Figma 组件实例
"scrollBehavior": "SCROLLS", // 滚动行为：可滚动
"componentId": "componentTableRow", // 关联的基础组件 ID
"exposedInstances": ["tableRowCheckbox"], // 暴露的子实例（复选框，）
"componentProperties": {
"showImage": { "type": "BOOLEAN", "value": false }, // 显示图片：关闭（变量名）
"showCheckbox": { "type": "BOOLEAN", "value": true }, // 显示复选框：开启（变量名）
"subTable": { "type": "BOOLEAN", "value": false }, // 子表格：关闭（变量名）
"subTableIcon": { // 子表格图标（变量名）
"type": "INSTANCE_SWAP", // 实例替换类型
"value": "iconSubTable", // 默认图标
"preferredValues": [ // 可选图标列表
{ "type": "COMPONENT", "key": "iconArrowDown" }, // 向下箭头
{ "type": "COMPONENT", "key": "iconArrowRight" } // 向右箭头
]
},
"rowDivider": { "type": "BOOLEAN", "value": true }, // 行分隔线：开启（变量名）
"type": { "value": "richText", "type": "VARIANT" }, // 类型：富文本
"position": { "value": "middle", "type": "VARIANT" } // 位置：居中
},
"overrides": [ // 覆盖配置：自定义实例属性
{ "id": "tableRowInstance", "overriddenFields": ["height", "width"] }, // 覆盖高度、宽度
{ "id": "textLabelRegion", "overriddenFields": ["characters"] }, // 覆盖标签文本
{ "id": "textContentRegion", "overriddenFields": ["characters", "maxLines"] } // 覆盖内容文本及最大行数
],
"children": [
{
"id": "rowContainer", // 行容器
"name": "container",
"type": "FRAME", // 容器类型：框架
"layoutMode": "HORIZONTAL", // 布局模式：水平布局
"clipsContent": true, // 裁剪超出内容
"backgroundColor": { "r": 1, "g": 1, "b": 1, "a": 1 }, // 背景色：白色（rgba(255,255,255,1)）
"strokes": [{ "type": "SOLID", "color": { "r": 0.93, "g": 0.94, "b": 0.96, "a": 1 } }], // 边框色：浅灰色（rgba(237,240,245,1)）
"strokeWeight": 1, // 边框宽度：1 px
"individualStrokeWeights": { "bottom": 1 }, // 仅底部边框：1 px
"padding": { "x": 8, "y": 12 }, // 内边距：水平 8 px，垂直 12 px
"children": [
{
"id": "rowContent", // 行内容容器
"name": "content",
"type": "FRAME",
"layoutMode": "HORIZONTAL", // 水平布局
"itemSpacing": 8, // 子元素间距：8 px
"children": [
{
"id": "textContentGroup", // 文本内容组
"name": "textContent",
"type": "FRAME",
"layoutMode": "VERTICAL", // 垂直布局
"itemSpacing": 4, // 子元素间距：4 px
"children": [
{
"id": "textLineRegion", // 文本行区域
"name": "multipleContent",
"type": "INSTANCE",
"componentId": "componentLabelText", // 关联标签文本组件
"componentProperties": { "property1": { "value": "label", "type": "VARIANT" } }, // 属性 1：标签类型
"children": [
{
"id": "labelRegion", // 标签区域
"name": "Label",
"type": "INSTANCE",
"componentId": "componentTextLabel", // 关联文本标签组件
"children": [
{
"id": "textRegionLabel", // 标签文本
"type": "TEXT",
"characters": "Region", // 标签内容：地区
"fontSize": 14, // 字体大小：14 px
"lineHeight": 16, // 行高：16 px
"color": { "r": 0.58, "g": 0.61, "b": 0.64, "a": 1 } // 字体颜色：深灰色（rgba(148,156,165,1)）
}
]
},
{
"id": "contentRegionWrap", // 内容包裹容器
"name": "content",
"type": "FRAME",
"children": [
{
"id": "textRegionContent", // 内容文本
"type": "TEXT",
"characters": "Indonesia", // 内容值：印度尼西亚
"fontSize": 14, // 字体大小：14 px
"lineHeight": 16, // 行高：16 px
"maxLines": 1, // 最大行数：1 行（超出省略）
"color": { "r": 0.19, "g": 0.22, "b": 0.27, "a": 1 } // 字体颜色：深黑色（rgba(48,56,68,1)）
}
]
}
]
},
{
"id": "tagStatus", // 状态标签
"name": "Tag",
"type": "INSTANCE",
"componentId": "componentTag", // 关联标签组件
"metaData": {
"packageName": "ssc-ui-react", // 组件包名
"componentName": "Tag", // 组件名称
"props": { "type": "default", "color": "blue", "status": "info" } // 标签属性：默认类型、蓝色、信息状态
},
"resolvedProps": {
"type": "default",
"color": "blue",
"status": "info",
"children": "Shipping Out Processing" // 标签内容：出库处理中
},
"backgroundColor": { "r": 0.94, "g": 0.97, "b": 1, "a": 1 }, // 标签背景色：浅蓝色（rgba(240,247,255,1)）
"cornerRadius": 2, // 圆角：2 px
"padding": { "x": 4, "y": 2 } // 内边距：水平 4 px，垂直 2 px
}
]
}
]
}
]
}
]
}
]
}6.3.2 Figma2Component 单文件
typescript
// 导入依赖：React 核心库、Tag 组件（用于状态标签展示）
import React from 'react';
import { Tag } from 'ssc-ui-react';
// 表格行样式常量（统一维护，减少冗余，适配 Figma 设计规范）
const TABLE_ROW_STYLES = {
baseText: { fontSize: 14, fontFamily: 'Roboto', fontWeight: 400, lineHeight: '16 px' }, // 基础文本样式：14 px 字体
labelText: { color: 'rgb(149, 155, 164)', whiteSpace: 'pre-wrap' }, // 标签文本样式：深灰色
contentText: { color: 'rgb(48, 56, 68)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, // 内容文本样式：深黑色，超出省略
flexCenter: { display: 'flex', alignItems: 'center' }, // 弹性布局：水平居中
};
// 复用组件：标签+值组合组件（减少重复代码，提升可维护性）
// props：label（标签文本）、value（标签对应值）
const LabelValueItem = ({ label, value }) => (
<div style={TABLE_ROW_STYLES.flexCenter}>
<span style={TABLE_ROW_STYLES.baseText, TABLE_ROW_STYLES.labelText}>{label}:</span>
<span style={TABLE_ROW_STYLES.baseText, ...TABLE_ROW_STYLES.contentText, marginLeft: 4 }}>{value}</span>
</div>
);
// 表格行核心组件（对应 Figma DSL 中的 tableRowElement，还原设计稿样式与结构）
const TableRowElement = () => (
<div
data-layer="container"
style={{
padding: '12 px 8 px', // 内边距：与 Figma 设计一致（垂直 12 px，水平 8 px）
backgroundColor: '#fff', // 容器背景色：白色
borderBottom: '1 px solid rgb(236, 240, 244)', // 底部边框：浅灰色（与设计稿一致）
}}
>
<div data-layer="content" style={TABLE_ROW_STYLES.flexCenter}>
<LabelValueItem label="Region" value="Indonesia" /> {/* 地区：印度尼西亚 */}
<LabelValueItem label="Parcel ID" value="INCNH0002501167260" /> {/* 包裹 ID：对应业务唯一标识 */}
{/* 状态标签：与 Figma 配置一致（默认类型、蓝色、信息状态） */}
<Tag type="default" color="blue" status="info" style={{ padding: '2 px 4 px', marginLeft: 8 }}>
Shipping Out Processing
</Tag>
</div>
</div>
);
// 导出组件，供外部调用（符合 React 组件规范）
export default TableRowElement;七、总结
本文完成了 A 类智能生码引擎从独立组件拼搭产品到平台化核心服务的升级重构，形成一套完整可落地的前端 AI 生码技术方案。
- 核心架构
以 4 种标准化输入为契约，依托 8 节点闭环工作流与 Figma 双路出码方案，统一支撑 A 类整页、B1 插槽、B2 区块等全自定义场景。 - 质量保障
构建源头防控、过程抑制、事后校验、闭环迭代四层防护体系，确保输出代码符合组件库规范与工程化标准。 - 演进规划
围绕出码效率、Token 成本、生码准确度、代码标准化四大方向持续优化，提升引擎落地能力。
整体方案实现技术同源、能力复用，既可独立支撑全新页面开发，也可嵌入低代码工作流完成局部自定义，为企业级前端 AI 生码提供了可复用、可扩展的实践参考。