[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"project-ecom-detail-ai":3,"all-projects-nav":361,"project-posts-ecom-detail-ai":452},{"id":4,"title":5,"architecture":6,"body":7,"category":266,"client":267,"cover":268,"date":269,"demo":270,"demoMobile":270,"description":257,"extension":271,"featured":272,"features":273,"github":270,"manual":290,"meta":343,"modules":270,"navigation":272,"order":344,"path":345,"seo":346,"slug":347,"stem":348,"summary":349,"techStack":350,"visible":272,"year":359,"__hash__":360},"projects\u002Fprojects\u002Fecom-detail-ai.md","电商详情页 AI 生成客户端","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-architecture.svg",{"type":8,"value":9,"toc":256},"minimark",[10,14,18,21,24,27,30,33,92,95,171,183,194,203,206,246,249],[11,12,13],"h2",{"id":13},"缘起",[15,16,17],"p",{},"帮人上过一款连衣裙的详情页。找外包要等好几天，自己上手就得同时会 PS、会布光、还会写文案，我三样都不精。第一版做出来光影像贴上去的，商品边缘还走了形。",[15,19,20],{},"当时想要的东西其实很朴素：扔一张挂拍图进去，别问我品类、别问我风格，直接出一套能用的。",[11,22,23],{"id":23},"背景",[15,25,26],{},"现成的 AI 工具大多停在模板拼贴：光影有贴图感、商品容易变形，号称一键生成，实际仍要用户逐项选品类、选风格、选模板，等于把设计判断又还给了不会设计的人。而详情页本身是一整套东西——主图、场景图、白底图、详情长图、切片、文案，每一样尺寸和规则都不一样，分开做就要分开对齐。要压缩的是这一整段决策：上传一张商品图，不选品类、不选风格，直接得到一整套带真实感光影渲染的详情页。",[11,28,29],{"id":29},"方案",[15,31,32],{},"一个装在电脑上、双击就能用的客户端，核心是一条会自己拿主意的生成流水线：",[34,35,36,44,50,56,62,68,74,80,86],"ul",{},[37,38,39,43],"li",{},[40,41,42],"strong",{},"十步全自动，中途不用管","：抠图 → 读图理解 → 自主规划（出几张图、每张什么场景与光影、页面分几块）→ 逐张渲染 → 画面描述 → 文案 → 本机排版合成 → 标准卡片 → 自检 → 完成。每一步的状态和中间产物都会落盘，界面上按时间线看得见进度，任务可以取消、关掉再开还能接着跑",[37,45,46,49],{},[40,47,48],{},"真实感出图","：基于原图做编辑式生成，而不是把商品抠出来贴进模板；多张参考图输入保住商品一致性。出图引擎可在 Seedream \u002F GLM-Image 之间切换，主选是拿真实商品盲测定的",[37,51,52,55],{},[40,53,54],{},"关键文字交给本机，不交给模型","：卖点、参数这类文字由本机排版引擎叠加（内置可免费商用的中文字体，不消耗模型额度，可编辑、可导出），生成模型不承担关键文字的渲染",[37,57,58,61],{},[40,59,60],{},"自检闭环","：出完自动拿成品跟原图比——查商品有没有走形、光影是否违和、图内有没有错字；没过就带着诊断重做，还是没过就标成「待人工确认」并在结果页置顶提示",[37,63,64,67],{},[40,65,66],{},"标准卡片产线","：主图卡 + 参数卡 × 3 规格。取色优先级为 单张卡手动改色 > 任务级模板 > 类目默认模板 > 全局默认 > 按商品图派生的配色——模板只管结构，颜色默认跟着商品走",[37,69,70,73],{},[40,71,72],{},"商品类目可以自己管","：内置 11 组，能增、能删、能改，改完直接保存下来。类目还额外带着这个类目的参数项提示、默认卡片样式，以及敏感类目下强制关闭人像场景的硬规则（无条件压过全局的人像开关）",[37,75,76,79],{},[40,77,78],{},"批量生成","：表格文件或整个文件夹一次导入、整批排队，共用同一套队列按设定的并发数（1-3）跑；单条失败不影响其它，同一批连续 3 条失败会自动停下并提示排查",[37,81,82,85],{},[40,83,84],{},"密钥自带，成本透明","：智谱 \u002F DeepSeek \u002F 火山方舟 \u002F 阿里云四家各一把密钥，都是必需的；费用直接结算在用户自己的模型账号上，每个任务开跑前明示预估金额",[37,87,88,91],{},[40,89,90],{},"导出即合规","：主图 800×800（含白底图）+ 详情 750px 切片（单张目标不超过 500KB）+ 文案 + 压缩包，导出前先预检尺寸和体积；生成来源的标记在切片、压缩全过程都不会被剥离，另在图上用角标显式标出",[11,93,94],{"id":94},"技术架构",[96,97,98,111],"table",{},[99,100,101],"thead",{},[102,103,104,108],"tr",{},[105,106,107],"th",{},"模块",[105,109,110],{},"技术选型",[112,113,114,123,131,139,147,155,163],"tbody",{},[102,115,116,120],{},[117,118,119],"td",{},"后端",[117,121,122],{},"Go + GORM + SQLite（纯 Go 驱动，交叉编译无 CGO）",[102,124,125,128],{},[117,126,127],{},"桌面运行时",[117,129,130],{},"Wails v2（WebView2 \u002F WKWebView），无边框窗口 + 托盘 + 崩溃落盘",[102,132,133,136],{},[117,134,135],{},"前端",[117,137,138],{},"Vue3 + Vite + Element Plus + Pinia，暗色优先设计令牌",[102,140,141,144],{},[117,142,143],{},"模型网关",[117,145,146],{},"OpenAI 兼容协议统一接入（chat + 图像生成），模型位\u002F降级顺位\u002F价格表全部配置化",[102,148,149,152],{},[117,150,151],{},"抠图",[117,153,154],{},"阿里云商品分割 API（≈0.002 元\u002F次，直出白底图）",[102,156,157,160],{},[117,158,159],{},"排版",[117,161,162],{},"Go 侧 750px 位图合成 + CJK 字体渲染",[102,164,165,168],{},[117,166,167],{},"工程化",[117,169,170],{},"架构护栏（AST 断言）+ 依赖登记制 + golden 像素基线测试 + OpenSpec 治理",[15,172,173,174,178,179,182],{},"数据侧 6 张表（Product \u002F GenerationTask \u002F GenerationBatch \u002F TaskStep \u002F GeneratedAsset \u002F ExportRecord），其中 ",[175,176,177],"code",{},"TaskStep"," 按",[40,180,181],{},"图片实例","多行存储，各自携带状态与产物引用——图级断点续跑和\"已完成部分不重复计费\"都依赖这个粒度。",[15,184,185,186,189,190,193],{},"工程约定编译成了会红的检查：分层越界（",[175,187,188],{},"app.go"," 不直接 import gorm）、模型注册双向校验、新增依赖必须登记 ",[175,191,192],{},"deps.yaml","、渲染层禁 import node 能力、禁硬编码色值，且护栏解析到 0 个结果会 Fatal 而非静默放行。冒烟测试定位为本地验证——三平台 CI 只做静态检查与编译，不启动图形界面。",[15,195,196,197,202],{},"本项目由 ",[198,199,201],"a",{"href":200},"\u002Fprojects\u002Fwails-bailer-starter","Wails 桌面端脚手架基座"," 实例化而来——运行时能力与管道契约直接复用，业务面全部在此长出。",[11,204,205],{"id":205},"成果",[34,207,208,218,228,234,240],{},[37,209,210,213,214,217],{},[40,211,212],{},"从 3-7 天到 8 分半","：单套（5 图）真实密钥全流程实测 ",[40,215,216],{},"8 分 27 秒","，落在「≤10 分钟出整套详情页」的目标内",[37,219,220,223,224,227],{},[40,221,222],{},"它要替换掉的那件事","：外包一套 300-1500 元、3-7 天交付；这里单套模型消耗理想值约 ",[40,225,226],{},"1 元","，算上 1-3 次单张重做的真实预期 1-2 元——费用结算在用户自己的模型账号上，中间不过手",[37,229,230,233],{},[40,231,232],{},"出图主选是盲测翻盘定的","：Seedream 4.5 把商品结构复刻到近乎完美，GLM-Image 重绘成\"同类不同款\"——据此调换了出图位顺位",[37,235,236,239],{},[40,237,238],{},"自检不是摆设","：成品自检比对原图查商品走形、光影违和与图内错字，未通过带诊断重做；仍不通过就置顶标记「待人工确认」，而不是悄悄交付",[37,241,242,245],{},[40,243,244],{},"拿到手就是装完能用的安装包","：Mac 出带拖拽引导的安装包、Windows 出安装器，目标机器不需要 Go \u002F Node.js 运行时",[11,247,248],{"id":248},"体验",[15,250,251,252,255],{},"内测阶段的桌面客户端，目前主要是我自己在用——",[40,253,254],{},"暂无公开下载与在线演示，源码也未公开","。想先看它是怎么搭起来的，可以读本页下方列出的相关技术文章——架构、工程化与踩坑各有落笔。",{"title":257,"searchDepth":258,"depth":258,"links":259},"",2,[260,261,262,263,264,265],{"id":13,"depth":258,"text":13},{"id":23,"depth":258,"text":23},{"id":29,"depth":258,"text":29},{"id":94,"depth":258,"text":94},{"id":205,"depth":258,"text":205},{"id":248,"depth":258,"text":248},"ai","个人项目","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-hero.webp","2026-09-29",null,"md",true,[274,278,282,286],{"title":275,"description":276,"image":277},"1 张挂拍图 → 一整套场景渲染","左侧用户上传的挂拍原图，右侧由程序自己规划并渲染的逆光石墙与窗边场景，商品结构保持一致","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-input2out.webp",{"title":279,"description":280,"image":281},"详情长图 · 750px 本机排版合成","关键文字在出图后由本机排版叠加，生成模型不承担文字渲染；按平台高度限制自动切片","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-longpage.webp",{"title":283,"description":284,"image":285},"主图导出 · 场景图与白底图","阿里云商品分割直出白底图，800×800 主图 + AI 标识角标 + ZIP 打包","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-mainimgs.webp",{"title":287,"description":288,"image":289},"首次启动向导 · 四把密钥各司其职","感知自检 \u002F 规划文案 \u002F 图像生成 \u002F 抠图四家服务商均为必需，内置注册指引与一键跳转控制台","https:\u002F\u002Fname.os.bennywen.xyz\u002Fbennywen.xyz\u002Fassets\u002Fecom-detail-ai\u002Fecom-detail-wizard.webp",{"specs":291,"modules":310,"deploy":334,"limits":338},[292,295,298,301,304,307],{"label":293,"value":294},"交付形态","Windows \u002F macOS 桌面客户端，装完即用，目标机器不需要另装运行环境",{"label":296,"value":297},"单套产出","主图 + 白底图 + 详情长图切片 + 文案，一套实测约 8 分半",{"label":299,"value":300},"使用成本","一套约 1-2 元，结算在你自己名下的模型账号，开跑前先给预估金额",{"label":302,"value":303},"风格决策","不用选品类、不用选风格——程序读图后自己定，也可在看图后手动指定",{"label":305,"value":306},"批量能力","表格或文件夹一次导入一整批商品排队生成，单批上限 200 条",{"label":308,"value":309},"隐私","商品图只发往你自己账号下的模型服务；长图排版与打包在本机完成",[311,314,317,320,323,326,329,331],{"name":312,"desc":313},"读图","拿到商品图先看懂它是什么——品类、材质、结构，以及有哪些值得讲的点",{"name":315,"desc":316},"自主规划","自己决定这套详情页要出几张图、每张配什么场景与光影、页面分几块",{"name":318,"desc":319},"场景渲染","按规划逐张生成，商品结构保持一致，不是把商品抠出来贴进模板",{"name":321,"desc":322},"文字排版","卖点与参数文字在本机排版合成，不吃模型的额度，也可以自己改",{"name":324,"desc":325},"成品自检","出完自动跟原图比对，发现商品走形、光影违和或图内错字就带诊断重做",{"name":327,"desc":328},"导出打包","一次拿到主图、白底图、详情长图切片与文案，尺寸体积先自检再打包",{"name":78,"desc":330},"整批商品排队跑，单条失败不影响其它；连环失败自动停下提示排查",{"name":332,"desc":333},"成本预估","开跑前估算这一套要花多少钱，钱花在哪一步看得见",[335,336,337],"内测阶段的桌面客户端：装包后双击即用，不需要装数据库，也不需要自己的服务器","首次启动有一个配置向导，带你领四家模型服务的密钥（读图、规划、出图、抠图各一把）","生成在云端跑，不吃本机算力；长图排版与打包在本机完成",[339,340,341,342],"Mac 上关掉窗口即退出，没有常驻托盘（Windows 上可以收进托盘后台继续生成）","编辑只到「模块」这一层——增删、排序、换图可以，没有元素级的拖拽排版","商品模特图暂时没有：真人像生成涉及合规，留到下一版评估","在设置页手动换过模型服务商之后，成本估算仍按原来的价格显示，需要重过一遍向导才会同步",{},16,"\u002Fprojects\u002Fecom-detail-ai",{"title":5,"description":257},"ecom-detail-ai","projects\u002Fecom-detail-ai","面向淘宝\u002F天猫中小卖家与美工——1 张商品图进，不选品类不选风格，8 分半出一整套详情页，单套模型消耗约 1-2 元",[351,352,353,354,355,356,357,358],"Go","GORM","SQLite","Wails","Vue3","Element Plus","Vite","Pinia","2026","gD63yNSExkuy6opU0htv0KjL2bv-jAcGuYWjwHk1L7w",[362,368,373,379,383,384,389,394,399,402,407,413,419,423,428,432,436,440,444,448],{"title":363,"slug":364,"order":365,"year":359,"date":366,"category":367},"图片工坊 · 离线批量图片处理","image-workshop",20,"2026-10-24","desktop",{"title":369,"slug":370,"order":371,"year":359,"date":372,"category":367},"Morrow · 桌面健康提醒","morrow",19,"2026-10-23",{"title":374,"slug":375,"order":376,"year":359,"date":377,"category":378},"家教学情管理系统","tutor-analytics",17,"2026-09-30","operations",{"title":380,"slug":381,"order":382,"year":359,"date":377,"category":266},"闲鱼素材工坊","xianyu-content-gen",18,{"title":5,"slug":347,"order":344,"year":359,"date":269,"category":266},{"title":201,"slug":385,"order":386,"year":359,"date":387,"category":388},"wails-bailer-starter",15,"2026-09-15","toolkit",{"title":390,"slug":391,"order":392,"year":359,"date":393,"category":388},"多端管理脚手架基座","admin-scaffold",8,"2026-09-04",{"title":395,"slug":396,"order":397,"year":359,"date":398,"category":378},"公车车辆管理系统","bus-admin-system",1,"2026-09-02",{"title":400,"slug":401,"order":258,"year":359,"date":398,"category":378},"设备出租订单管理系统","rental-order-manager",{"title":403,"slug":404,"order":405,"year":359,"date":406,"category":266},"家庭绿植管家","family-plant-manager",3,"2026-08-19",{"title":408,"slug":409,"order":410,"year":411,"date":412,"category":266},"古诗词AI取名工具","chinese-poetry-give-name",7,"2025","2026-06-22",{"title":414,"slug":415,"order":416,"year":411,"date":417,"category":418},"企业固定资产管理系统","asset-admin",4,"2026-06-16","admin",{"title":420,"slug":421,"order":422,"year":411,"date":417,"category":266},"知祖AI","kingpt",5,{"title":424,"slug":425,"order":426,"year":411,"date":417,"category":427},"深圳房产智能分析平台","sz-realestate",6,"data",{"title":429,"slug":430,"order":431,"year":411,"date":417,"category":418},"工厂轻量化智能排班系统","staff-scheduling",9,{"title":433,"slug":434,"order":435,"year":411,"date":417,"category":378},"电商服装仓库物流管理系统","clothing-warehouse",10,{"title":437,"slug":438,"order":439,"year":411,"date":417,"category":266},"知识库问答系统","kb-qa",11,{"title":441,"slug":442,"order":443,"year":411,"date":417,"category":418},"企业微信邮箱运营管理系统","mail-manager",12,{"title":445,"slug":446,"order":447,"year":411,"date":417,"category":378},"Switch 电玩库存管理系统","switch-manager",13,{"title":449,"slug":450,"order":451,"year":411,"date":417,"category":418},"学生宿舍管理系统","dorm-manager",14,[453,457,460,463],{"title":454,"slug":455,"date":456,"links":270},"一个人做 AI 产品，我踩过的 9 个真实的坑","ecom-detail-ai-part3-pitfalls","2026-10-14",{"title":458,"slug":459,"date":456,"links":270},"Wails v2 实战：用 Go + Vue3 做一个真正能用的 AI 桌面应用","ecom-detail-ai-part2-wails",{"title":461,"slug":462,"date":456,"links":270},"我用 Go 搭了一条 AI Agent 流水线：从 1 张商品图到一整套淘宝详情页","ecom-detail-ai-part1-architecture",{"title":464,"slug":465,"date":466,"links":270},"AI 时代，如何把一个需求真正落地成应用？——一条\"文档驱动 + 实测修订\"的实战路径","ai-requirement-landing","2026-10-13",1792857942191]