docs/assets/mao-intro-poster.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 1080px;
height: 1280px;
overflow: hidden;
background: #F5F2EA;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
color: #1C1C1E;
-webkit-font-smoothing: antialiased;
}
.page {
width: 1080px;
height: 1280px;
padding: 48px 64px 36px;
display: flex;
flex-direction: column;
position: relative;
gap: 0;
}
.feather {
position: absolute;
top: 36px;
right: 52px;
width: 72px;
height: auto;
opacity: 0.95;
}
/* Header */
.brand-row { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.brand-icon {
width: 56px; height: 56px; border-radius: 14px;
background: linear-gradient(145deg, #2C2C2E, #1C1C1E);
display: flex; align-items: center; justify-content: center;
}
.brand-icon img { width: 36px; height: 36px; }
.brand-name {
font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: #1C1C1E;
}
.tagline {
font-size: 22px; font-weight: 500; color: #1C1C1E; margin: 18px 0 8px;
line-height: 1.35;
}
.sub {
font-size: 16px; color: #6B6560; line-height: 1.55; max-width: 820px;
}
/* Section labels */
.sec {
display: flex; align-items: center; gap: 10px;
margin: 22px 0 12px;
}
.sec-dot {
width: 8px; height: 8px; border-radius: 50%; background: #F5A524;
}
.sec-title {
font-size: 14px; font-weight: 600; color: #8A8070; letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Boundary strip */
.boundary {
background: #FFFFFF;
border: 1px solid #E4DCC8;
border-radius: 16px;
padding: 22px 28px;
display: flex;
align-items: center;
gap: 20px;
}
.boundary .vs {
display: flex; flex-direction: column; gap: 8px; flex: 1.15;
}
.not, .is {
font-size: 17px; line-height: 1.45;
}
.not { color: #8A8070; }
.not b, .is b { font-weight: 600; }
.is { color: #1C1C1E; }
.is b { color: #C47A0A; }
.divider {
width: 1px; height: 64px; background: #E4DCC8;
}
.boundary .is-box {
flex: 1.4;
background: #FBF6E8;
border: 1px solid #F0D9A0;
border-radius: 12px;
padding: 16px 20px;
font-size: 17px;
line-height: 1.5;
color: #1C1C1E;
font-weight: 500;
}
/* Three pillars */
.pillars {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.pillar {
background: #FFFFFF;
border: 1px solid #E4DCC8;
border-radius: 16px;
padding: 20px 20px 18px;
min-height: 150px;
display: flex;
flex-direction: column;
}
.pillar.hot {
background: linear-gradient(165deg, #FFF9EC 0%, #FFFFFF 70%);
border-color: #E8C878;
}
.pillar-num {
width: 28px; height: 28px; border-radius: 8px;
background: #F5A524; color: #1C1C1E;
font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.pillar h3 {
font-size: 20px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em;
}
.pillar p {
font-size: 14.5px; color: #6B6560; line-height: 1.55;
}
/* Flow */
.flow {
display: flex;
align-items: stretch;
gap: 0;
}
.flow-step {
flex: 1;
background: #FFFFFF;
border: 1px solid #E4DCC8;
padding: 18px 12px;
text-align: center;
position: relative;
}
.flow-step:first-child { border-radius: 14px 0 0 14px; }
.flow-step:last-child { border-radius: 0 14px 14px 0; }
.flow-step + .flow-step { border-left: none; }
.flow-step .n {
font-size: 11px; color: #C47A0A; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 6px;
}
.flow-step .t {
font-size: 15.5px; font-weight: 600; color: #1C1C1E; line-height: 1.35;
}
.flow-arrow {
position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; z-index: 2;
background: #F5F2EA;
display: flex; align-items: center; justify-content: center;
}
.flow-arrow::after {
content: "";
width: 8px; height: 8px;
border-right: 2.5px solid #F5A524;
border-top: 2.5px solid #F5A524;
transform: rotate(45deg) translate(-1px, 1px);
}
.flow-step:last-child .flow-arrow { display: none; }
/* Surfaces */
.surfaces {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.chip {
background: #FFFFFF;
border: 1px solid #E4DCC8;
border-radius: 999px;
padding: 10px 18px;
font-size: 15px;
font-weight: 500;
color: #1C1C1E;
}
.chip .k {
color: #C47A0A; font-weight: 600; margin-right: 6px;
}
/* Fit */
.fit-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 16px;
}
.fit-yes {
background: #FFFFFF;
border: 1px solid #E4DCC8;
border-left: 4px solid #F5A524;
border-radius: 14px;
padding: 22px 24px;
}
.fit-no {
background: #EFEAE0;
border-radius: 14px;
padding: 22px 24px;
}
.fit-yes .lbl, .fit-no .lbl {
font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 10px;
}
.fit-yes .lbl { color: #C47A0A; }
.fit-no .lbl { color: #8A8070; }
.fit-yes p, .fit-no p {
font-size: 15px; line-height: 1.55; color: #1C1C1E;
}
.fit-no p { color: #5C564E; }
/* Footer */
.footer {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid #E4DCC8;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .meta {
font-size: 13.5px; color: #8A8070; letter-spacing: 0.02em;
}
.footer .badge {
background: #1C1C1E; color: #F5F2EA;
font-size: 12.5px; font-weight: 600;
padding: 8px 14px; border-radius: 999px;
letter-spacing: 0.04em;
}
</style>
</head>
<body>
<div class="page">
<img class="feather" src="file:///Users/yangjiayi/AiProjects/mao/docs/assets/logo-design/mao-feather-transparent.png" alt="" />
<div class="brand-row">
<div class="brand-icon">
<img src="file:///Users/yangjiayi/AiProjects/mao/docs/assets/logo-design/mao-feather-transparent.png" alt="" />
</div>
<div class="brand-name">Mao</div>
</div>
<div class="tagline">可私有化部署的 AI Agent 工作台</div>
<div class="sub">把能做事的 Agent 放进你自己的环境：双执行边界、RBAC 与审计，以及真正的 Think-Act-Observe 引擎。</div>
<div class="sec"><div class="sec-dot"></div><div class="sec-title">它是什么</div></div>
<div class="boundary">
<div class="vs">
<div class="not"><b>不是</b> ChatGPT 套壳 · <b>不是</b> 低代码画布</div>
<div class="is"><b>是</b> 集中管理 Agent / 模型 / 权限，让模型真正去读文件、跑命令、搜网页、拆子任务的工作台</div>
</div>
<div class="divider"></div>
<div class="is-box">数据与密钥留在你这边<br/>自托管 · 工作区 / 会话 / 模型 Key 不出内网</div>
</div>
<div class="sec"><div class="sec-dot"></div><div class="sec-title">三大内核</div></div>
<div class="pillars">
<div class="pillar">
<div class="pillar-num">01</div>
<h3>数据不出域</h3>
<p>自托管部署，工作区、会话与模型 API Key 均留在你的环境；任意 OpenAI 兼容模型可接入。</p>
</div>
<div class="pillar hot">
<div class="pillar-num">02</div>
<h3>CLOUD / LOCAL</h3>
<p>云端在服务器工作区干活；本地经 Electron 或 mao-agent 改你电脑上的目录，支持权限档位与工具审批。</p>
</div>
<div class="pillar">
<div class="pillar-num">03</div>
<h3>Agent 一等公民</h3>
<p>多 Agent、Skill、MCP、提示词版本、用量与审计。对话只是入口，治理才是平台。</p>
</div>
</div>
<div class="sec"><div class="sec-dot"></div><div class="sec-title">怎么用</div></div>
<div class="flow">
<div class="flow-step"><div class="n">STEP 1</div><div class="t">配置模型</div><div class="flow-arrow"></div></div>
<div class="flow-step"><div class="n">STEP 2</div><div class="t">创建 Agent</div><div class="flow-arrow"></div></div>
<div class="flow-step"><div class="n">STEP 3</div><div class="t">选边界 · 工作区</div><div class="flow-arrow"></div></div>
<div class="flow-step"><div class="n">STEP 4</div><div class="t">描述目标 · Agent 调工具做事</div><div class="flow-arrow"></div></div>
</div>
<div class="sec"><div class="sec-dot"></div><div class="sec-title">多端与通道</div></div>
<div class="surfaces">
<div class="chip"><span class="k">管理</span>管理后台</div>
<div class="chip"><span class="k">桌面</span>Web / Electron</div>
<div class="chip"><span class="k">移动</span>安卓 APP</div>
<div class="chip"><span class="k">终端</span>mao-agent</div>
<div class="chip"><span class="k">协作</span>飞书 · 钉钉 · 微信</div>
<div class="chip"><span class="k">嵌入</span>Embed SDK</div>
</div>
<div class="sec"><div class="sec-dot"></div><div class="sec-title">适合谁</div></div>
<div class="fit-grid">
<div class="fit-yes">
<div class="lbl">适合</div>
<p>需要私有化部署、自选模型、服务端与本地工具边界可切换的个人与团队；希望 Agent 真正动手改文件、跑命令，而不只是聊天。</p>
</div>
<div class="fit-no">
<div class="lbl">不适合</div>
<p>想要开箱 SaaS、低代码画布，或必须英文界面的场景——更适合 Dify、n8n。</p>
</div>
</div>
<div class="footer">
<div class="meta">Self-hosted · MIT License · Think-Act-Observe Harness</div>
<div class="badge">数据不出域 · 边界可切换 · 治理可审计</div>
</div>
</div>
</body>
</html>