🐬 INSPIRED BY ESTHER'S IP DESIGN SYSTEM · CC BY-NC-SA 4.0 基于 ESTHER 不二 IP 设计系统 · CC BY-NC-SA 4.0 深度定制

UChat × Echo Design System UChat × Echo 视觉系统

Say goodbye to cookie-cutter dark tech templates! Built around UChat's official blue dolphin mascot Echo, this modular presentation kit blends tactile warmth, magazine editorial craft, and hard-hitting proof for video slides, Framer blogs, and social carousels. 告别千篇一律的暗黑科技风!依托 UChat 官方蓝色小海豚吉祥物 Echo(艾可),建立一套结合手绘温度、杂志排版与硬核证据的视频与视觉呈现规范。

Launch Studio Hub → 进入发布工作台 →
SECTION 01

Brand DNA & Official Logo Architecture 品牌 DNA 与官方标志矩阵

"Restrained color discipline, pairing high-contrast serif titles with handwritten warmth." "色彩克制,中英文混搭产生呼吸感"

UChat BlueUChat 标志蓝
#0084FF

Primary 60% · Core Identity & CTA主色 60% · 品牌与主CTA

Sunny Gold暖阳金黄
#F4D758

Accent 30% · Highlighters & Badges强调 30% · 荧光笔高亮/徽标

Growth Mint增长薄荷绿
#18C48F

Achievement · Ticks & Positive ROI成就点缀 · 对勾/ROI涨幅

Coral Alert警示珊瑚红
#E84A5F

Alert 10% · Competitor Traps & Bans点缀 10% · 竞品红叉/封号注意

Warm Paper Cream暖奶背景纸
#FEFCF6

Non-Pure White · Tactile Editorial Warmth非纯白 · 杂志纸张温暖感

Deep Writing Ink深墨书写色
#1A1A2E

Non-Pure Black · High-Contrast Comfort非纯黑 · 绝不刺眼的高级对比

Official 4-Format Transparent Logo Suite 官方 4 款透明矢量 Logo 规范

UChat Horizontal
Horizontal Badge Lockup 横版组合徽标 (Horizontal Badge)

300 × 115 • Video endcards, website navbar, co-branding banners 300 × 115 • 视频片尾、网站导航、品牌联合

UChat Square Icon
Square App Icon 正方形圆角 App Icon

1024 × 1024 • YouTube avatar, app switcher icon, software integrations 1024 × 1024 • YouTube 头像、应用图标

UChat Stacked
Stacked Brand Mark 上下堆叠完整标 (Stacked Mark)

1024 × 1024 • 9:16 Shorts/Reels cover cards, keynote title slides 1024 × 1024 • 竖版 Shorts/Reels 封面、演讲封面

UChat Micro Favicon
Micro Mark / Favicon 极简微型 Favicon

60 × 50 • Browser tab icon, micro-indicator status crumbs in tables 60 × 50 • 浏览器标签页、表格行内微标签

SECTION 02

Echo the AI Guide · Mascot Asset Gallery Echo 艾可 · 蓝色小海豚吉祥物工坊

"Polaroid frames with angled washi tape make Echo feel alive!" "拍立得相框 + 黄色和纸胶带,让小海豚活起来"

Echo Guide
"Hey there! I'm Echo, your omnichannel guide." "嗨!我是你的全渠道 AI 向导"
Hero Guide • Video hook cards & tutorial welcome splash Hero Guide • 用于开场 Hook 视频与欢迎页
Echo Map
"Connect WhatsApp, Messenger & IG on one canvas." "WhatsApp + FB + IG 一网打尽"
Flow Architect • Visual topology diagrams & node walk-throughs Flow Architect • 用于流程拓扑与节点连线讲解
Echo White Label
"Your custom domain. Your brand. 100% white-label." "自己的域名,自己的 Agency 白标"
White Label Shield • ManyChat teardowns & agency client tiers White Label Shield • 用于对标 ManyChat 与商业授权
Echo Support
"24/7 concurrent replies without dropping a lead." "7×24小时全并发,无漏单"
Live Support • Comment-to-DM automation & human handoff demos Live Support • 用于演示自动回复与人机协作
Echo Business
"Zero contact-tax penalties. Save thousands every month." "不收任何联系人阶梯税,省下几千刀"
ROI Calculator • Cost comparison slides & agency economics ROI Calculator • 用于视频 ROI 算账与对比卡
Echo Model Sheet
"Multi-angle isometric reference for 3D animation." "全角度三维设定,保持动画一致性"
Model Sheet • Rigging, proportions & production consistency Model Sheet • 角色工业化制作规范
SECTION 03

Kinetic Typography & Attention Grabbers 文字动效与视觉表现 (Text & Kinetic)

Proven attention-hook components for the first 5 seconds of video slides 视频前 5 秒抓人眼球的特效神器

#47 Typing Animation (Hook Slide Headline) Typing Animation 打字机首屏
Video Hook视频Hook Hero Splash首屏大标题
#50 Text Highlighter (Marker Pen / Wave / Box / Circle) Text Highlighter 手绘标注(荧光笔/圈选/波浪线)
Video Takeaways视频划重点 Blog Key Points博客金句

In 2026, putting links directly in post captions slashes reach by 70%. The winning playbook is triggering public comments and delivering private DMs. Stop letting ManyChat tax your contact growth—scale on UChat's flat white-label engine. 在 2026 年做社媒营销,评论区直接贴外链会被算法降权 70%。真正高效的做法是触发公评后立即私信握手。记住:不要被 ManyChat 收联系人税,用 UChat 跑通白标自动化流。

#48 Kinetic Text (Dynamic Variable Font-Weight on Hover) Kinetic Text 动态字重(鼠标悬停试探)
Interactive Hero互动体验 Brand SloganSlogan

← Hover your cursor across the characters to feel the elastic weight expansion → ← 移动鼠标划过每个字母体验呼吸弹性感 →

#51 & #52 Comic Pop Burst & Circular Spinning Seal 漫画爆炸字 (Comic Text) 与 环形旋转徽标 (Spinning Text)
High-Value Data数据冲击 Official Seal印章效果
$28.40 CPC!

Astronomical advertiser keyword CPC proving commercial intent 商业高价值关键词,直接拉满转化意图

🐬

Echo Official Verification Stamp Echo 官方质检徽章

SECTION 04

Magazine-Cut Editorial Cards & System Flows 杂志裁切风卡片与数字卡片

Inherited from Esther's high-craft layout library, eliminating cookie-cutter tech grids 从 esther-design-system 继承的极高审美卡片库,杜绝千篇一律的小白块

#1A Magazine-Cut Headline Cards (Hero Value Pillars) 杂志裁切风大标题卡片
Slide Keynotes视频幻灯片封面 Core Value Pillars核心价值

Single-Node Dual Action 单节点双向联动

No juggling disparate tools. One single visual node deploys randomized public anti-spam replies and delivers dedicated private Messenger DMs simultaneously. 无需在不同工具间跳跃,一条工作流同时接管公开评论随机防封回复与 Messenger 独占握手私信。

ONE WORKFLOW • TWO ACTIONS

Zero Per-Contact Penalty 零联系人惩罚税

Even if a viral Reel explodes with 20,000 comments over a weekend, UChat never forces you into expensive subscriber tax tiers. Built for agency scaling. 即使单条帖子爆了 20,000 条留言,UChat 也绝不加收一分钱联系人费用,真正适合 Agency 扩量。

NO CONTACT TAX • SCALE FREELY
#1B Number-Led Step Cards (Giant Subtle Numerals) 编号主导卡片(超大淡色数字)
Step-by-Step UI分步讲解 Video Flow Cues视频步骤
01

Comment Listener评论触发

Listen to specific posts or reels, matching TEMPLATE, DEMO, or custom keywords.监听特定帖子留言,匹配 TEMPLATE 或任意关键词

02

Spintax Rotation公评轮换

5 distinct natural text variants rotated dynamically to evade Meta automated spam flags.内置 5 组 Spintax 自然变体,告别 Meta 垃圾信息拦截

03

Handshake DM私信握手

Instant 1-click button card unlocking the compliant 24-hour conversational window.一键推送免下载卡片,用户点击即解锁 24 小时完整窗口

#11 System Flow Pipeline (Linear Architecture Bar) 系统流程条(System Flow)
Flow Logic技术逻辑 Video Mid-Roll Cue视频中插进度
User Comment用户留言 → Spintax Public ReplySpintax 公评 → Private Handshake DM私信 Handshake → 24h Window Unlocked点击激活 24h → Tag & Sync to CRM打标导入 CRM
#42 Circular Lifecycle Process (5-Stage Loop) 圆形步骤(Circular Step Process)
Methodology闭环方法论 Keynote Slide课件幻灯片
💡

Spot Pain Point选定痛点

Find ICP
📐

Design Flow设计节点

Visual Builder
⚙️

AI GateAI门控

Sentiment Filter
🚀

Deploy Live一键上线

Instant Webhook
📊

Scale 10x复盘扩量

White-Label
SECTION 05

Head-to-Head Battle Cards & Authoritative Quotes 对决红黑榜与严禁默认引用的金句体系

"Strictly conforming to Esther's rule: absolute prohibition of default gray blockquotes." “严格遵守不二规范:绝对禁止使用默认灰条 blockquote”

#12 Do / Don't Battle Card (UChat vs ManyChat 2026) Do / Don't 竞品红黑决战卡
UChat vs ManyChat Buyer Decisions选型决策
✕ The ManyChat 2026 Traps传统工具的暗坑 (ManyChat 2026)
  • • Monthly bill escalates past $145/mo once contacts exceed 10,000
  • • Repetitive identical comments trigger Meta algorithmic spam downranking
  • • Zero native agency white-labeling on custom agency domains
  • • Outdated 2023 UI without native OpenAI / Claude prompt nodes
  • • 超过 10,000 联系人月费飙升至 $145/mo
  • • 单一死板回复容易被 Meta 判定为机器人垃圾号
  • • 无法在自有域名上部署 Agency 客户独立白标
  • • 界面停留在 2023 年,缺乏新一代 AI 意图门控
✓ The UChat AdvantageUChat 全生态破局方案
  • • Zero Contact Tax: Unlimited stored contacts without penalty pricing
  • • 5x Spintax Rotation: Mimics natural human posting cadence
  • • 100% Agency White-Label: Custom domains, client tiers & custom logos
  • • Native AI Intent Filter: Blocks negative sentiment before triggering DMs
  • • 零联系人税:全网爆发上万条评论也不多扣一分钱
  • • 5x Spintax 轮换:天然模拟真人发帖节奏
  • • 100% Agency 深度白标:支持独立域名、自建套餐
  • • OpenAI/Claude 智能门控:过滤差评与无意义垃圾词
#45 Do/Don't · Handwritten Cheat Sheet (Caveat Font) Do/Don't · 手写避坑笔记(Handwritten Comparison)
Cheat Sheet避坑法则 Best Practices教程划重点
— Best Practice Rules ✏️ — 避坑法则 ✏️
Don't ✗别这样 ✗
Do This ✓要这样 ✓
Paste links in captions (70% reach drop) 在帖子正文贴外链 (降权 70%)
Prompt comments to trigger private DMs 引导留言关键词触发私信
Send identical static comment replies 单一死板评论回复 (易封号)
Rotate 5 natural Spintax text variants 5 组 Spintax 自然变体轮换
Use vendor-locked generic platforms 使用无品牌的通用 ManyChat
Host on your custom domain with UChat UChat 独立域名与 100% 白标
Blast promotional messages blindly 盲目推送推销轰炸客户
1-click button handshake opens 24h window 通过 1 键 Handshake 按钮合规开启 24h
#3 Key Insight · Editorial Note (Caveat Margin Style) Key Insight 手写批注风(真正有价值的行业洞察)
Platform API Nuance行业洞察 Conversion Truth破除信息差
Key Insight ✦

Under Meta's Graph API policies, a public post comment grants developers exactly ONE proactive private message credit within 7 days. If that first message is a wall of sales pitch text and the user ignores it, your automation dies on the spot. The first message must always be an irresistible 1-click button handshake to unlock the compliant 24-hour window! Meta 官方在 Graph API 里明确规定:针对每一条用户的公开评论,系统仅赋予开发者1 次主动发送私信的握手机会。如果这条私信充斥着冗长推销,用户没有点按回复,整个自动化就瞬间中断。因此,私信的第一句话永远必须是一个极低门槛的“1 键确认按钮”!

#6 & #38 Magazine Pull Quote (Giant Serif Quote Accent) 杂志金句 Pull Quote(告别丑陋默认灰色竖线)
Video Quote Card视频金句插页 Editorial Philosophy核心观点
“

“Automation is not about replacing human connection—it is about eliminating robotic busywork so you can focus on conversations that actually convert.” “自动化不是为了取代人,而是把人从重复的‘已私信请查收’中解放出来,去面对真正产生商业价值的深度沟通。”

Echo
Echo
Chief AI Guide at UChat UChat 首席全渠道 AI 向导
SECTION 06

Code Panels, Live Chat Bubbles & Boarding Pass 代码面板、真实对话气泡与登机牌

macOS window chrome, vintage lined notebook paper, and authentic chat UI macOS 视窗、复古笔记本纸与真实聊天 UI 还原

#7 Chat Bubbles (Comment-to-DM Handshake Simulation) 对话气泡 Chat Bubbles(展示 Facebook 评论转私信实战)
Interactive Demo场景实操 Video Walkthrough视频演示
Hey! Do you have the free JSON template for this comment automation flow? 大佬求问,你的那个自动发资料的工作流有模板吗?求一个!
💬 Public Comment Auto-Reply:帖文公开自动回复: “Just sent the 1-click template to your Messenger inbox! Check your DMs 📬” “已经将完整 1 键导入 JSON 发送至您的私信!快去查收 📬”
Echo (UChat Guide):
Hey Matthew! 👋 Thanks for commenting. Tap the button below to download the flow JSON template instantly: 嗨!这是为你准备的《Facebook 评论自动获客工作流.json》。点击下方按钮直接下载并导入:
Instant delivery! Received in 2 seconds, thanks! 🎉 哇秒发!太爽了吧,完全不用等!🎉
#5A & #5B Code Panels (macOS Window vs Lined Notebook Paper) 代码面板(macOS 视窗 vs 复古笔记本纸)
Dev Walkthrough开发向 Handmade Notes教程手账
facebook-comment-funnel.json
{
  "flowName": "Facebook Comment Auto Reply",
  "triggers": [
    {
      "type": "facebook_comment",
      "keywords": ["template", "demo"],
      "spintaxReplies": [
        "Just sent to your DMs! 📬",
        "Check your Messenger inbox! 🙂"
      ]
    }
  ],
  "handshake": "1_click_button"
}
✏️ meta-compliance-rules.md
# Meta Anti-Ban Golden Rules
1. Rotate at least 4 Spintax comment variants
2. First private DM must be a 1-click button handshake
3. 24-hr messaging window requires user button click
4. Add AI sentiment filter: negative comments ignored!# Meta 防封号 4 大法则
1. 必须使用 4 组以上公评 Spintax 轮换
2. 私信第一句只能是一个按钮 Handshake
3. 24 小时窗口必须由用户点击触发
4. 意图分类节点:差评与抱怨绝对不触发!
#21 Boarding Pass Voucher (VIP Agency Partner Pass) 机票卡片 · 复古登机牌(VIP 合作伙伴邀请函 / 领券卡)
Partner Invitation合作伙伴 Voucher Card优惠凭据
UCHAT-2026 UChat Agency Partner PassUChat Agency Partner Pass
FREE
14-Day Full Access14天全功能试用
DIRECT ✈直通 ✈
SCALE
White-Label Portal独立白标客户门户
PASSENGER Matthew Miao
GATE ECHO-01
SEAT 01A VIP
BOARDING PASS
TIERUNLIMITED
CONTACT TAX$0 / CONTACT