design: add homepage prototypes (v1/v2), pick v1 for T-606
- prototypes/cmhub-homepage-v1.svg 「生成台」（靛蓝×琥珀，电商转化 Hero）— 选定 - prototypes/cmhub-homepage-v2.svg 「API 终端」（深色 curl→JSON）— 留作开发者页参考 - 06-tasks.md T-606 验收指向 v1 原型；progress.md 记录选型决策 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
QiuSW
@@ -0,0 +1,294 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 2620" width="1440" height="2620" font-family="'Space Grotesk','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="btn" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#6455F2"/>
|
||||
<stop offset="1" stop-color="#4335CF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="thread" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#5B4BEF"/>
|
||||
<stop offset="1" stop-color="#E8A02D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="band" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#1B1740"/>
|
||||
<stop offset="1" stop-color="#2A1E5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="thumb" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#EEF0F7"/>
|
||||
<stop offset="1" stop-color="#DDE2F0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="thumbOut" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ECEBFF"/>
|
||||
<stop offset="1" stop-color="#FBEFD9"/>
|
||||
</linearGradient>
|
||||
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="30" flood-color="#1A2030" flood-opacity="0.10"/>
|
||||
</filter>
|
||||
<filter id="softsm" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="14" flood-color="#1A2030" flood-opacity="0.10"/>
|
||||
</filter>
|
||||
<style>
|
||||
.ink{fill:#1A2030}.soft{fill:#5A6478}.faint{fill:#8A93A6}.white{fill:#FFFFFF}
|
||||
.indigo{fill:#5B4BEF}.amber{fill:#C9821A}
|
||||
.eyebrow{font-size:13px;font-weight:600;letter-spacing:4px;fill:#5B4BEF}
|
||||
.h1{font-size:58px;font-weight:700;letter-spacing:-1.5px;fill:#161C2B}
|
||||
.lead{font-size:19px;font-weight:400;fill:#5A6478}
|
||||
.sectitle{font-size:38px;font-weight:700;letter-spacing:-0.8px;fill:#161C2B}
|
||||
.cardtitle{font-size:22px;font-weight:700;fill:#1A2030}
|
||||
.body{font-size:15.5px;font-weight:400;fill:#5A6478}
|
||||
.btn{font-size:17px;font-weight:600}
|
||||
.num{font-size:15px;font-weight:700;letter-spacing:2px;fill:#5B4BEF}
|
||||
.kicker{font-size:13px;font-weight:600;letter-spacing:2px;fill:#8A93A6}
|
||||
.mono{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace}
|
||||
.chiptxt{font-size:14px;font-weight:500;fill:#3A3560}
|
||||
.metric{font-size:13px;font-weight:700;letter-spacing:1px}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- paper -->
|
||||
<rect width="1440" height="2620" fill="#F5F7FB"/>
|
||||
|
||||
<!-- ============ NAV ============ -->
|
||||
<g>
|
||||
<!-- wordmark: a metering glyph + cmhub -->
|
||||
<rect x="120" y="30" width="30" height="30" rx="9" fill="url(#btn)"/>
|
||||
<rect x="128" y="46" width="4" height="8" rx="2" fill="#fff"/>
|
||||
<rect x="136" y="41" width="4" height="13" rx="2" fill="#fff"/>
|
||||
<rect x="144" y="37" width="4" height="17" rx="2" fill="#E8A02D"/>
|
||||
<text x="164" y="52" font-size="22" font-weight="700" class="ink">cmhub</text>
|
||||
|
||||
<text x="470" y="51" font-size="15.5" font-weight="500" class="soft">功能</text>
|
||||
<text x="560" y="51" font-size="15.5" font-weight="500" class="soft">计费</text>
|
||||
<text x="650" y="51" font-size="15.5" font-weight="500" class="soft">文档</text>
|
||||
|
||||
<text x="1085" y="51" font-size="15.5" font-weight="600" class="ink">登录</text>
|
||||
<rect x="1160" y="26" width="160" height="40" rx="10" fill="url(#btn)"/>
|
||||
<text x="1240" y="51" text-anchor="middle" class="btn white">免费注册</text>
|
||||
</g>
|
||||
<line x1="0" y1="82" x2="1440" y2="82" stroke="#E7EBF3" stroke-width="1"/>
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<!-- left column -->
|
||||
<g>
|
||||
<text x="120" y="176" class="eyebrow">AI 电商生成 · 按点数计费</text>
|
||||
<text x="118" y="252" class="h1">把商品图和一句话，</text>
|
||||
<text x="118" y="322" class="h1">变成能卖货的</text>
|
||||
<text x="500" y="322" class="h1" fill="#5B4BEF">标题与主图</text>
|
||||
<text x="810" y="322" class="h1">。</text>
|
||||
|
||||
<text x="120" y="392" class="lead">cmhub 把「生成标题」「生成主图」封装成 HTTP 接口，桌面端拿</text>
|
||||
<text x="120" y="422" class="lead">API Key 直接用，按点数计费——换底层模型，价格不变。</text>
|
||||
|
||||
<!-- CTAs -->
|
||||
<rect x="120" y="466" width="196" height="56" rx="12" fill="url(#btn)"/>
|
||||
<text x="218" y="501" text-anchor="middle" class="btn white">免费注册 →</text>
|
||||
|
||||
<rect x="332" y="466" width="256" height="56" rx="12" fill="#fff" stroke="#D3D9E6" stroke-width="1.5"/>
|
||||
<path d="M362 494 v10 M357 499 l5 5 l5 -5 M354 511 h16" stroke="#1A2030" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="388" y="490" font-size="15" font-weight="600" class="ink">下载 Windows 客户端</text>
|
||||
<text x="388" y="510" font-size="12.5" class="faint mono">v1.0.0 · 48 MB</text>
|
||||
|
||||
<!-- trust line -->
|
||||
<g transform="translate(120,566)">
|
||||
<circle cx="6" cy="6" r="5" fill="none" stroke="#C9821A" stroke-width="2"/>
|
||||
<text x="22" y="11" font-size="14" class="soft">注册不送点数 · 邮箱即用免验证 · 生成标题 <tspan font-weight="700" fill="#C9821A">2 点</tspan> 起</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- right column: 生成台 SIGNATURE -->
|
||||
<g filter="url(#soft)">
|
||||
<rect x="762" y="150" width="558" height="452" rx="22" fill="#fff"/>
|
||||
</g>
|
||||
<g>
|
||||
<!-- card header -->
|
||||
<circle cx="792" cy="192" r="4" fill="#3FCB7E"/>
|
||||
<text x="806" y="197" font-size="14" font-weight="700" class="ink">cmhub 生成台</text>
|
||||
<text x="1290" y="197" text-anchor="end" class="kicker">实时预览</text>
|
||||
<line x1="790" y1="214" x2="1292" y2="214" stroke="#EEF1F7"/>
|
||||
|
||||
<!-- INPUT -->
|
||||
<text x="790" y="248" class="kicker">输入</text>
|
||||
<rect x="790" y="260" width="502" height="76" rx="14" fill="#FAFBFE" stroke="#EBEEF6"/>
|
||||
<rect x="804" y="274" width="48" height="48" rx="10" fill="url(#thumb)"/>
|
||||
<path d="M818 312 l7 -12 l6 8 l5 -6 l6 10 z" fill="#B9C0D6"/>
|
||||
<circle cx="820" cy="290" r="4" fill="#C4CBDE"/>
|
||||
<text x="868" y="290" font-size="15" font-weight="600" class="ink">白色纯棉基础款 T 恤</text>
|
||||
<text x="868" y="313" font-size="13" class="faint">提示词：夏季清爽 · 男女同款 · 主图去背景</text>
|
||||
|
||||
<!-- pipeline: thread + 点数计量 -->
|
||||
<line x1="1041" y1="344" x2="1041" y2="378" stroke="url(#thread)" stroke-width="2.5" stroke-dasharray="3 4"/>
|
||||
<rect x="946" y="348" width="190" height="26" rx="13" fill="#FBEFD9"/>
|
||||
<path d="M962 361 h10 M967 356 v10" stroke="#C9821A" stroke-width="2" stroke-linecap="round"/>
|
||||
<text x="982" y="365" class="metric" fill="#9A6510">生成中 · 计量扣点</text>
|
||||
|
||||
<!-- OUTPUT -->
|
||||
<text x="790" y="410" class="kicker">输出</text>
|
||||
<!-- title chips -->
|
||||
<g>
|
||||
<rect x="790" y="422" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||
<text x="806" y="444" class="chiptxt">纯棉白T恤男夏季薄款情侣装宽松半袖</text>
|
||||
<text x="1104" y="444" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
||||
|
||||
<rect x="790" y="464" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||
<text x="806" y="486" class="chiptxt">日系基础款白色短袖打底衫百搭上衣</text>
|
||||
<text x="1104" y="486" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
||||
|
||||
<rect x="790" y="506" width="330" height="34" rx="9" fill="#F3F2FF"/>
|
||||
<text x="806" y="528" class="chiptxt">纯色圆领纯棉T恤男女同款舒适透气</text>
|
||||
<text x="1104" y="528" text-anchor="end" class="metric" fill="#5B4BEF">−2</text>
|
||||
</g>
|
||||
<!-- generated 主图 -->
|
||||
<rect x="1138" y="422" width="154" height="118" rx="14" fill="url(#thumbOut)" stroke="#E7E3FA"/>
|
||||
<circle cx="1215" cy="470" r="22" fill="#fff" opacity="0.7"/>
|
||||
<path d="M1189 516 l20 -26 l14 16 l10 -12 l18 22 z" fill="#CFC6F2"/>
|
||||
<rect x="1150" y="522" width="70" height="9" rx="4" fill="#fff" opacity="0.8"/>
|
||||
<text x="1215" y="474" text-anchor="middle" class="metric" fill="#9A6510">主图 −10</text>
|
||||
</g>
|
||||
|
||||
<line x1="120" y1="700" x2="1320" y2="700" stroke="#E7EBF3"/>
|
||||
|
||||
<!-- ============ 上手 (real sequence → numbered) ============ -->
|
||||
<g>
|
||||
<text x="120" y="792" class="eyebrow">开始使用</text>
|
||||
<text x="120" y="846" class="sectitle">四步，在你自己的程序里生成</text>
|
||||
<text x="120" y="884" class="lead">用户端负责注册、充值、管 Key；生成走 API。运营在后台配模型和价格，调用方零改动。</text>
|
||||
|
||||
<!-- connecting line -->
|
||||
<line x1="180" y1="985" x2="1260" y2="985" stroke="#E2E6F0" stroke-width="2" stroke-dasharray="2 6"/>
|
||||
|
||||
<!-- step template -->
|
||||
<g>
|
||||
<text x="120" y="978" class="num">01</text>
|
||||
<circle cx="184" cy="985" r="7" fill="#fff" stroke="#5B4BEF" stroke-width="2.5"/>
|
||||
<text x="120" y="1030" class="cardtitle" font-size="19">注册账号</text>
|
||||
<text x="120" y="1058" class="body">邮箱 + 密码即注册即用，</text>
|
||||
<text x="120" y="1080" class="body">免验证，不送点数。</text>
|
||||
</g>
|
||||
<g>
|
||||
<text x="420" y="978" class="num">02</text>
|
||||
<circle cx="484" cy="985" r="7" fill="#fff" stroke="#5B4BEF" stroke-width="2.5"/>
|
||||
<text x="420" y="1030" class="cardtitle" font-size="19">扫码充值点数</text>
|
||||
<text x="420" y="1058" class="body">微信/支付宝扫码，</text>
|
||||
<text x="420" y="1080" class="body">按汇率换成点数。</text>
|
||||
</g>
|
||||
<g>
|
||||
<text x="720" y="978" class="num">03</text>
|
||||
<circle cx="784" cy="985" r="7" fill="#fff" stroke="#5B4BEF" stroke-width="2.5"/>
|
||||
<text x="720" y="1030" class="cardtitle" font-size="19">生成 API Key</text>
|
||||
<text x="720" y="1058" class="body">自助生成，明文只显示</text>
|
||||
<text x="720" y="1080" class="body">一次，库内只存哈希。</text>
|
||||
</g>
|
||||
<g>
|
||||
<text x="1020" y="978" class="num" fill="#C9821A">04</text>
|
||||
<circle cx="1084" cy="985" r="7" fill="#C9821A"/>
|
||||
<text x="1020" y="1030" class="cardtitle" font-size="19">桌面端填 Key 用</text>
|
||||
<text x="1020" y="1058" class="body">客户端带 Key 调接口，</text>
|
||||
<text x="1020" y="1080" class="body">生成标题与主图。</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ============ 能力 ============ -->
|
||||
<g>
|
||||
<text x="120" y="1218" class="eyebrow">能做什么</text>
|
||||
<text x="120" y="1264" class="sectitle">两件事，做到能直接上架</text>
|
||||
</g>
|
||||
<!-- card A: 标题 -->
|
||||
<g filter="url(#softsm)"><rect x="120" y="1310" width="576" height="230" rx="18" fill="#fff"/></g>
|
||||
<g>
|
||||
<rect x="152" y="1342" width="52" height="52" rx="14" fill="#ECEBFF"/>
|
||||
<path d="M167 1362 h22 M167 1370 h22 M167 1378 h14" stroke="#5B4BEF" stroke-width="2.4" stroke-linecap="round"/>
|
||||
<text x="152" y="1432" class="cardtitle">生成标题</text>
|
||||
<rect x="560" y="1352" width="104" height="30" rx="15" fill="#F3F2FF"/>
|
||||
<text x="612" y="1372" text-anchor="middle" class="metric" fill="#5B4BEF">2 点 / 次起</text>
|
||||
<text x="152" y="1468" class="body">给商品生成多个吸睛中文标题，可纯文字，也可看图生成。</text>
|
||||
<text x="152" y="1494" class="body">别名调用，换底层模型价格不变；失败自动退点。</text>
|
||||
</g>
|
||||
<!-- card B: 主图 -->
|
||||
<g filter="url(#softsm)"><rect x="744" y="1310" width="576" height="230" rx="18" fill="#fff"/></g>
|
||||
<g>
|
||||
<rect x="776" y="1342" width="52" height="52" rx="14" fill="#FBEFD9"/>
|
||||
<rect x="789" y="1356" width="26" height="24" rx="5" fill="none" stroke="#C9821A" stroke-width="2.2"/>
|
||||
<circle cx="797" cy="1364" r="2.6" fill="#C9821A"/>
|
||||
<path d="M791 1378 l6 -7 l5 5 l4 -5 l6 7 z" fill="#C9821A"/>
|
||||
<text x="776" y="1432" class="cardtitle">生成主图 / 改图</text>
|
||||
<rect x="1176" y="1352" width="112" height="30" rx="15" fill="#FBEFD9"/>
|
||||
<text x="1232" y="1372" text-anchor="middle" class="metric" fill="#C9821A">10 点 / 次起</text>
|
||||
<text x="776" y="1468" class="body">传商品原图 + 提示词，同步产出电商主图（改图类需原图）。</text>
|
||||
<text x="776" y="1494" class="body">按分辨率计价，结果以 URL 返回，客户端直接下载。</text>
|
||||
</g>
|
||||
|
||||
<!-- ============ 计费 band (the one dark moment) ============ -->
|
||||
<g filter="url(#soft)"><rect x="120" y="1620" width="1200" height="300" rx="24" fill="url(#band)"/></g>
|
||||
<g>
|
||||
<text x="168" y="1698" class="eyebrow" fill="#B7AEFF">怎么计费</text>
|
||||
<text x="166" y="1752" font-size="34" font-weight="700" fill="#fff" letter-spacing="-0.5">按「操作 + 能力别名 + 分辨率」定价</text>
|
||||
<text x="168" y="1794" font-size="16.5" fill="#C9C6E8">运营在后台配价，你只认稳定别名。换供应商、换模型，你的账单口径不变。</text>
|
||||
|
||||
<!-- three honest points -->
|
||||
<g transform="translate(168,1836)">
|
||||
<circle cx="8" cy="8" r="8" fill="#2E2861"/><path d="M4 8 l3 3 l5 -6" stroke="#8B7BFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="28" y="13" font-size="15" fill="#E4E1F7">充值→点数，充多少到多少</text>
|
||||
</g>
|
||||
<g transform="translate(508,1836)">
|
||||
<circle cx="8" cy="8" r="8" fill="#2E2861"/><path d="M4 8 l3 3 l5 -6" stroke="#8B7BFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="28" y="13" font-size="15" fill="#E4E1F7">失败自动退点，不白扣</text>
|
||||
</g>
|
||||
<g transform="translate(820,1836)">
|
||||
<circle cx="8" cy="8" r="8" fill="#2E2861"/><path d="M4 8 l3 3 l5 -6" stroke="#8B7BFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="28" y="13" font-size="15" fill="#E4E1F7">并发扣点安全，不超扣</text>
|
||||
</g>
|
||||
|
||||
<!-- points meter (amber) -->
|
||||
<text x="1272" y="1698" text-anchor="end" class="kicker" fill="#9A8FE0">当前余额</text>
|
||||
<text x="1272" y="1748" text-anchor="end" font-size="46" font-weight="700" fill="#F2B44B" class="mono">1,280</text>
|
||||
<text x="1272" y="1772" text-anchor="end" font-size="13" fill="#9A8FE0">点</text>
|
||||
<rect x="1020" y="1800" width="252" height="10" rx="5" fill="#2E2861"/>
|
||||
<rect x="1020" y="1800" width="176" height="10" rx="5" fill="#E8A02D"/>
|
||||
<text x="1020" y="1836" font-size="12.5" fill="#9A8FE0" class="mono">≈ 128 次标题 / 128 点消耗本月</text>
|
||||
</g>
|
||||
|
||||
<!-- ============ 下载 ============ -->
|
||||
<g>
|
||||
<text x="120" y="2016" class="eyebrow">下载客户端</text>
|
||||
<text x="120" y="2062" class="sectitle">装上桌面端，填 Key 就能生成</text>
|
||||
</g>
|
||||
<g filter="url(#softsm)"><rect x="120" y="2100" width="1200" height="180" rx="20" fill="#fff"/></g>
|
||||
<g>
|
||||
<rect x="152" y="2136" width="70" height="70" rx="18" fill="url(#btn)"/>
|
||||
<rect x="172" y="2156" width="13" height="13" rx="2" fill="#fff"/><rect x="189" y="2156" width="13" height="13" rx="2" fill="#fff"/>
|
||||
<rect x="172" y="2172" width="13" height="13" rx="2" fill="#E8A02D"/><rect x="189" y="2172" width="13" height="13" rx="2" fill="#fff"/>
|
||||
|
||||
<text x="248" y="2158" class="cardtitle">cmhub 桌面客户端</text>
|
||||
<text x="248" y="2186" font-size="14" class="soft mono">Windows 10/11 · v1.0.0 · 更新于 2026-07-06 · 48 MB</text>
|
||||
<text x="248" y="2214" font-size="13" class="faint mono">SHA256 9f2c…a17e （下载后请核对校验值）</text>
|
||||
<text x="248" y="2244" font-size="12.5" fill="#9A6510">首次安装若提示「未知发布者」，点『更多信息 → 仍要运行』——客户端正在申请代码签名。</text>
|
||||
|
||||
<rect x="1052" y="2150" width="236" height="80" rx="14" fill="url(#btn)"/>
|
||||
<path d="M1092 2182 v20 M1084 2192 l8 9 l8 -9 M1080 2214 h24" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="1188" y="2185" text-anchor="middle" font-size="18" font-weight="700" fill="#fff">下载 .exe</text>
|
||||
<text x="1188" y="2208" text-anchor="middle" font-size="12.5" fill="#CFC9F5">前期由本站直连下载</text>
|
||||
</g>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<line x1="120" y1="2372" x2="1320" y2="2372" stroke="#E4E8F1"/>
|
||||
<g>
|
||||
<rect x="120" y="2418" width="26" height="26" rx="8" fill="url(#btn)"/>
|
||||
<rect x="127" y="2431" width="3.4" height="7" rx="1.7" fill="#fff"/><rect x="134" y="2427" width="3.4" height="11" rx="1.7" fill="#fff"/><rect x="141" y="2424" width="3.4" height="14" rx="1.7" fill="#E8A02D"/>
|
||||
<text x="158" y="2439" font-size="18" font-weight="700" class="ink">cmhub</text>
|
||||
<text x="120" y="2470" font-size="13.5" class="faint">自助用户端 · 计费 AI 能力网关 · 运营后台，三合一。</text>
|
||||
|
||||
<text x="700" y="2426" font-size="13" font-weight="600" class="soft">产品</text>
|
||||
<text x="700" y="2454" font-size="13.5" class="faint">功能</text>
|
||||
<text x="700" y="2478" font-size="13.5" class="faint">计费说明</text>
|
||||
|
||||
<text x="880" y="2426" font-size="13" font-weight="600" class="soft">开发者</text>
|
||||
<text x="880" y="2454" font-size="13.5" class="faint">接口文档</text>
|
||||
<text x="880" y="2478" font-size="13.5" class="faint">可用模型</text>
|
||||
|
||||
<text x="1060" y="2426" font-size="13" font-weight="600" class="soft">账户</text>
|
||||
<text x="1060" y="2454" font-size="13.5" class="faint">登录</text>
|
||||
<text x="1060" y="2478" font-size="13.5" class="faint">免费注册</text>
|
||||
|
||||
<text x="1320" y="2454" text-anchor="end" font-size="12.5" class="faint">© 2026 cmhub</text>
|
||||
<text x="1320" y="2478" text-anchor="end" font-size="12.5" class="faint">粤ICP备 000000 号（占位）</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user