一、我是谁，以及我遇到了什么问题
我是 AI 视觉方向开发工程师，日常主要做化工园区智慧安防平台开发，负责业务需求梳理、原型设计、前后端演示版本开发，对接 UWB 定位、AI 车牌识别、卡口硬件等多类物联网设备集成工作。
本次任务：开发化工园区封闭化车辆管理系统。业务需要严格贴合化工园区封闭化管理相关国标与导则要求，实现车辆预约申报、卡口通行审批、入园管控、轨迹监控等完整业务流程，输出可用于项目汇报的原型页面与可运行演示版本，后续还要对接多种硬件设备做正式集成交付。
遇到的痛点：
- 需要先梳理化工园区车辆封闭管理对应的国标、导则文件，明确业务约束；
- 业务流程复杂，包含危化品车辆预约、审批、白名单、卡口放行、轨迹追踪，需要快速输出高保真原型反复迭代；
- 原型定稿之后，快速产出可预览演示版本，方便产品、甲方评审；
- 项目周期紧张，如果走传统 “查资料‑画原型‑写代码” 完整流水线，整体耗时会很长。
二、我是怎么用 TraeCode 解决这件事的
本次混合使用 Work 工作台 + TraeCode IDE 模式，完整链路：国标资料调研 → Design 原型迭代 → Code 编码产出演示版本。
第一步：Work 工作台联网搜索，获取化工园区封闭化车辆管理国标与业务规范
主要使用 TraeWork 联网搜索能力
提示词示例：
帮我检索化工园区封闭化车辆管理相关国标、应急管理部导则文件，梳理危化品运输车辆入园预约、卡口管控、通行审批的业务要求，输出业务需求清单。
执行动作：
- 通过 Work 联网检索《化工园区安全风险排查治理导则》等官方文件，提取强制业务规则：危化车辆入园预约申报、资质核验、审批流程、专用车道管控、车辆轨迹监控等要求；
- 将国标要求整理成业务需求清单，作为原型设计的输入依据；
- 这里大量使用联网搜索，消耗积分较快，每一次检索、网页读取都会产生积分消耗。
【截图建议 1】Work 工作台联网搜索国标文件、输出业务需求清单页面截图
第二步：使用 TraeWork‑Design，基于国标业务清单做原型页面设计与多轮优化
使用 Work Design 原型能力
提示词示例：
根据上面化工园区封闭化车辆管理业务需求清单，设计一套管理系统原型，模块包含：车辆预约管理、审批中心、卡口管控、车辆实时监控、白名单管理、告警记录。页面风格政务安防后台，布局左侧菜单栏，顶部导航。后续我会给出修改意见，持续迭代原型。
执行动作：
- 将第一步整理的国标业务需求全部喂给 Design，生成初始原型；
- 结合业务评审意见，在同一会话持续给出修改指令：调整字段、新增审批状态、增加危化品特殊标记、调整表格列、弹窗表单；
- 多轮反复迭代优化，产出满足业务要求的完整原型，确认页面模块、表单字段、业务流转全部符合导则要求。
【截图建议 2】Design 初始原型页面；【截图建议 3】迭代完成后的最终原型效果截图
第三步：切换 TraeCode IDE 模式，将定稿原型转为可运行演示版本
使用 TraeCode IDE 模式，基于定稿原型输出前端演示项目
提示词示例：
参考上面Design定稿的化工园区封闭化车辆管理原型，生成一套后台管理演示版本，包含预约、审批、监控、告警页面，模拟mock数据，页面可以直接预览运行。暂不接入真实硬件，只做业务演示版本。
执行动作：
- 将原型截图 + 原型描述给到 TraeCode，生成前端演示项目；
- 在同一个会话持续输入修改要求：调整表格样式、增加筛选条件、调整弹窗逻辑、补全模拟告警数据、优化安防后台配色；
- 智能体自动修改代码，直接预览页面效果，反复微调交互与样式；
- 产出完整可运行演示版本；备注：正式版本后续需要集成 AI 车牌识别相机、UWB 定位基站、卡口设备等硬件。
【截图建议 4】TraeCode IDE 内代码预览界面；【截图建议 5】最终演示系统运行页面截图
第四步：整理交付物，区分演示版本与正式版本边界
执行动作：
- 整理交付物：国标业务梳理文档、Design 原型产物、前端演示版本代码；
- 明确说明：当前为演示版本，真实生产环境需要对接硬件设备、对接后端接口、权限体系、数据库。
三、成果展示
- 产出：化工园区封闭化车辆管理系统完整交互原型，包含预约申报、审批中心、卡口管控、车辆实时监控、白名单、告警六大模块，页面字段、业务流程符合化工园区封闭化管理导则要求；
- 产出一套可直接运行预览的前端演示版本，内置 mock 模拟数据，可以直接用于项目内部评审、向甲方演示业务流程；
- 输出国标业务梳理文档，明确危化车辆入园预约、资质校验、审批放行等强制业务约束；
- 演示版本完成业务闭环，正式版本待后续完成各类硬件设备集成之后落地上线。
四、效率对比
以前传统工作方式：
- 手动检索各类导则国标，筛选有效业务规则，整理业务清单，耗时约 1‑2 天；
- 使用原型工具手动拖拽绘制原型，反复修改调整字段和页面布局，耗时 2‑3 天；
- 原型交付前端开发，再编写演示版本，前后沟通对齐原型细节，修改调试，耗时 2‑3 天；
整体完整链路：5‑8 个工作日。
使用 TraeWork+TraeCode 之后：
- Work 联网检索国标，自动整理业务清单：约 2‑3 小时；
- Design 生成原型，多轮迭代调优页面：约 3‑4 小时；
- TraeCode 直接生成演示版本，会话内持续修改调样式交互：约 3‑4 小时；
整体完整链路：1 天多即可完成调研‑原型‑演示版本全流程。
对比总结：从原来一周左右的工作压缩到 1 天多完成，极大缩短调研、原型、演示版本产出周期，把人力更多留给后续硬件对接、真实业务开发。
五、经验和技巧总结（踩坑与优化）
- 联网搜索积分消耗问题：大量国标调研场景联网搜索会快速消耗积分，不要在同一个会话无休止反复检索；调研完成之后及时新建会话做原型，避免超长上下文叠加带来额外积分消耗。优先使用豆包‑Seed 模型，享受会员积分折扣。
- 工作链路拆分：调研（Work）→原型（Work Design）→编码（TraeCode IDE）三个阶段建议尽量分开会话。不要全部塞在一个会话窗口，上下文膨胀后，不仅积分消耗暴涨，智能体输出质量也会下降。
- 原型转代码小技巧：给到 Code 的时候，最好带上原型截图 + 原型模块描述，不要只丢一句话，能大幅减少反复来回修改的次数。
- 区分演示版本与正式版本：前期只做业务演示 mock 数据；硬件设备对接、真实接口、数据库放到正式迭代阶段，避免前期任务范围过大，智能体任务过载。
- IDE 模式更适合编码产出；复杂业务原型优先使用 Work Design，比直接写代码做原型效率更高。