1464 lines
43 KiB
HTML
1464 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>TrueGrowth 开图 | AI 画布工作台与图片生成工作流</title>
|
||
<meta
|
||
name="description"
|
||
content="TrueGrowth（开图）是 AI 画布工作台，把 AI 图片生成、提示词推理、流程图、思维导图、素材库和作品整理放进同一块浏览器画布，适合创作者在线使用或私有化改造。"
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="TrueGrowth,开图,AI画布,AI图片生成工作流,AI创作工作台,AI白板,GPT-Image-2,DeepSeek-v4,图片生成器,思维导图,流程图"
|
||
/>
|
||
<meta name="robots" content="index,follow,max-image-preview:large" />
|
||
<link rel="canonical" href="https://TrueGrowth.ai/home.html" />
|
||
<link rel="alternate" hreflang="zh-CN" href="https://TrueGrowth.ai/home.html" />
|
||
<link rel="alternate" hreflang="en" href="https://TrueGrowth.ai/en/home.html" />
|
||
<link
|
||
rel="alternate"
|
||
hreflang="x-default"
|
||
href="https://TrueGrowth.ai/home.html"
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
<meta
|
||
property="og:title"
|
||
content="TrueGrowth 开图 | AI 画布工作台与图片生成工作流"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="用 TrueGrowth 在浏览器里完成 AI 图片生成、提示词推理、素材整理、流程图、思维导图和作品展示。"
|
||
/>
|
||
<meta property="og:url" content="https://TrueGrowth.ai/home.html" />
|
||
<meta property="og:locale" content="zh_CN" />
|
||
<meta property="og:locale:alternate" content="en_US" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://TrueGrowth.ai/product_showcase/九宫格拆图.gif"
|
||
/>
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="TrueGrowth 开图 | AI 画布工作台" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="支持 AI 图片生成、提示词推理、流程图、思维导图和作品整理的 AI 画布工作台。"
|
||
/>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "SoftwareApplication",
|
||
"@id": "https://TrueGrowth.ai/home.html#software",
|
||
"name": "TrueGrowth",
|
||
"alternateName": "TrueGrowth",
|
||
"url": "https://TrueGrowth.ai/home.html",
|
||
"applicationCategory": "DesignApplication",
|
||
"operatingSystem": "Any",
|
||
"description": "TrueGrowth（开图）是 AI 画布工作台，把 AI 图片生成、提示词推理、流程图、思维导图、素材库和作品整理放进同一块浏览器画布。",
|
||
"keywords": [
|
||
"TrueGrowth",
|
||
"GPT-Image-2",
|
||
"DeepSeek-v4",
|
||
"AI图片生成",
|
||
"AI白板",
|
||
"AI画布",
|
||
"思维导图",
|
||
"流程图"
|
||
],
|
||
"image": "https://TrueGrowth.ai/product_showcase/九宫格拆图.gif",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "USD"
|
||
}
|
||
},
|
||
{
|
||
"@type": "FAQPage",
|
||
"@id": "https://TrueGrowth.ai/home.html#faq",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "TrueGrowth 可以用 GPT-Image-2 做什么？",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "TrueGrowth 可以把 GPT-Image-2 生成的图片直接放进画布，继续做参考图对比、作品筛选、流程整理和素材归档。"
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "TrueGrowth 如何配合 DeepSeek-v4？",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "你可以用 DeepSeek-v4 做提示词推理、创意拆解、文本生成和结构化规划，再把结果转成图片、流程图、思维导图或画布笔记。"
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "TrueGrowth 是否适合展示用户作品？",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "适合。TrueGrowth 支持把 AI 生成图、流程图、思维导图和项目素材放在同一工作区，便于复盘、展示和二次编辑。"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
<style>
|
||
:root {
|
||
--bg: #ffffff;
|
||
--ink: #0f172a;
|
||
--surface: #ffffff;
|
||
--surface-dark: #f8fafc;
|
||
--surface-strong: #eff6ff;
|
||
--border: rgba(0, 0, 0, 0.08);
|
||
--card-border: rgba(37, 99, 235, 0.15);
|
||
--text: #334155;
|
||
--muted: #64748b;
|
||
--accent: #2563eb;
|
||
--accent-2: #1d4ed8;
|
||
--accent-3: #60a5fa;
|
||
--shadow: 0 20px 60px rgba(37, 99, 235, 0.06);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||
'PingFang SC', sans-serif;
|
||
color: var(--ink);
|
||
background-color: var(--bg);
|
||
background-image: radial-gradient(
|
||
circle at 15% 0%,
|
||
rgba(37, 99, 235, 0.06),
|
||
transparent 40%
|
||
),
|
||
radial-gradient(
|
||
circle at 85% 30%,
|
||
rgba(37, 99, 235, 0.08),
|
||
transparent 40%
|
||
);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
body::before {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
content: '';
|
||
opacity: 0.4;
|
||
background-image: linear-gradient(
|
||
rgba(37, 99, 235, 0.05) 1px,
|
||
transparent 1px
|
||
),
|
||
linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
|
||
background-size: 40px 40px;
|
||
mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
|
||
-webkit-mask-image: linear-gradient(
|
||
to bottom,
|
||
black 30%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
a {
|
||
color: var(--accent-2);
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
main {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: 22px 22px 76px;
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 10px 0 18px;
|
||
}
|
||
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--ink);
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.brand-logo {
|
||
display: block;
|
||
width: 42px;
|
||
height: 42px;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.2));
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--ink);
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
|
||
gap: 56px;
|
||
align-items: center;
|
||
padding: 22px 0 18px;
|
||
}
|
||
|
||
.hero-copy {
|
||
max-width: 620px;
|
||
}
|
||
|
||
.eyebrow,
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(37, 99, 235, 0.3);
|
||
background: rgba(37, 99, 235, 0.08);
|
||
color: #1d4ed8;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.eyebrow {
|
||
padding: 8px 16px;
|
||
margin: 0 0 24px;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
h1 {
|
||
margin-bottom: 22px;
|
||
font-size: clamp(34px, 4.25vw, 54px);
|
||
line-height: 1.05;
|
||
color: var(--ink);
|
||
letter-spacing: -0.018em;
|
||
white-space: nowrap;
|
||
font-weight: 800;
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 16px;
|
||
font-size: clamp(28px, 4vw, 36px);
|
||
letter-spacing: -0.03em;
|
||
color: var(--ink);
|
||
font-weight: 700;
|
||
}
|
||
|
||
h3 {
|
||
margin-bottom: 12px;
|
||
font-size: 18px;
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.lead,
|
||
.section-lead,
|
||
.card p,
|
||
.work-card p,
|
||
.faq p,
|
||
.model-note {
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.lead {
|
||
max-width: 520px;
|
||
font-size: 16px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.cta-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 48px;
|
||
padding: 0 24px;
|
||
border-radius: 999px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||
color: #fff;
|
||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #ffffff;
|
||
color: var(--accent);
|
||
border: 1px solid var(--accent-3);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #eff6ff;
|
||
border-color: var(--accent-2);
|
||
}
|
||
|
||
.proof {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.proof-item {
|
||
min-height: 74px;
|
||
padding: 14px;
|
||
border: 1px solid rgba(37, 99, 235, 0.14);
|
||
border-radius: 18px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.78),
|
||
rgba(255, 247, 237, 0.72)
|
||
);
|
||
box-shadow: 0 10px 26px rgba(124, 45, 18, 0.06);
|
||
}
|
||
|
||
.proof-value {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: var(--ink);
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.proof-label {
|
||
display: block;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.hero-panel,
|
||
.card,
|
||
.work-card,
|
||
.model-panel,
|
||
.faq li,
|
||
.cta-band {
|
||
border: 1px solid var(--card-border);
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow);
|
||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
|
||
.hero-panel {
|
||
position: relative;
|
||
padding: 14px;
|
||
border-radius: 30px;
|
||
transform: perspective(1000px) rotateY(-3.5deg) rotateX(1.5deg);
|
||
transform-style: preserve-3d;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-panel::before {
|
||
position: absolute;
|
||
inset: -35% auto auto -12%;
|
||
width: 260px;
|
||
height: 260px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(37, 99, 235, 0.2),
|
||
transparent 68%
|
||
);
|
||
content: '';
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-panel::after {
|
||
position: absolute;
|
||
right: 26px;
|
||
bottom: 26px;
|
||
padding: 10px 16px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border: 1px solid var(--border);
|
||
color: var(--ink);
|
||
content: '生成、整理、复用，一次完成';
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
backdrop-filter: blur(8px);
|
||
box-shadow: 0 14px 34px rgba(124, 45, 18, 0.12);
|
||
}
|
||
|
||
.hero-panel img {
|
||
position: relative;
|
||
display: block;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 24px 52px rgba(124, 45, 18, 0.12);
|
||
}
|
||
|
||
.hero-panel-caption {
|
||
position: absolute;
|
||
top: 26px;
|
||
left: 26px;
|
||
display: grid;
|
||
gap: 4px;
|
||
max-width: 210px;
|
||
padding: 12px 14px;
|
||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||
border-radius: 16px;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 14px 34px rgba(124, 45, 18, 0.1);
|
||
}
|
||
|
||
.hero-panel-caption strong {
|
||
color: var(--ink);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.hero-panel-caption span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.section {
|
||
margin-top: 80px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.hero + .section {
|
||
margin-top: 52px;
|
||
}
|
||
|
||
.section-head {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.section-lead {
|
||
max-width: 640px;
|
||
margin-bottom: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.model-grid,
|
||
.feature-grid,
|
||
.work-grid,
|
||
.faq {
|
||
display: grid;
|
||
gap: 24px;
|
||
}
|
||
|
||
.model-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.model-panel {
|
||
border-radius: 20px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.model-panel:hover {
|
||
border-color: rgba(37, 99, 235, 0.4);
|
||
}
|
||
|
||
.tag {
|
||
padding: 6px 12px;
|
||
margin-bottom: 20px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.model-panel strong {
|
||
display: block;
|
||
margin-bottom: 12px;
|
||
font-size: 28px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.feature-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.card,
|
||
.work-card,
|
||
.faq li {
|
||
border-radius: 20px;
|
||
padding: 28px;
|
||
}
|
||
|
||
.card:hover,
|
||
.work-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(37, 99, 235, 0.3);
|
||
}
|
||
|
||
.icon {
|
||
display: grid;
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-bottom: 20px;
|
||
place-items: center;
|
||
border-radius: 12px;
|
||
background: rgba(37, 99, 235, 0.1);
|
||
color: #2563eb;
|
||
font-size: 24px;
|
||
border: 1px solid rgba(37, 99, 235, 0.2);
|
||
}
|
||
|
||
.work-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.work-card {
|
||
overflow: hidden;
|
||
padding: 0;
|
||
}
|
||
|
||
.work-card img {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 10;
|
||
object-fit: cover;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.work-body {
|
||
padding: 24px;
|
||
}
|
||
|
||
.text-link {
|
||
display: inline-flex;
|
||
margin-top: 10px;
|
||
color: var(--accent);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.text-link:hover {
|
||
color: #1e40af;
|
||
text-decoration: underline;
|
||
text-underline-offset: 4px;
|
||
}
|
||
|
||
.steps {
|
||
display: grid;
|
||
gap: 20px;
|
||
margin: 32px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
counter-reset: step;
|
||
}
|
||
|
||
.steps li {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 20px;
|
||
align-items: start;
|
||
padding: 24px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.steps li::before {
|
||
display: grid;
|
||
width: 40px;
|
||
height: 40px;
|
||
place-items: center;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||
color: #fff;
|
||
counter-increment: step;
|
||
content: counter(step);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
||
}
|
||
|
||
.steps h3 {
|
||
margin-bottom: 8px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.faq {
|
||
padding: 0;
|
||
list-style: none;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.cta-band {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 32px;
|
||
align-items: center;
|
||
border-radius: 24px;
|
||
padding: 40px;
|
||
background: linear-gradient(135deg, #eff6ff, #dbeafe);
|
||
border: 1px solid rgba(37, 99, 235, 0.2);
|
||
}
|
||
|
||
.cta-band h2 {
|
||
margin-bottom: 12px;
|
||
color: #1e40af;
|
||
}
|
||
|
||
.cta-band p {
|
||
color: #1d4ed8;
|
||
}
|
||
|
||
.cta-band .btn-secondary {
|
||
background: #ffffff;
|
||
color: #2563eb;
|
||
border: 1px solid #60a5fa;
|
||
}
|
||
|
||
.cta-band .btn-secondary:hover {
|
||
background: #fffaf5;
|
||
}
|
||
|
||
.cta-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
.hero,
|
||
.model-grid,
|
||
.feature-grid,
|
||
.work-grid,
|
||
.faq,
|
||
.cta-band {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.section-head,
|
||
.nav {
|
||
align-items: start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hero-copy {
|
||
max-width: none;
|
||
}
|
||
|
||
.proof {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.proof-item {
|
||
min-height: auto;
|
||
}
|
||
|
||
.hero-panel {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 520px) {
|
||
main {
|
||
padding-inline: 20px;
|
||
}
|
||
|
||
.hero {
|
||
padding-top: 18px;
|
||
}
|
||
|
||
h1 {
|
||
white-space: normal;
|
||
}
|
||
|
||
.hero-panel::after,
|
||
.hero-panel-caption {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<nav class="nav" aria-label="主导航">
|
||
<a class="brand" href="/" aria-label="打开 TrueGrowth 工作台">
|
||
<img
|
||
class="brand-logo"
|
||
src="/icons/icon-96x96.png"
|
||
alt="TrueGrowth logo"
|
||
width="42"
|
||
height="42"
|
||
/>
|
||
<span>TrueGrowth</span>
|
||
</a>
|
||
<div class="nav-links">
|
||
<a
|
||
href="#models"
|
||
data-seo-track="home_nav_click"
|
||
data-seo-target="models"
|
||
>热门模型</a
|
||
>
|
||
<a
|
||
href="#works"
|
||
data-seo-track="home_nav_click"
|
||
data-seo-target="works"
|
||
>作品展示</a
|
||
>
|
||
<a
|
||
href="#workflow"
|
||
data-seo-track="home_nav_click"
|
||
data-seo-target="workflow"
|
||
>使用流程</a
|
||
>
|
||
<a
|
||
href="/user-manual/index.html"
|
||
data-seo-track="home_nav_click"
|
||
data-seo-target="manual"
|
||
>教程</a
|
||
>
|
||
<a
|
||
href="/en/home.html"
|
||
hreflang="en"
|
||
lang="en"
|
||
data-seo-track="home_nav_click"
|
||
data-seo-target="english_home"
|
||
>English</a
|
||
>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<div class="hero-copy">
|
||
<h1>TrueGrowth 开图：AI 画布工作台</h1>
|
||
<p class="lead">
|
||
在一块浏览器画布里完成 AI 图片生成、提示词推理、流程图和素材整理，让灵感持续沉淀为可展示、可复用、可自部署的作品工作流。
|
||
</p>
|
||
<ul class="proof" aria-label="TrueGrowth 核心能力">
|
||
<li class="proof-item">
|
||
<span class="proof-value">专属画布</span>
|
||
<span class="proof-label">在线使用，也可私有化改造</span>
|
||
</li>
|
||
<li class="proof-item">
|
||
<span class="proof-value">AI 工作流</span>
|
||
<span class="proof-label">连接图片、提示词和多模态任务</span>
|
||
</li>
|
||
<li class="proof-item">
|
||
<span class="proof-value">结构沉淀</span>
|
||
<span class="proof-label">把流程图、脑图和素材留在一处</span>
|
||
</li>
|
||
</ul>
|
||
<div class="cta-row">
|
||
<a
|
||
class="btn btn-primary"
|
||
href="/"
|
||
data-seo-track="home_cta_click"
|
||
data-seo-target="open_workspace"
|
||
data-seo-position="hero"
|
||
>立即进入画布</a
|
||
>
|
||
<a
|
||
class="btn btn-secondary"
|
||
href="/user-manual/index.html"
|
||
data-seo-track="home_cta_click"
|
||
data-seo-target="manual"
|
||
data-seo-position="hero"
|
||
>查看使用指南</a
|
||
>
|
||
</div>
|
||
</div>
|
||
<aside class="hero-panel">
|
||
<div class="hero-panel-caption">
|
||
<strong>作品在画布中自然生长</strong>
|
||
<span>生成结果、参考素材和创作说明集中保留。</span>
|
||
</div>
|
||
<img
|
||
src="/product_showcase/九宫格拆图.gif"
|
||
alt="TrueGrowth 图片拆分与 AI 创作画布动态演示"
|
||
/>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="section" id="models">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>把热门模型能力变成连续创作流程</h2>
|
||
<p class="section-lead">
|
||
图片模型负责产出视觉结果，推理模型负责梳理创意与结构。TrueGrowth
|
||
让这两类能力在同一块画布中衔接：先想清楚，再生成，再筛选，再整理成可展示的作品。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="model-grid">
|
||
<article
|
||
class="model-panel"
|
||
data-seo-track="home_model_card_click"
|
||
data-seo-target="gpt-image-2"
|
||
>
|
||
<span class="tag">图像创作</span>
|
||
<strong>GPT-Image-2</strong>
|
||
<p class="model-note">
|
||
适合海报、封面、角色设定、产品图、社媒配图和灵感草图。生成结果会直接进入画布，方便你对比风格、筛选版本、补充说明并继续迭代。
|
||
</p>
|
||
</article>
|
||
<article
|
||
class="model-panel"
|
||
data-seo-track="home_model_card_click"
|
||
data-seo-target="deepseek-v4"
|
||
>
|
||
<span class="tag">文本推理</span>
|
||
<strong>DeepSeek-v4</strong>
|
||
<p class="model-note">
|
||
适合提示词扩写、文案草稿、需求拆解、故事板、流程说明和知识整理。先把想法变清晰，再用画布承接图片、结构和素材。
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>TrueGrowth 帮你解决三个创作断点</h2>
|
||
<p class="section-lead">
|
||
AI
|
||
生成最常见的问题不是不会生成，而是结果散落、上下文丢失、作品难以复用。TrueGrowth
|
||
把生成、整理和展示连成一条线。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-grid">
|
||
<article class="card">
|
||
<span class="icon">🎨</span>
|
||
<h3>生成结果不再散落</h3>
|
||
<p>
|
||
把提示词、参考图、候选结果和最终版本放在同一画布，随时回看创作路径。
|
||
</p>
|
||
</article>
|
||
<article class="card">
|
||
<span class="icon">🧠</span>
|
||
<h3>想法自动变成结构</h3>
|
||
<p>
|
||
把创意方向、脚本、分镜和流程说明沉淀为思维导图或流程图，团队沟通更轻松。
|
||
</p>
|
||
</article>
|
||
<article class="card">
|
||
<span class="icon">📦</span>
|
||
<h3>素材资产可复用</h3>
|
||
<p>
|
||
生成图、参考图、截图和项目说明集中管理，下次做封面、教程、社媒内容更快。
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="works">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>你可以用 TrueGrowth 做出这些作品</h2>
|
||
<p class="section-lead">
|
||
从图片创作到项目规划，TrueGrowth
|
||
让过程和结果同时保留。每一张图、每一条说明、每一次修改，都能成为下一次创作的素材。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="work-grid">
|
||
<article
|
||
class="work-card"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="image_split"
|
||
>
|
||
<img
|
||
src="/product_showcase/九宫格拆图.gif"
|
||
alt="TrueGrowth 用户作品案例：AI 图片拆分与素材整理"
|
||
loading="lazy"
|
||
/>
|
||
<div class="work-body">
|
||
<h3>AI 图片创作板</h3>
|
||
<p>
|
||
批量生成多张候选图，按主题、风格、用途筛选，快速确定可交付版本。
|
||
</p>
|
||
<a
|
||
class="text-link"
|
||
href="/user-manual/ai-generation-image-generation.html"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="image_generation_manual"
|
||
>查看 AI 生成图片教程</a
|
||
>
|
||
</div>
|
||
</article>
|
||
<article
|
||
class="work-card"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="flowchart"
|
||
>
|
||
<img
|
||
src="/product_showcase/流程图.gif"
|
||
alt="TrueGrowth 流程图和项目规划动态演示"
|
||
loading="lazy"
|
||
/>
|
||
<div class="work-body">
|
||
<h3>流程与项目规划</h3>
|
||
<p>把步骤、需求、决策链转换成流程图，让复杂项目一眼看懂。</p>
|
||
<a
|
||
class="text-link"
|
||
href="/user-manual/drawing-flowchart.html"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="flowchart_manual"
|
||
>查看流程图教程</a
|
||
>
|
||
</div>
|
||
</article>
|
||
<article
|
||
class="work-card"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="mindmap"
|
||
>
|
||
<img
|
||
src="/product_showcase/思维导图.gif"
|
||
alt="TrueGrowth 思维导图与知识整理动态演示"
|
||
loading="lazy"
|
||
/>
|
||
<div class="work-body">
|
||
<h3>灵感与知识整理</h3>
|
||
<p>
|
||
把提示词、参考资料、模型输出和最终作品放在一处，形成自己的创作知识库。
|
||
</p>
|
||
<a
|
||
class="text-link"
|
||
href="/user-manual/drawing-mindmap.html"
|
||
data-seo-track="home_work_card_click"
|
||
data-seo-target="mindmap_manual"
|
||
>查看思维导图教程</a
|
||
>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="workflow">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>三步开始你的 TrueGrowth 工作流</h2>
|
||
<p class="section-lead">
|
||
不用先搭复杂流程。打开画布、输入想法、整理结果，就能开始一次完整创作。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<ol class="steps">
|
||
<li>
|
||
<div>
|
||
<h3>选择模型和任务</h3>
|
||
<p class="model-note">
|
||
根据任务选择图片、文本或视频模型，也可以接入你的 OpenAI
|
||
兼容模型供应商。
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<h3>在画布中生成和比较</h3>
|
||
<p class="model-note">
|
||
把生成结果、参考图、文本说明和流程草图放在同一空间，快速比较版本并继续完善。
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<h3>整理为可展示作品</h3>
|
||
<p class="model-note">
|
||
将最终图、提示词、设计说明和流程图一起保存，形成可复用、可分享、可继续迭代的项目画布。
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="section" id="faq">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>常见问题</h2>
|
||
<p class="section-lead">
|
||
如果你正在寻找一个能承接 AI
|
||
生成结果的创作工作台，这里是几个常见问题。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<ul class="faq">
|
||
<li>
|
||
<h3>TrueGrowth 和普通 AI 聊天工具有什么区别？</h3>
|
||
<p>
|
||
普通聊天工具更适合问答，TrueGrowth
|
||
更适合创作执行：生成内容后，还能继续整理、排版、比较、沉淀和展示。
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<h3>TrueGrowth 适合做哪些 AI 图片任务？</h3>
|
||
<p>
|
||
适合封面图、角色设定、产品图、海报、社媒配图、灵感草图和多版本视觉探索。你可以把所有候选图放在一块画布上比较。
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<h3>DeepSeek-v4 在 TrueGrowth 里适合做什么？</h3>
|
||
<p>
|
||
适合做提示词扩写、分镜脚本、需求拆解、流程规划和文案草稿，再配合画布形成结构化成果。
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<h3>TrueGrowth 支持私有化改造吗？</h3>
|
||
<p>
|
||
支持。TrueGrowth 可以作为专属 AI 画布工作台使用，也适合根据业务流程继续做品牌、模型和工具链扩展。
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="section cta-band">
|
||
<div>
|
||
<h2>打开 TrueGrowth，开始你的下一次 AI 创作</h2>
|
||
<p>
|
||
从一张图、一个流程、一个创意板开始。TrueGrowth
|
||
会帮你把模型输出、参考资料和作品结果留在同一块画布。
|
||
</p>
|
||
</div>
|
||
<div class="cta-actions">
|
||
<a
|
||
class="btn btn-secondary"
|
||
href="/"
|
||
data-seo-track="home_cta_click"
|
||
data-seo-target="open_workspace"
|
||
data-seo-position="bottom"
|
||
>进入工作台</a
|
||
>
|
||
<a
|
||
class="btn btn-secondary"
|
||
href="/user-manual/index.html"
|
||
data-seo-track="home_cta_click"
|
||
data-seo-target="manual"
|
||
data-seo-position="bottom"
|
||
>查看使用指南</a
|
||
>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<script>
|
||
(function () {
|
||
var pageName = 'opentu_home_seo';
|
||
var posthogKey = 'phc_13URtidKwTR9POlwnB153NsN99shRykvPguKWf3vZVn';
|
||
var posthogHost = 'https://us.i.posthog.com';
|
||
var isLocalDev =
|
||
window.location.hostname === 'localhost' ||
|
||
window.location.hostname === '127.0.0.1';
|
||
var forceReport =
|
||
new URLSearchParams(window.location.search).get('report') === '1';
|
||
var shouldReportAnalytics = !isLocalDev || forceReport;
|
||
|
||
function getSearchEngine() {
|
||
var referrer = document.referrer || '';
|
||
if (!referrer) return '';
|
||
try {
|
||
var host = new URL(referrer).hostname.toLowerCase();
|
||
if (host.indexOf('google.') !== -1) return 'google';
|
||
if (host.indexOf('bing.') !== -1) return 'bing';
|
||
if (host.indexOf('baidu.') !== -1) return 'baidu';
|
||
if (host.indexOf('duckduckgo.') !== -1) return 'duckduckgo';
|
||
if (host.indexOf('yahoo.') !== -1) return 'yahoo';
|
||
if (host.indexOf('yandex.') !== -1) return 'yandex';
|
||
return host;
|
||
} catch (error) {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
function sanitizeValue(value) {
|
||
return String(value || '').slice(0, 120);
|
||
}
|
||
|
||
function getCommonProperties() {
|
||
var params = new URLSearchParams(window.location.search);
|
||
return {
|
||
page_name: pageName,
|
||
page_path: window.location.pathname,
|
||
page_title: document.title,
|
||
landing_page: '/home.html',
|
||
referrer_host: (function () {
|
||
try {
|
||
return document.referrer
|
||
? new URL(document.referrer).hostname
|
||
: '';
|
||
} catch (error) {
|
||
return '';
|
||
}
|
||
})(),
|
||
search_engine: getSearchEngine(),
|
||
utm_source: sanitizeValue(params.get('utm_source')),
|
||
utm_medium: sanitizeValue(params.get('utm_medium')),
|
||
utm_campaign: sanitizeValue(params.get('utm_campaign')),
|
||
primary_image_model: 'gpt-image-2',
|
||
primary_reasoning_model: 'deepseek-v4',
|
||
content_variant: 'home-2026-04-28',
|
||
};
|
||
}
|
||
|
||
function track(eventName, properties) {
|
||
if (!shouldReportAnalytics) return;
|
||
if (!window.posthog || !window.posthog.capture) return;
|
||
try {
|
||
window.posthog.capture(
|
||
eventName,
|
||
Object.assign(getCommonProperties(), properties || {})
|
||
);
|
||
} catch (error) {
|
||
void error;
|
||
}
|
||
}
|
||
|
||
function initAnalytics() {
|
||
if (!shouldReportAnalytics) {
|
||
return;
|
||
}
|
||
|
||
!(function (t, e) {
|
||
var o, n, p, r;
|
||
e.__SV ||
|
||
(window.posthog && window.posthog.__loaded) ||
|
||
((window.posthog = e),
|
||
(e._i = []),
|
||
(e.init = function (i, s, a) {
|
||
function g(t, e) {
|
||
var o = e.split('.');
|
||
2 == o.length && ((t = t[o[0]]), (e = o[1])),
|
||
(t[e] = function () {
|
||
t.push(
|
||
[e].concat(Array.prototype.slice.call(arguments, 0))
|
||
);
|
||
});
|
||
}
|
||
((p = t.createElement('script')).type = 'text/javascript'),
|
||
(p.crossOrigin = 'anonymous'),
|
||
(p.async = !0),
|
||
(p.src =
|
||
s.api_host.replace(
|
||
'.i.posthog.com',
|
||
'-assets.i.posthog.com'
|
||
) + '/static/array.js'),
|
||
(r =
|
||
t.getElementsByTagName(
|
||
'script'
|
||
)[0]).parentNode.insertBefore(p, r);
|
||
var u = e;
|
||
for (
|
||
void 0 !== a ? (u = e[a] = []) : (a = 'posthog'),
|
||
u.people = u.people || [],
|
||
u.toString = function (t) {
|
||
var e = 'posthog';
|
||
return (
|
||
'posthog' !== a && (e += '.' + a),
|
||
t || (e += ' (stub)'),
|
||
e
|
||
);
|
||
},
|
||
u.people.toString = function () {
|
||
return u.toString(1) + '.people (stub)';
|
||
},
|
||
o =
|
||
'init capture register register_once unregister identify reset get_distinct_id get_session_id opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing'.split(
|
||
' '
|
||
),
|
||
n = 0;
|
||
n < o.length;
|
||
n++
|
||
)
|
||
g(u, o[n]);
|
||
e._i.push([i, s, a]);
|
||
}),
|
||
(e.__SV = 1));
|
||
})(document, window.posthog || []);
|
||
|
||
window.posthog.init(posthogKey, {
|
||
api_host: posthogHost,
|
||
defaults: '2025-11-30',
|
||
person_profiles: 'identified_only',
|
||
disable_session_recording: true,
|
||
autocapture: false,
|
||
capture_pageview: false,
|
||
rate_limiting: { events_per_second: 5, events_burst_limit: 15 },
|
||
request_queue: { flush_interval_ms: 2000 },
|
||
});
|
||
|
||
clearHomeSuperProperties();
|
||
}
|
||
|
||
function clearHomeSuperProperties() {
|
||
if (!window.posthog || !window.posthog.unregister) return;
|
||
|
||
[
|
||
'page_name',
|
||
'page_path',
|
||
'page_title',
|
||
'landing_page',
|
||
'referrer_host',
|
||
'search_engine',
|
||
'utm_source',
|
||
'utm_medium',
|
||
'utm_campaign',
|
||
'primary_image_model',
|
||
'primary_reasoning_model',
|
||
'content_variant',
|
||
].forEach(function (key) {
|
||
try {
|
||
window.posthog.unregister(key);
|
||
} catch (error) {
|
||
void error;
|
||
}
|
||
});
|
||
}
|
||
|
||
function scheduleWhenIdle(callback, timeout) {
|
||
if ('requestIdleCallback' in window) {
|
||
window.requestIdleCallback(callback, { timeout: timeout || 4000 });
|
||
return;
|
||
}
|
||
window.setTimeout(callback, Math.min(timeout || 4000, 1200));
|
||
}
|
||
|
||
var homeWorkspacePrefetchRequested = false;
|
||
var homeWorkspacePrefetchGroups = [
|
||
'tool-windows',
|
||
'runtime-static-assets',
|
||
];
|
||
var homeWorkspacePrefetchMaxAttempts = 4;
|
||
var homeWorkspacePrefetchRetryDelayMs = 1000;
|
||
|
||
function canPrefetchWorkspaceStaticAssets() {
|
||
var connection =
|
||
navigator.connection ||
|
||
navigator.mozConnection ||
|
||
navigator.webkitConnection;
|
||
|
||
if (!connection) {
|
||
return true;
|
||
}
|
||
|
||
if (connection.saveData) return false;
|
||
|
||
return (
|
||
connection.effectiveType !== 'slow-2g' &&
|
||
connection.effectiveType !== '2g'
|
||
);
|
||
}
|
||
|
||
function postWorkspaceStaticPrefetch(registration, attempt, startedAt) {
|
||
if (homeWorkspacePrefetchRequested) {
|
||
return;
|
||
}
|
||
|
||
var controller = navigator.serviceWorker.controller;
|
||
var worker = controller || (registration && registration.active);
|
||
|
||
if (worker) {
|
||
try {
|
||
worker.postMessage({
|
||
type: 'SW_PREFETCH_GROUPS',
|
||
groups: homeWorkspacePrefetchGroups,
|
||
});
|
||
homeWorkspacePrefetchRequested = true;
|
||
track('home_sw_workspace_prefetch_requested', {
|
||
groups: homeWorkspacePrefetchGroups.join(','),
|
||
attempt: attempt,
|
||
via: controller ? 'controller' : 'registration_active',
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
} catch (error) {
|
||
track('home_sw_workspace_prefetch_failed', {
|
||
groups: homeWorkspacePrefetchGroups.join(','),
|
||
attempt: attempt,
|
||
error: sanitizeValue(error && error.message),
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (attempt >= homeWorkspacePrefetchMaxAttempts) {
|
||
homeWorkspacePrefetchRequested = true;
|
||
track('home_sw_workspace_prefetch_failed', {
|
||
groups: homeWorkspacePrefetchGroups.join(','),
|
||
reason: 'no_active_worker',
|
||
attempt: attempt,
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
return;
|
||
}
|
||
|
||
window.setTimeout(function () {
|
||
postWorkspaceStaticPrefetch(registration, attempt + 1, startedAt);
|
||
}, homeWorkspacePrefetchRetryDelayMs);
|
||
}
|
||
|
||
function scheduleWorkspaceStaticPrefetch(registration, startedAt) {
|
||
if (homeWorkspacePrefetchRequested) {
|
||
return;
|
||
}
|
||
|
||
if (!canPrefetchWorkspaceStaticAssets()) {
|
||
homeWorkspacePrefetchRequested = true;
|
||
track('home_sw_workspace_prefetch_skipped', {
|
||
reason: 'constrained_connection',
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
return;
|
||
}
|
||
|
||
scheduleWhenIdle(function () {
|
||
postWorkspaceStaticPrefetch(registration, 1, startedAt);
|
||
}, 1800);
|
||
}
|
||
|
||
function registerHomeServiceWorker() {
|
||
if (!('serviceWorker' in navigator)) {
|
||
return;
|
||
}
|
||
|
||
scheduleWhenIdle(function () {
|
||
var startedAt = Date.now();
|
||
navigator.serviceWorker
|
||
.register('/sw.js')
|
||
.then(function (registration) {
|
||
track('home_sw_register_success', {
|
||
sw_scope: registration.scope,
|
||
has_controller: !!navigator.serviceWorker.controller,
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
return navigator.serviceWorker.ready;
|
||
})
|
||
.then(function (registration) {
|
||
track('home_sw_ready', {
|
||
has_controller: !!navigator.serviceWorker.controller,
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
scheduleWorkspaceStaticPrefetch(registration, startedAt);
|
||
})
|
||
.catch(function (error) {
|
||
track('home_sw_register_failed', {
|
||
error: sanitizeValue(error && error.message),
|
||
duration_ms: Date.now() - startedAt,
|
||
});
|
||
});
|
||
}, 4500);
|
||
}
|
||
|
||
initAnalytics();
|
||
registerHomeServiceWorker();
|
||
track('home_seo_pageview', {
|
||
viewport_width: window.innerWidth,
|
||
viewport_height: window.innerHeight,
|
||
});
|
||
|
||
document.addEventListener(
|
||
'click',
|
||
function (event) {
|
||
var target =
|
||
event.target && event.target.closest('[data-seo-track]');
|
||
if (!target) return;
|
||
track(target.getAttribute('data-seo-track'), {
|
||
target: sanitizeValue(target.getAttribute('data-seo-target')),
|
||
position: sanitizeValue(target.getAttribute('data-seo-position')),
|
||
text: sanitizeValue(target.textContent),
|
||
href: sanitizeValue(target.getAttribute('href')),
|
||
});
|
||
},
|
||
true
|
||
);
|
||
|
||
var reportedDepths = {};
|
||
function reportScrollDepth() {
|
||
var doc = document.documentElement;
|
||
var scrollTop = window.scrollY || doc.scrollTop || 0;
|
||
var scrollable = Math.max(1, doc.scrollHeight - window.innerHeight);
|
||
var depth = Math.min(100, Math.round((scrollTop / scrollable) * 100));
|
||
[25, 50, 75, 90].forEach(function (threshold) {
|
||
if (depth >= threshold && !reportedDepths[threshold]) {
|
||
reportedDepths[threshold] = true;
|
||
track('home_seo_scroll_depth', { depth_percent: threshold });
|
||
}
|
||
});
|
||
}
|
||
|
||
var scrollTimer = 0;
|
||
window.addEventListener(
|
||
'scroll',
|
||
function () {
|
||
if (scrollTimer) return;
|
||
scrollTimer = window.setTimeout(function () {
|
||
scrollTimer = 0;
|
||
reportScrollDepth();
|
||
}, 250);
|
||
},
|
||
{ passive: true }
|
||
);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|