2025-10-27 20:52 北京
💡 AI 赋能开发效率：文章核心是探索如何利用 LLM 提升广告创编表单的开发效率，尤其是在处理重复性高、逻辑复杂的表单场景。通过将 LLM 应用于代码生成，旨在降低人工成本、加快开发节奏，使开发者能更专注于核心业务逻辑。
🎯 LLM 的局限与应对策略：文章明确指出了 LLM 在全局视角、业务逻辑关联以及代码兼容性预测方面的不足。为克服这些挑战，提出了将开发流程细化为小步骤，并结合人工审查，确保 LLM 在限定范围内工作，从而平衡效率与代码质量。
📚 结构化输入是关键：为了让 LLM 更准确地生成代码，文章强调了使用特定格式的技术文档作为输入的重要性。这种结构化文档需要对需求进行拆解和编排，并结合自定义 MCP（模型上下文增强）工具，为 LLM 提供清晰的上下文信息和业务规范。
🚀 分步生成与迭代优化：文章展示了通过将复杂需求分解为多个小步骤进行代码生成的过程。这种分步策略允许开发者及时干预、调整细节，并确保 LLM 能够逐步构建出完整的表单功能。同时，也提到了通过持续迭代优化 MCP 文档来提高 LLM 的生成效果。
🛠️ 实践案例与工具应用：文章详细介绍了在广告投放平台创编表单开发中的具体实践，包括如何利用 TRAE 工具进行代码审查，以及如何通过引入业务表单方案的 MCP 和物料列表来指导 LLM 生成准确的代码。这为其他类似场景的应用提供了宝贵的参考。
2025-10-27 20:52 北京
基于业务表单方案实现一个表单。你需要为个表单搭建最基础的能力，包括表单的提交，字段配置，表单渲染等。每个字段的所有相关物料都需要收敛在相同的目录下，方便后续的维护。为表单初始化一个 SubmitFn 函数，用于表单提交。这个函数直接打印出来表单的值即可。这个表单有如下字段：类型是 object，数据结构如下```json{"userId": "1111","nickName": "千川大客版自动化测试账号企业店","avatar": "https://p11.douyinpic.com/img/aweme-avatar/aweme_default_avatar.png~c5_168x168.webp?from=3782654143","showId": "22222","authRole": 1,"userTypes": [3],"hasShopPermission": false,}```使用一个异步函数模拟，直接返回上述 json直接返回字段值本身即可为字段生成一个vue组件，支持支持展示抖音号头像以及昵称类型是 object，数据结构如下```json{"shopName": "资管文具礼品专营店","shopId": "111","shopImg": "https://p3-ecom-qualification-sign.ecombdimg.com/tos-cn-i-6vegkygxbk/fbe26f8d1316487d86b20f72f70e02fe~tplv-6vegkygxbk-s:750.image?lk3s=c08c0450&x-expires=1778687541&x-signature=YsxT9Ywn8QM%2B2HRJuDMzf9UFdVI%3D",},```使用一个异步函数模拟，直接返回上述 json这个字段不参与表单提交，不需要 Transformer 物料为字段生成一个vue组件，支持展示店铺图片以及店铺名称类型是 Array<string>这个字段不需要单独的初始化物料，直接使用静态默认值即可，默认值是个空数组直接返回字段值本身即可为字段生成一个vue组件，只需要展示如下文案：系统将为您自动投放店铺的可投潜力商品，默认开启智选素材。您可以选择排除无需投放的商品：
## 需求在已有的业务表单中，追加如下字段### 投放方式 smartBidType#### Model 物料类型是 SmartBidType 枚举类型，已存在仓库中，可以直接通过如下代码导入使用`import { SmartBidType } from '@legacy-pmc/shared'`通过上述语句导入的枚举类型如下```ts// 投放方式exportenumSmartBidType {CUSTOM = 0, // 控成本投放NO_BID = 7, // 放量投放}```#### Initializer 物料这个字段的默认值通过 `window.whiteList.XXX1` 的值来判断，如果 `window.whiteList.XXX2` 为 true，那么这个字段的默认值是 `SmartBidType.NO_BID`，否则是 `SmartBidType.CUSTOM`#### Transformer 物料直接返回字段及其值即可#### Component 物料为字段生成一个vue组件，支持枚举的中文文案展示，并且支持点击切换枚举值，点击后，将新的值设置到表单中#### Reaction 物料为字段增加一个 reaction 用来控制显隐：字段 smartBidType 会根据 `window.whiteList?.XXX1` 的值来判断是否展示。如果 `window.whiteList?.XXX2` 为 `true` 那么这个字段展示，并且参与表单提交及其他联动逻辑，否则这个字段不展示，但是字段仍保留在表单中，参与表单提交及其他联动逻辑。注意：- 无需为 whiteList 添加全局类型定义
# 需求在已有的 业务表单 表单中，追加如下字段### 日预算 budget### Model 物料number 类型有三个额外的字段依赖：smartBidType、blockProductList、awemeInfo#### Initializer 物料这个字段不需要单独的初始化物料#### Transformer 物料直接返回字段及其值即可#### Component 物料为字段生成一个vue组件，支持展示字段的中文名，以及字段值，并展示输入框，最后展示字段值的单位 "元"#### Reaction 物料增加一个 reaction 用来更新字段的值以及更新UI组件依赖的字段值：当表单中 smartBidType、blockProductList、awemeInfo 三个字段值变化时，需要做如下操作：1. 获取 budget 字段的最新的建议值并回填到表单中，获取值的过程可以直接使用一个异步函数来模拟，值为随机数。2. 将这三个字段的值更新到 budget 字段的 Model 中，以便 budget 字段的UI组件可以访问到这三个字段的最新值，从而更新UI组件的展示。#### Validator 物料当字段的未输入时，需要返回一个错误文案，文案内容为 "请输入日预算"，并展示在 UI 组件下方
# 需求在已有的业务表单中，追加如下字段### 整体支付ROI目标 ecpRoi2Goal### Model 物料类型是 number 类型#### Initializer 物料这个字段不需要单独的初始化物料#### Transformer 物料直接返回字段及其值即可#### Component 物料为字段生成一个vue组件，支持展示字段的中文名，以及字段值，并展示输入框#### Reaction 物料1. 增加一个 reaction 用来控制显隐：字段 ecpRoi2Goal 会根据字段 smartBidType 的值来决定是否展示。如果 smartBidType 的值是 `SmartBidType.NO_BID`，那么 ecpRoi2Goal 字段就不展示。否则，ecpRoi2Goal 字段就展示。当 ecpRoi2Goal 字段不展示时，字段值会被清空，不参与表单提交及其他联动逻辑1. 增加一个 reaction 用来更新字段的值并更新UI组件依赖：当字段 smartBidType、blockProductList、awemeInfo 三个字段的值准备好或变化时，需要做如下操作：1. 获取 ecpRoi2Goal 字段的最新的建议值并回填到表单中，获取值的过程可以直接使用一个异步函数来模拟，值为随机数。2. 将这三个字段的值更新到 ecpRoi2Goal 字段的 Model 中，以便 ecpRoi2Goal 字段的UI组件可以访问到这三个字段的最新值，从而更新UI组件的展示。#### Validator 物料当字段的值为空时，需要返回一个错误文案，文案内容为 "请输入整体支付ROI目标"，并展示在 UI 组件下方
## 需求在已有的业务表单中，追加如下字段### 推广即享 safeguardAndEstimate#### Model 物料这个字段类型如下```tsinterface SafeguardAndEstimate {isShowEstimate: boolean,minEstimateConvert: string,maxEstimateConvert: string,estimateConvert: string,minEstimateRoi: number,maxEstimateRoi: number,estimateRoi: number,}```#### Initializer 物料不需要#### Transformer 物料直接返回字段及其值即可#### Reaction 物料为这个字段增加 reaction 用来感知依赖变化：1. 增加一个 reaction 用来更新字段值当字段 smartBidType、blockProductList、awemeInfo 的值变化时，需要做如下操作：1. 获取 safeguardAndEstimate 字段的最新的建议值并回填到表单中，获取值的过程可以直接使用一个异步函数来模拟，返回如下结构的数据```json{"isShowEstimate": true,"transDay": "7","transBaseMoney": "210","minEstimateConvert": "24","maxEstimateConvert": "35","minEstimateRoi": 0.22,"maxEstimateRoi": 0.34,"estimateRoi": 0.28,"estimateConvert": "29","isUpdate": false,"lastUpdateTime": "0","isZero": false,}```2. 增加一个 reaction 用来感知依赖变化：当字段 smartBidType 的值准备好或变化时，需要做如下操作：1. 将 smartBidType 字段的最新值更新到 safeguardAndEstimate 字段的 Model 中，以便 safeguardAndEstimate 字段的UI组件可以访问到这三个字段的最新值，从而更新UI组件的展示。#### Component 物料为字段生成一个vue组件，展示字段中文名，组件展示的内容会根据字段 smartBidType 的值来决定。如果 smartBidType 的值是 `SmartBidType.NO_BID`，那么组件展示格式为：根据保障规则享保障福利，计划按oCPM展示付费整体支付ROI：{{minEstimateRoi}} ~ {{maxEstimateRoi}}订单量：{{minEstimateConvert}} 单 ~ {{maxEstimateConvert}} 单否则，组件展示为一个文案：默认启用智能优惠券，享平台额外补贴。根据保障规则享福利，计划按oCPM展示付费#### Validator 物料不需要
## 需求在已有的业务表单中，追加如下逻辑。### 表单字段排版1. 增加一个排版容器组件，所有的表单字段排版都用这一个组件实现，组件的需求如下：- 容器组件支持插槽，用于传入若干个元素，元素可以是表单字段，也可以是排版容器组件- 容器宽度默认是 100%，支持外部传入参数自定义宽度- 布局方式默认是横向排列（可以配置为纵向排列），参考 flex 的布局方式- 支持额外传入一个 style 对象，用来设置容器组件的其他样式2. 表单字段的排版规则如下：- 第一个区块分为两行- 第一行是横向排版的 awemeInfo 字段、 shopInfo 字段- 第二行是 blockProductList 字段- 第二个区块只有一行- 在这一行里是横向排版的两个子区块- 第一个子区块是横向排版的 smartBidType 字段、budget 字段、ecpRoi2Goal 字段- 第二个子区块是 safeguardAndEstimate 字段3. 所有区块均使用白色背景，区块间距 20px
## 需求在已有的业务表单中，追加如下逻辑。目前有如下表单物料列表：```json{getUniPromSuggestBudgetV2: {type: 'AsyncFunction',desc: '获取建议预算',importStatement: "import { getUniPromSuggestBudgetV2 } from '@legacy-pmc/request'",params: {awemeId: {desc: '抖音号id',required: true,},smartBidType: {desc: '投放方式',required: true,},marGoal: {desc: '营销目标',defaultValue: 1,required: false,},isUniPromShop: {desc: '是否是全店推广',defaultValue: true,required: false,},externalAction: {desc: '转化目标',defaultValue: 96,required: false,},},returnValue: {budget: {desc: '建议预算',},}},getUniPromotionROISuggestionV2: {type: 'AsyncFunction',desc: '获取建议ROI',importStatement: "import { getUniPromotionROISuggestionV2 } from '@legacy-pmc/request'",params: {authorId: {desc: '抖音号id',required: true,},marGoal: {desc: '营销目标',defaultValue: 1,required: false,},isUniPromShop: {desc: '是否是全店推广',defaultValue: true,required: false,},blockProductList: {desc: '排除商品',defaultValue: [],required: false,},},returnValue: {ecpRoi2Goal: {desc: '建议ROI',},}},getUniPromSuggestEstimateV2: {type: 'AsyncFunction',desc: '获取预估数据',importStatement: "import { getUniPromSuggestEstimateV2 } from '@legacy-pmc/request'",params: {awemeId: {desc: '抖音号id',required: true,},smartBidType: {desc: '投放方式',required: true,},marGoal: {desc: '营销目标',defaultValue: 1,required: false,},isUniPromShop: {desc: '是否是全店推广',defaultValue: true,required: false,},blockProductList: {desc: '排除商品',defaultValue: [],required: false,},budget: {desc: '预算',required: true,},},returnValue: {desc: '预估值',},}}```### 使用已有的表单物料#### 替换建议预算将 budget 字段联动关系中已存在的模拟异步获取建议预算的函数，替换上述物料列表中的真实函数。awemeId 可以使用抖音号的 userId#### 替换建议ROI将 ecpRoi2Goal 字段联动关系中已存在的模拟异步获取建议ROI的函数，替换上述物料列表中的真实函数。authorId 可以使用抖音号的 userId#### 替换预估数据将 safeguardAndEstimate 字段联动关系中已存在的模拟异步获取预估数据的函数，替换上述物料列表中的真实函数。awemeId 可以使用抖音号的 userId
## 需求在已有的业务表单中，追加如下逻辑。目前有如下表单物料列表：```json{UniPromShopBudgetPopover: {type: 'component',desc: '预算修改',importStatement: "import UniPromShopBudgetPopover from '@/pages/uni/components/uni-prom-shop/creation-wrapper/creation-form/budget/uni-prom-shop-budget-popover.vue'",params: {value: {desc: '预算值',type: 'string | number',required: true,},smartBidType: {desc: '投放方式',type: 'SmartBidType',typeEnumImportStatement: "import { SmartBidType } from '@legacy-pmc/shared'",required: true,},entry: {desc: '入口',defaultValue: 'list',required: false,},scene: {desc: '场景',defaultValue: 'uniPromShopCreation',required: false,},isUniPromShop: {desc: '是否是全店推广',defaultValue: true,required: false,},awemeId: {desc: '抖音号id',required: true,},blockProductList: {desc: '排除商品',defaultValue: [],required: false,},},events: {change: {desc: '值改变',type: "(event: 'change', val: string | number): void;",},}},UniPromShopEcpRoi2GoalPopover: {type: 'component',desc: '支付ROI目标修改',importStatement: "import UniPromShopEcpRoi2GoalPopover from '@/pages/uni/components/uni-prom-shop/creation-wrapper/creation-form/ecpRoi2Goal/uni-prom-shop-ecp-roi2-goal-popover.vue'",params: {value: {desc: '支付ROI目标值',type: 'string | number',required: true,},scene: {desc: '场景',defaultValue: 'uniPromShopCreation',required: false,},isUniPromShop: {desc: '是否是全店推广',defaultValue: true,required: false,},awemeId: {desc: '抖音号id',required: true,},blockProductList: {desc: '排除商品',defaultValue: [],required: false,},},events: {change: {desc: '值改变',type: "(event: 'change', val: string | number): void;",},}},}```### 使用已有的表单物料#### 替换建议预算在 budget 字段的 UI 组件中，字段值的展示及修改逻辑替换为 UniPromShopBudgetPopover 组件。注意：1. 保留组件中错误信息展示的逻辑2. awemeId 可以使用抖音号的 userId3. budget 字段的相关代码在 apps/uni-pmc/src/pages/uni/components/uni-prom-shop/creation-wrapper/creation-form-v2/budget 目录下#### 替换建议支付ROI目标在 ecpRoi2Goal 字段的 UI 组件中，字段值的展示及修改逻辑替换为 UniPromShopEcpRoi2GoalPopover 组件。注意：1. 保留组件中错误信息展示的逻辑2. awemeId 可以使用抖音号的 userId3. ecpRoi2Goal 字段的相关代码在 apps/uni-pmc/src/pages/uni/components/uni-prom-shop/creation-wrapper/creation-form-v2/ecpRoi2Goal 目录下
可以看到分步骤实现的效果，每一步都在更接近最终效果。
在引入 业务表单 MCP 后，LLM 对 业务表单方案的应用处于一个比较好的水准。
结合特定格式的技术文档后，需求点完成程度处于一个比较高的水准。
在引入一些物料列表后，LLM 可以比较好的应用已有物料。
结合 业务表单方 文档及代码库，产出更加 AI Friendly 的文档以及更自动化的 业务表单 MCP 更新流程
同时考虑将 业务表单方案 文档 RAG 化，尝试进一步提升 LLM 代码生成准确率
1. 结合 业务表单方案 单元测试，产出自动化的评测体系。也可以考虑 UI 自动化测试等能力，辅助验证生成效果。
2. 建立打分体系，用于量化生成质量
3. 评测大致可以为几个维度：
模型的思考过程
代码产物：是否有语法不规范、API 使用错误、代码报错等
最终效果：需求是否有完整实现
1. 领域化物料的生成。
以本文为例，围绕 业务表单方案 的各种物料（Reaction、Validator、Transformer、Initializer 等）都可以生成
2. 接口请求类代码生成
结合 BAM 平台提供的能力，生成 BFF、FE 接口请求代码
3. 框架升级改造
比如将 vue2 项目升级为 vue3 项目
AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。
鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑