我是谁 & 遇到什么问题
我是10年的老电商运营目前转行OPC做AI赋能、AI落地,以前的圈子知道了我的转营所以都逼不及待让我帮他们落地一个用AI制作电商详情页的工具,所以这次决定用TRAE WORK做一个专门的SKILL去帮他们落地解决问题。
痛点很现实:客户手里只有几张拍得普普通通的 SKU 白底图,预算有限请不起专业摄影师和设计师,但又想要"蕉内、观夏那种大牌感"的详情页。传统流程是:找参考 → 找模特/摄影 → 修图 → 排版,一套下来几千到几万,中小卖家承受不起。
我就想,能不能用 TraeWork 把这个流程自动化?从几张普通 SKU 图直接产出一套大牌级详情页,而且交付质量要超预期。
我用了 TraeWork 解决了这件事
模式:
Work ☐ Code ☐ Design
核心能力:
Seedream 文生图/图生图:从几张 SKU 图生成全套场景图、氛围图、细节图,保持产品外观一致
HTML/CSS 排版:用前端技术做像素级详情页排版,比设计软件更灵活、更好迭代
长上下文 + 知识库沉淀(OAK):每做一个项目就沉淀方法论,越做越好,越做越快
自动化交付打包:自动生成多平台规格对照表、套版提示词、交互式套版器;关键能把我的10几年运营经验转换成知识库与审美库直接融入SKILL,AI时代,能把工作经验转换成AI的落地能力才是最值钱的,而其他生图工具、工作流工具实现起来都相对麻烦,TRAE WORK却是完美适配,其实之前是有想过联动DESIGN去做的,但是实践过程中发现有了知识库的加持,出来的效果远比预期要好,需要细致微调完全也能在work去完成,所以就省去了design的应用,不过也给SKILL留了后接口,如果用户有需要还是能轻松转到DESIGN去做细节的微调;
怎么用的:
客户扔给我 1-3 张产品 SKU 图
走方向C工作流:产品分析 → 卖点/市场/受众/竞品分析 → 生成白底参考图(建立一致性基准)→ 全案设计方案 → HTML 线稿确认 → 生图 → 排版
交付不是"给一堆图",而是一个完整的交付包:详情页成品 + 平台规格对照表 + 套版提示词模板 + 交互式套版器 + 套版指南
我做出了什么
一张 SKU 图 → 一套 11 屏大牌详情页 + 可复利的套版交付包。
从产品分析到成品交付,原来需要 3-5 天的工作,现在大半天可以出首版,而且质量稳定在大牌水准。更关键的是,交付包里自带"套版器",客户换一个产品,填 8 项变量就能自动生成整套提示词和排版方案,5 步套出同品质新详情页。
效果展示
▲ 前后对比:几张普通白底SKU图 → 一套大牌详情页
▲ 成品预览:
▲ 超预期交付:不是简单的交图,是从产品分析开始到文案到线图到成品到交付包,一整套超预期的交付物,这就是用TRAE WORK打造这套SKILL的核心竞争力
这套方案的核心方法论(为什么能做出大牌感)
我把这套方法沉淀成了一个 SKILL(ecommerce-image-gen),里面有 5 条排版铁律:
铁律 解决什么问题
- 焦点设计 每屏主角唯一,不堆砌
- 大留白承接带 图片之间有承接,不脱节
- 图文融合 文字不抢图的戏,图不遮字的读
- 多型布局轮换 7 种布局按情绪节奏交替,不视觉疲劳
- 超级符号三级应用 S级剪影/A级爪印/B级线描,品牌感从细节来
文案走"悦己治愈风":情绪先于功能,画面感优先,克制即高级。不是"加厚壁身承重强",而是"入口级的安心,才配得上日常"。
英文做装饰不做翻译:品牌角标、编号系列、情绪短句,衬线体+大字距+浅色,一屏不超过 2 处,多了就廉价。
当然以上都是只针对这个案例的冰山一角,核心是把我的运营经验和品牌视觉运营的核心知识库做了蒸漏和解耦进去,而且做了全品类的适应性,还涉及了一个OAK闭环飞轮,用户加载SKILL之后每一次满意的的优化和修改都会沉淀成知识库,用户会越用越符合用户的要求。
超预期交付物(不是给图,是给"可复利的方案")
交付包里有什么?
文件 作用
00_交付总览.html 品牌化入口,7 步上架/套版引导
01_平台规格对照表.html 6 平台规格(淘宝/天猫/抖音/拼多多/小红书/1688),多选交互高亮
02_套版生图提示词模板.html 11 屏提示词全部变量化,换产品只改 8 项
03_排版套版器.html 填产品信息自动生成整套方案,一键复制
04_套版指南.md 换产品 5 步 SOP
05_OAK沉淀.md 本次项目方法论沉淀
最值钱的是那个套版器——客户拿到手,下次换个新产品,自己填 8 个信息就能出全套提示词和排版方案,不用再找我。这才是真正的"交付",不是一次性买卖。
经验 & 技巧总结
1、做这个SKILL的时候确实踩了不少坑,所以进度一直拖慢了,首先是知识库,直接喂给大模型它是无法直接运用,或者会产生很多模型幻觉,需要通过案例细节去逐一纠正,做蒸漏和解耦,最后用OAK去做闭环沉淀才能化成SKILL的真正能力,这也说明为什么市面上那么多UI SKILL别人用了说是一句话就能生成优质UI,而你加载了SKILL却依然是出来不尽人意,核心是没有配合知识库和案例去使用,而我这个是做了案例库和知识蒸馏解耦入库,所以出来的质量就有所保证;
2、是否必须跳转到DESIGN,这个是我一度纠结的问题,因为DESIGN确实有比较强的可视化功能,如果SKILL跳转去DESIGN做微调确实是最好的,但是在跑案例的过程,发现SKILL做得足够好的情况下,其实在WORK就几乎能解决问题,除非是特别挑剔或者特别细的细节通过文字描述无法优化的地方,才需要转到DESIGN,所以我把整个流程放在work,留了一个后接口实在解决不了才跳转到design,而且这个也简单,去design打开页面接管就完事,也建议trae团队能不能思考一下这三个利器之间如何做到切换自如,那就更好了;
3、用work能直接用SEEDREAM5.0出图,也能通过提示词工程给的提示词去耗一下豆包,我这个毕竟是案例开发,还没真正盈利,所以也没花大成本链接API,直接用SDR 5.0 pro或者用GPT IMAGE 2.0去出图,如果用上出图效果会更佳,当然能免费用SDR5.0本身就是TRAE WORK的一大卖点,后期再研究如何直接交付视频,那么整套SKILL的价值还会有更大的提升;
最后这个SKILL先做一波运营,后期能真实转化,后者我开源会再来更新的,最后放个交付页H5,大家可以体验一下给点意见;
时光收纳盒_交付看板_单文件H5.html (3.6 MB)
提示词参考:
补充分享一个有趣的提示词,就是我做这个SKILL的时候,大模型一度劝我放弃,而我硬让它跑回来的趣事:
把问题归咎于SDR5.0 LITE的能力天花板,但是实际并非如此,这个就是大模型幻觉以及遇到难题会劝退的通病,而我是直接让他纠正过来,关于提示词工程,我本人是喜欢用SKILL+范式MD的方式去做项目,TRAE已经挂载了我整套工作流程,所以很多时候我的提示词都比较直白,所以也没有更好的分享,就分享这一段吧:
不,我们现在干所有事情的核心是打磨SKILL,而不是做好这次视觉本身,所以我们要打磨的本身就是SKILL去弥补用户的产品图缺失、视觉认知缺失、甚至是大模型能力缺失依然能产出超预期的交付物为目的的,那如果用原本的图去改,意义在哪?实际用户D:\dsskill\详情页成品图;这个路径下就是他们的详情图排版,从模特到排版都做好了,我们只是拿这个产品去打磨我们的SKILL,然后D:\dsskill\模特图;这些也是豆包生成的,也是基于这个产品去重新生成模特的,实际也是能提取出品牌调性和模特使用习惯出来;所以我们不能随便放弃,我们现在做的就是看如何才能打磨出极致的SKILL
这段提示词之后,还是让LLM回到了正轨:
还有没加入TRAE WORK的,可以通过我的分享链接登录桌面端,新注册用户一次性获得 5000 积分! https://www.trae.cn/work-fission/X5QMZKSE567R



















