: 我是谁 & 遇到什么问题
我是一位产品经理，接到任务要为某客户设计一套典型库管理看板和典型信息管理后台，需要在 2天内给客户演示可交互的高保真原型。过去用 Axure 画至少得两天，而且只能做静态线框，无法展示增删改查和真实数据联动，后续还要反复和 UI、前端沟通还原度，非常耗心力。
: 我用了 TraeWork 解决了这件事
模式：
Design Code
我主要利用了 TraeWork 的 Design 模式做高保真界面设计 + Code 模式一键生成可交互 HTML。
具体流程：
- 在 Design 模式中新建项目，用结构化的自然语言描述需求：引用前端设计工具集，根据需求设计一个网页，需要设计一个典型库功能，包含3个功能分别是统计看板、典型库信息管理、自定义统计，统计看板支持从汇总数据逐层下钻到单位、类型、人员明细。典型库信息管理实现典型信息规范化、轻量化管理。支持典型信息新增、编辑、查看、删除等全生命周期操作，每位典型人员形成完整荣誉档案。自定义统计页面提供多条件组合查询和批量导入导出功能，需要可以自定义选择组织、类型、年度等字段，根据所选的自定义统计字段来统计典型的数量，可以选择导出统计数据或者人员明细。。
- TraeWork 自动生成了一套高保真页面，我再对不满意的区域直接在原型图上圈划并输入修改指令，比如“点击色块可逐层下钻、这里挤的密密麻麻，需要优化显示。”、“增加按年度和类型的统计维度”，它即时调整，没有出现胡乱改动其他模块的现象。
- 看板和列表页调整完成后，切换到 Code 模式，让它为全部页面注入模拟数据，并实现前端增删改查、组合查询、数据导出 Excel、从汇总指标下钻到明细等交互逻辑，最后导出成一个完整的 HTML 文件。
: 我做出了什么
一套包含数据总览看板、典型信息全生命周期管理（增删改查+批量导入导出）和多维统计分析的高保真 HTML 原型，可直接在浏览器中交互演示，甚至丢给后端填个接口就能当正式页面用。支持数据字典联动，支持增删改查导出及统计的完整功能。
效果展示
TraeWork Design 模式中生成的总览看板高保真页面
典型信息管理列表页，支持组合查询与操作按钮
支持直接在原型图上标记需要修改的位置，避免AI修改其他地方
导出
: 经验 & 技巧总结
-
用“页面结构 + 字段 + 交互逻辑”的结构化提示，避免大段发散描述，这样生成的布局和功能点更精准。
-
善用图上标记修改，不要只用对话反复解释，直接圈出要改的位置再输入指令，可以彻底避免 AI 误解导致其他区域被改动。
-
生成后微调模拟数据让演示更真实，导出 HTML 后可简单替换成真实接口地址，能大幅缩短前端开发周期，甚至直接交付后端套用。
