chengmaandClaude Fable 5
9de006808e
- default template line order now follows the researched source project's assembly structure (user-accepted): category goal, index/differentiation, platform context, inline rules, reference rule, item id, user needs, trailing ratio emphasis - forced protection rules become 4 required read-only placeholders (size/long-image, banned content, price, sizing) instead of a code-appended tail block; consistency and no-fabrication fold into the reference-rule rendering - placeholders 13 -> 17, required 8 -> 12; update mockup SVG and README accordingly Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
129 lines
11 KiB
XML
129 lines
11 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="940" height="620" viewBox="0 0 940 620" font-family="'Segoe UI','Microsoft YaHei',sans-serif">
|
||
<!-- T-637 商品套图提示词设置弹窗与实时最终预览：标题行新增「提示词设置」入口；弹窗左编辑模板、右只读实时预览，共用同一 renderer；模板行序对齐调研笔记的组装顺序，强制规则为只读占位符内联 -->
|
||
<defs>
|
||
<style>
|
||
.win{fill:#f4f6f9;stroke:#d3d9e2}.hd{fill:#2b3a55}.title{fill:#fff;font-size:14px;font-weight:600}
|
||
.tab{fill:#e8ebf0}.tabA{fill:#f4f6f9}.tabT{fill:#5c6573;font-size:13px}.tabTA{fill:#2f6fed;font-size:13px;font-weight:600}
|
||
.sec{fill:#1f2733;font-size:13px;font-weight:600}.mut{fill:#8a92a0;font-size:11px}
|
||
.cell{fill:#2a2f3a;font-size:12px}
|
||
.btnP{fill:#2f6fed}.btnPT{fill:#fff;font-size:12px;font-weight:600}
|
||
.btn{fill:#fff;stroke:#c5ccd6}.btnT{fill:#3a4150;font-size:11px}
|
||
.panel{fill:#fff;stroke:#e2e6ec}.inp{fill:#fff;stroke:#c5ccd6}.ta{fill:#fbfcfe;stroke:#c5ccd6}
|
||
.sel{fill:#fff;stroke:#c5ccd6}.selT{fill:#2a2f3a;font-size:11px}
|
||
.tpl{fill:#2a2f3a;font-size:11px}.ph{fill:#2f6fed}.rl{fill:#b07d1f}
|
||
.ok{fill:#20a464;font-size:11px}
|
||
</style>
|
||
</defs>
|
||
|
||
<rect class="win" x="0.5" y="0.5" width="939" height="619" rx="8"/>
|
||
<rect class="hd" x="0.5" y="0.5" width="939" height="40" rx="8"/><rect class="hd" x="0.5" y="20" width="939" height="21"/>
|
||
<text class="title" x="18" y="26">蝦皮圈優化助手 · 商品套图生成</text>
|
||
<circle cx="888" cy="20" r="6" fill="#f5bf4f"/><circle cx="910" cy="20" r="6" fill="#5ac26a"/><circle cx="866" cy="20" r="6" fill="#e0e4ea"/>
|
||
|
||
<!-- tab bar (⑥ active) -->
|
||
<rect class="tab" x="0.5" y="41" width="939" height="38"/>
|
||
<rect class="tabA" x="590" y="45" width="150" height="38"/><rect x="590" y="45" width="150" height="3" fill="#2f6fed"/>
|
||
<text class="tabT" x="24" y="68">① 导入采集</text>
|
||
<text class="tabT" x="150" y="68">② AI生成</text>
|
||
<text class="tabT" x="256" y="68">③ 更新蝦皮</text>
|
||
<text class="tabT" x="386" y="68">④ 账号管理</text>
|
||
<text class="tabT" x="516" y="68">⑤ 设置</text>
|
||
<text class="tabTA" x="604" y="68">⑥ 商品套图</text>
|
||
|
||
<!-- section: 主界面标题行变更（T-637 第 1 节） -->
|
||
<text class="mut" x="18" y="102">主界面变更 · 「商品卖点与要求」标题行：AI帮写紧随 label，「提示词设置」同行最右</text>
|
||
<rect class="panel" x="18" y="108" width="644" height="32" rx="6"/>
|
||
<text class="sec" x="30" y="129" font-size="12">商品卖点与要求</text>
|
||
<rect class="btn" x="136" y="114" width="58" height="20" rx="5"/><text class="btnT" x="147" y="128">AI帮写</text>
|
||
<rect class="btn" x="200" y="114" width="44" height="20" rx="5" stroke-dasharray="3,2"/><text class="btnT" x="211" y="128" fill="#8a92a0">取消</text>
|
||
<rect class="btn" x="574" y="114" width="78" height="20" rx="5" stroke="#2f6fed"/><text class="btnT" x="585" y="128" fill="#2f6fed">提示词设置</text>
|
||
<text class="mut" x="676" y="120">「取消」仅 AI 帮写运行时显示</text>
|
||
<text class="mut" x="676" y="134">点「提示词设置」→ 打开弹窗</text>
|
||
<line x1="613" y1="140" x2="613" y2="150" stroke="#2f6fed" stroke-dasharray="3,2"/>
|
||
|
||
<!-- section: ProductSuitePromptDialog 弹窗 -->
|
||
<rect x="54" y="154" width="840" height="444" rx="8" fill="#1f2733" opacity="0.08"/>
|
||
<rect x="50" y="150" width="840" height="444" rx="8" fill="#fff" stroke="#c5ccd6"/>
|
||
<rect x="50" y="150" width="840" height="32" rx="8" fill="#eef1f6"/><rect x="50" y="166" width="840" height="16" fill="#eef1f6"/>
|
||
<text class="sec" x="66" y="171" font-size="12">套图提示词设置</text>
|
||
<text class="mut" x="866" y="171">✕</text>
|
||
|
||
<!-- toolbar: 保存 / 恢复默认 / 预览分类 / 预览序号步进器 -->
|
||
<rect class="btnP" x="66" y="190" width="60" height="24" rx="5"/><text class="btnPT" x="82" y="206">保存</text>
|
||
<rect class="btn" x="134" y="190" width="76" height="24" rx="5"/><text class="btnT" x="146" y="206">恢复默认</text>
|
||
<text class="mut" x="222" y="206">恢复默认＝二次确认 → 校验内置模板 → 统一原子写盘</text>
|
||
<rect class="sel" x="556" y="190" width="132" height="24" rx="5"/><text class="selT" x="566" y="206">预览分类：场景图 ▼</text>
|
||
<text class="selT" x="700" y="206">预览第</text>
|
||
<rect class="btn" x="740" y="190" width="22" height="24" rx="5"/><text class="btnT" x="747" y="206">◀</text>
|
||
<text class="selT" x="770" y="206">2 / 2 张</text>
|
||
<rect class="btn" x="824" y="190" width="22" height="24" rx="5"/><text class="btnT" x="831" y="206">▶</text>
|
||
|
||
<!-- left: 基础模板编辑区（行序对齐调研笔记组装顺序） -->
|
||
<text class="sec" x="66" y="240" font-size="12">基础模板（可编辑）</text>
|
||
<rect class="btn" x="372" y="224" width="90" height="22" rx="5"/><text class="btnT" x="382" y="239">插入变量 ▾</text>
|
||
<rect class="ta" x="66" y="250" width="396" height="244" rx="6"/>
|
||
<text class="tpl" x="76" y="270" fill="#2f6fed">{分类要求}</text>
|
||
<text class="tpl" x="76" y="287">套图分类：<tspan class="ph">{套图分类}</tspan>；本分类第 <tspan class="ph">{分类序号}</tspan>/<tspan class="ph">{分类总数}</tspan> 张。</text>
|
||
<text class="tpl" x="76" y="304" fill="#2f6fed">{差异化要求}</text>
|
||
<text class="tpl" x="76" y="321">平台：<tspan class="ph">{平台}</tspan>；国家地区：<tspan class="ph">{国家地区}</tspan>；输出语言：<tspan class="ph">{输出语言}</tspan>。</text>
|
||
<text class="tpl" x="76" y="338" fill="#b07d1f">{尺寸与长图规则}</text>
|
||
<text class="tpl" x="76" y="355" fill="#b07d1f">{禁用内容规则}</text>
|
||
<text class="tpl" x="76" y="372" fill="#b07d1f">{价格信息规则}</text>
|
||
<text class="tpl" x="76" y="389" fill="#b07d1f">{尺码信息规则}</text>
|
||
<text class="tpl" x="76" y="406" fill="#b07d1f">{参考图规则}</text>
|
||
<text class="tpl" x="76" y="423">商品ID：<tspan class="ph">{商品ID}</tspan></text>
|
||
<text class="tpl" x="76" y="440">商品卖点与要求：</text>
|
||
<text class="tpl" x="76" y="457" fill="#2f6fed">{商品卖点与要求}</text>
|
||
<text class="tpl" x="76" y="474">本次生成比例：<tspan class="ph">{图片比例}</tspan>。请严格按此比例输出。</text>
|
||
<text class="ok" x="66" y="512">✓ 校验通过：12 个必需变量齐全 · 无未知变量</text>
|
||
<text class="mut" x="66" y="528">蓝＝可编辑变量 · 琥珀＝只读规则（内容代码维护，可移位、不可改删）</text>
|
||
|
||
<!-- insert variable menu popup -->
|
||
<rect x="309" y="251" width="156" height="176" rx="6" fill="#1f2733" opacity="0.10"/>
|
||
<rect x="306" y="248" width="156" height="176" rx="6" fill="#fff" stroke="#c5ccd6"/>
|
||
<rect x="307" y="253" width="154" height="18" fill="#eef2fb"/>
|
||
<text class="selT" x="316" y="266" fill="#2f6fed">{分类要求}</text><text class="mut" x="416" y="266">必需</text>
|
||
<text class="selT" x="316" y="285" fill="#2f6fed">{套图分类}</text><text class="mut" x="416" y="285">必需</text>
|
||
<text class="selT" x="316" y="304" fill="#2f6fed">{分类序号}</text><text class="mut" x="416" y="304">必需</text>
|
||
<text class="selT" x="316" y="323" fill="#2f6fed">{差异化要求}</text><text class="mut" x="416" y="323">必需</text>
|
||
<text class="selT" x="316" y="342" fill="#b07d1f">{尺寸与长图规则}</text><text class="mut" x="416" y="342">只读</text>
|
||
<text class="selT" x="316" y="361" fill="#b07d1f">{禁用内容规则}</text><text class="mut" x="416" y="361">只读</text>
|
||
<text class="selT" x="316" y="380" fill="#b07d1f">{参考图规则}</text><text class="mut" x="416" y="380">必需</text>
|
||
<text class="selT" x="316" y="399" fill="#2f6fed">{商品卖点与要求}</text><text class="mut" x="416" y="399">必需</text>
|
||
<text class="mut" x="316" y="418">… 共 17 个变量 · 插入到光标处</text>
|
||
|
||
<!-- splitter -->
|
||
<circle cx="470" cy="362" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="370" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="378" r="1.5" fill="#c5ccd6"/>
|
||
|
||
<!-- right: 最终提示词实时预览（规则内联，与调研笔记结构一致） -->
|
||
<text class="sec" x="478" y="240" font-size="12">最终提示词预览（只读）</text>
|
||
<text class="mut" x="740" y="240">实时刷新 · 200ms 防抖</text>
|
||
<rect class="ta" x="478" y="250" width="398" height="270" rx="6"/>
|
||
<text class="tpl" x="488" y="268">场景图：在真实使用场景中展示商品效果</text>
|
||
<text class="tpl" x="488" y="284">套图分类：场景图；本分类第 2/2 张。</text>
|
||
<text class="tpl" x="488" y="300">本分类第 2 张：与本分类其他图片采用不同构图、角度或场景。</text>
|
||
<text class="tpl" x="488" y="316">平台：Shopee；国家地区：中国台湾；输出语言：繁体中文。</text>
|
||
<rect x="484" y="326" width="386" height="104" rx="4" fill="#fdf6e7" stroke="#e6cf9a"/>
|
||
<text x="820" y="340" font-size="10" fill="#8a6d1f">🔒 只读</text>
|
||
<text class="tpl" x="492" y="342" fill="#6d5a23">最终输出严格符合所选比例的单张完整构图电商图，</text>
|
||
<text class="tpl" x="492" y="357" fill="#6d5a23">禁止海报长图、详情页长图和多宫格拼接版面。</text>
|
||
<text class="tpl" x="492" y="372" fill="#6d5a23">禁止出现国旗、国徽、地图轮廓及政治符号。</text>
|
||
<text class="tpl" x="492" y="387" fill="#6d5a23">未提供价格时，禁止添加价格、币别、折扣或促销金额。</text>
|
||
<text class="tpl" x="492" y="402" fill="#6d5a23">未提供尺码时，禁止编造尺码、尺寸或规格信息。</text>
|
||
<text class="tpl" x="492" y="417" fill="#6d5a23">当前图片为本任务唯一主参考图；保持商品主体、款式、</text>
|
||
<text class="tpl" x="492" y="429" fill="#6d5a23" font-size="10">颜色和关键细节准确，不编造未提供的信息。</text>
|
||
<text class="tpl" x="488" y="448">商品ID：51100639510</text>
|
||
<text class="tpl" x="488" y="464">商品卖点与要求：</text>
|
||
<text class="tpl" x="488" y="480">韩版加绒卫衣，显瘦保暖，通勤日常皆宜。</text>
|
||
<text class="tpl" x="488" y="496">本次生成比例：1:1。请严格按此比例输出，不能改成其他长宽比。</text>
|
||
<text class="mut" x="478" y="536">与新建 job 落库的最终 prompt 完全一致 · 预览不产生 cmhub 请求/点数</text>
|
||
|
||
<!-- dialog footer -->
|
||
<line x1="66" y1="550" x2="874" y2="550" stroke="#eef0f5"/>
|
||
<text class="mut" x="66" y="572">关闭含未保存修改 → 「保存 / 不保存 / 取消」三选项 · 任何失败不损坏原模板</text>
|
||
<text class="mut" x="586" y="572">默认预览白底图；本图已切至场景图第 2 张核对差异化</text>
|
||
|
||
<!-- footnote -->
|
||
<text class="mut" x="50" y="612">模板行序对齐《虾皮圈电商图生成器提示词组装分析》组装顺序；规则占位符只读内联；分类数量 0/1 时步进器禁用并显示 1/1</text>
|
||
</svg>
|