去哪儿网C端AI编码实战：高还原度UI生成与逻辑代码生成的融合方案

在前端开发领域，C端应用因其面向海量用户、要求像素级UI还原以及业务逻辑高度复杂，一直是AI编码技术落地的“深水区”。去哪儿网大前端团队在探索中发现，单一技术路线无法攻克所有难题，因此构建了一套结合规则算法与AI模型、覆盖从UI到逻辑代码生成的智能研发新模式。

一、背景与核心挑战

传统的C端AI研发尝试通常面临两个极端：依赖纯AI模型生成代码，UI还原度差；使用规则算法，虽能保证样式精准，但生成的代码是冗余的“div海”，缺乏语义化，无法复用。此外，从需求文档生成可执行的逻辑代码以及开发流程割裂也是关键瓶颈。具体挑战可归纳为三点：

1. D2C（设计稿转代码）：“像素级还原”与“代码语义化、组件化”难以兼顾。
2. P2C（需求文档转逻辑代码）：需求信息分散、权限受限、格式非结构化，导致模型输入不稳定；缺乏内部API上下文，生成代码不可直接运行。
3. 流程割裂：代码生成平台与IDE分离，开发需频繁切换工具。

二、D2C解决方案：规则算法与AI模型融合

为破解“形似”与“神似”的对立，团队采用了“规则算法保障数据精准，AI模型负责意图理解与代码生成”的融合架构。

1. 高还原度保障：数据规则解析处理

首先，通过规则算法对Figma原始API返回的复杂JSON数据进行“瘦身”与优化。

• 数据简化：剔除约60个blendMode、absoluteRenderBounds等冗余字段，字段数减少75%，嵌套层级从最深6层精简至3层。
• 信息转换：将Figma专属格式转换为AI易理解、代码可用的标准格式。例如，将颜色值 {r: 0.22, g: 0.48, b: 1, a: 1} 转换为 #3878FF；将 rectangleCornerRadii: [8,8,8,8] 转化为CSS属性 border-radius: 8px。
• 布局优化：统一整合 padding、margin 等属性，形成结构化 layout 字段。

此步骤为AI提供了“精准、干净、易解析”的数据基础，从源头保障了UI的像素级还原能力。

2. 代码语义化保障：AI生成与工程化适配

基于预处理后的高质量数据，通过以下五个环节确保生成的代码“好用、能用、符合规范”。

环节一：模板化提示词系统
系统使用结构化提示词模板指导AI生成代码。一个典型的提示词包含以下部分：

<role>你是一名专家级前端开发工程师,熟练掌握js、css、typescript等前端技能,精通组件设计、响应式布局、样式优化等前端开发技术。</role>
<context>用户需要将Figma设计稿转换为Shark框架[类似react语法]代码[要求像素还原原设计稿]生成高质量、可维护的前端代码。</context>
<objective>基于提供的Figma JSON数据和设计图,生成符合Shark框架规范的前端代码[还原度达到95%以上]</objective>
<detail>
1. 布局精确度:元素位置、间距、对齐方式必须与设计稿完全一致...
2. 视觉完整性:颜色、字体、阴影、边框、边距、圆角等视觉效果必须精准重现...
3. 层次正确性:z-index、重叠关系、视觉层次必须准确...
4. 交互一致性:按钮状态、悬浮效果等交互必须符合设计意图...
5. 响应式适配:在不同屏幕尺寸下保持设计比例和美观
</detail>
<workflow>
<step index="1">确认技术栈和编码规范</step>
<step index="2">分析设计稿:理解布局、提取样式...</step>
<step index="3">构建层级结构:识别定位元素、建立父子关系</step>
<step index="4">生成代码:应用优化规则、循环渲染重复结构</step>
<step index="5">质量检查:验证颜色、间距、命名规范</step>
<step index="6">输出代码文件</step>
</workflow>
<constraints>
- 必须使用View替代div,Text替代span,Image替代img
- View、Text、Image等标签不需要引入,Shark框架已经自动引入
</constraints>

该系统覆盖React、React Native、Taro、Shark等框架，并强制95%以上的还原度与语义化标签使用。

环节二：全链路资源处理
为实现代码直接复用，构建了完整的资源处理流水线：

1. 图片处理：识别设计稿中的图片 -> 精准裁剪优化 -> CDN上传 -> 生成稳定链接。
2. Icon处理：识别Unicode图标字符 -> 生成专属字体文件 -> 缓存去重 -> 代码中自动注入 @font-face 规则。
   最终，生成的代码直接引用处理后的CDN链接，无需开发手动处理资源。

环节三：组件与DesignToken深度适配

• 组件适配器：为Button、Checkbox等定制化组件开发适配器，精准解析Figma组件的属性与状态，映射为语义化组件代码。
• DesignToken转化：同步Figma中的设计变量（颜色、字体、间距、圆角等），自动转换为CSS变量并与基础样式智能合并，确保代码遵循品牌设计规范。涉及的设计变量类别包括：颜色(Color)、投影(Shadow)、字体样式(Typography)、尺寸(Size)、间距(Space)、透明度(Opacity)、圆角(Radius)及其他(Other)。

环节四：工程化上下文注入
支持注入目标项目的技术栈配置、代码模板、组件库信息，使生成的代码能无缝融入现有工程架构。

环节五：AI生成与后处理
采用Gemini Pro等大语言模型生成代码，然后进行格式化、资源引用修正、缓存存储等后处理，并提供失败降级策略。

3. D2C效果展示

以一个航班预订界面为例，设计稿展示了从广州到拉萨的往返行程，包含航班号、时间、机场、价格、行李额、退改签费用等详细信息。

AI生成的React Native代码结构清晰，组件化拆分合理：

• 按功能模块拆分：将“头部”、“航班信息”、“票价选项”拆分为 HeaderComponent、FlightInfoCard、FareOptionCard 等独立组件。
• 数据与UI解耦：通过 fareOptionsData 驱动 FareOptionCard 组件渲染，符合数据驱动视图的原则。
• 语义化与工程化：代码基于React Native规范编写，使用了 FlatList、StyleSheet 等原生能力。

核心页面组件代码如下：

const FlightDetailsPage = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <QLinearGradient style={styles.container} colors={["#FFFFFF", "#F2F4F5"]} start={{ x: 0.5, y: 0 }} end={{ x: 0.5, y: 1 }} >
        <HeaderComponent />
        <ScrollView style={styles.scrollContent} contentContainerStyle={styles.scrollContentContainer}>
          <FlightInfoCard />
          <View style={styles.bonusBanner}>
            <View style={styles.bonusIconPlaceholder} />
            <Text style={styles.bonusTitle}>膨胀金</Text>
            <Text style={styles.bonusText}>限时膨胀已生效，速买</Text>
          </View>
          <FlatList data={fareOptionsData} renderItem={({ item }) => <FareOptionCard {...item} />} keyExtractor={(item) => item.id} style={styles.fareList} ItemSeparatorComponent={() => <View style={{ height: 8 }} />} scrollEnabled={false} />
        </ScrollView>
      </QLinearGradient>
    </SafeAreaView>
  );
}

与通用AI工具(Cursor)的体验对比如下：

Cursor UI代码生成使用体验	自研平台UI代码生成使用体验
全手搓提示词，耗时20min	直接点击一键生成，耗时4分钟
多轮对话调整细节，还原度80%，需手动再调整	结构、组件拆分合理，可直接使用+复用
图片、icon需自行处理资源	CSS样式合理，还原度达90%，仅需少许间距调整
整体耗时约1小时	无大量固定宽度，定位处理符合规范；代码符合工程规范

融合方案的核心价值在于从“规则翻译样式”升级为“理解设计意图并输出工程化代码”，实现了“形似”与“神似”的统一。

三、P2C解决方案：语义解析与知识增强

P2C的目标是将PRD（需求文档）自动转化为可执行的逻辑代码，其难点在于获取稳定、完整、可理解的需求输入。

1. 前置文档解析：打通权限与结构

• 文档授权流程：
  1. 前置准备：每周定时任务从PMO系统拉取数据，解析文档链接和产品ID，通过飞书机器人向产品发送授权链接。
  2. 等待产品授权：产品同意授权后，触发回调函数，机器人携带权限读取文档内容，解析需求背景、工时、详情等信息，并存入数据库。
• 表格序列化：将PRD中的表格进行Key-Value映射，以Map格式存储，保留结构化特征。
• 格式与图片保留：文本格式转换为Markdown存储；图片下载后重新上传至内部服务并以Markdown格式引用。

最终解析得到结构化的JSON数据，例如：

{
    "title": "春运产品需求文档",
    "background": "一、需求背景\n为充分承接春运流量红利...",
    "detail": [
        [
            ["场景\n **进入活动页-未登录**\n\n", "demo\n \n", "说明\n APP弹窗需更新背景图\n\n"],
            ["场景\n **网络异常/请求后端异常等活动兜底页面**\n\n", "demo\n \n", "说明\n 1. 【驾马闯关】主按钮显示“剩余？次”\n 2. 点击按钮：\n - 如果未登录弹窗登录弹窗。\n - 如果网络异常或者请求后端接口失败提示“小驼开小差了...”\n"]
        ]
    ]
}

2. 智能分片与并发生成

针对长文档和复杂逻辑，采用多Agent并发架构避免上下文丢失和细节模糊。

1. 动态启动与语义分片：根据PRD复杂度决定是否启动多Agent，并按“埋点”、“API”等语义或业务模块进行分片(Chunk)。
2. 两阶段并发生成：主Agent进行模块级路由，建立页面与分片的映射；随后并发启动多个Sub-Agent，每个仅处理特定页面的数据，流式生成逻辑代码。生成提示词会严格约束输出结构（用户交互操作、页面状态和UI更新、跳转和路由逻辑、埋点和实验）。

3. 知识库增强：解决API“幻觉”

为避免模型在生成内部SDK调用代码时凭空捏造，团队摒弃了传统的向量检索增强(RAG)方案（因PRD业务语义与SDK技术结构关联度低），转而采用MCP（Model Context Protocol）直接为模型提供完整的内部SDK文档作为上下文。这使得模型生成的API调用、参数结构与内部规范完全一致，代码可直接运行。

最终，P2C生成的代码可执行性显著提升，能基于需求准确生成页面跳转函数、使用正确SDK的埋点代码等。

四、IDE插件：无缝衔接的开发体验

为解决平台与IDE割裂的问题，团队开发了IDE插件，将AI能力直接嵌入开发环境。

1. 整体架构设计

插件采用分层架构：

• 物料层：设计稿结构化信息、需求文档。
• 规范层：项目级别规范、框架规范（如React Native）。
• 拓展能力层：图片链接读取、需求文档信息匹配、代码预览等MCP工具。
• 提示词编排层：匹配框架模板，注入物料和规范信息。
• 交互层：画板选择、需求文档管理、自定义规范配置。

2. 关键实现：流程化出码与控制

为避免UI信息与需求信息相互干扰，采用分步出码策略。

1. 流程控制：通过初始prompt指令AI先生成UI代码，再调用特定MCP工具读取需求文档，匹配相关内容后生成逻辑代码。流程指令示例如下：

   “你是一个高级前端开发人员...在完成代码生成后，你必须检查xxx，在检查无误后，你必须遵守以下步骤完成操作：1. 调用generate-logic-code这个MCP tool。2. 在generate-logic-code完成后，立即调用preview-code这个MCP tool。”
   MCP - generate-logic-code: “作用是从需求文档中找出涉及到的需求内容，并进行相关的代码实现”
   MCP - preview-code “作用是启动预览，查看代码效果”

2. 数据共享：在插件中启动本地服务来承载MCP工具，使得IDE在调用MCP时能与插件共享同一上下文，从而获取插件中的物料数据。

3. 信息注入Trick：利用IDE“修复错误”的快捷指令，插件通过自定义一个“错误”将需要发送给AI的prompt内容注入到聊天框，从而完成从插件到IDE的信息闭环。

五、总结与展望

通过“规则+AI”融合架构，去哪儿网C端研发在UI代码生成上兼顾了高还原度与高可用性；通过文档解析、智能分片与知识增强，实现了从需求到可执行逻辑代码的生成；最后通过IDE插件，将全流程无缝嵌入开发者工作流。这一系列实践使开发工作从“0到1”的完整开发，转变为基于AI生成产物“从0.7到1”的部分开发，显著提升了效率。

未来，团队致力于构建具备“工程心智”的智能体，能感知上下文，自动完成代码审查、逻辑迭代与问题修复，最终实现从“0.7到1”的编码自动化，让开发者能更聚焦于业务创新。更多关于前端工程化与AI结合的实践，欢迎在技术社区交流探讨。

参考资料

[1] 去哪儿网 C 端研发 AI Coding 探索及落地, 微信公众号：mp.weixin.qq.com/s/W9U44p3-hwdl1FC5C4uAqw

版权声明：本文由 云栈社区 整理发布，版权归原作者所有。