梧桐设计语言Wutong AI · Main Site
产业决策 AI 工作台
from knowledge to reports.
面向工程咨询与产业决策：政策检索 → 市场调研 → 建设方案 → 财务测算 → 成稿交付。多智能体分工协作，项目资料留在本机，只调用云端算力。
60+官方 Skills
2,859知库文档
4h → s政策检索
5业务场景
PROJECTS
XX 产业园可研报告
城市更新前期研判
专债项目建议书
协调层XX 产业园可研报告 · 生成可研初稿
政策法规检索与合规审核running
市场数据调取与背景分析queued
建设方案规划queued
投资估算 · NPV / IRRqueued
规划 / 咨询研究 / 报告GIS / 空间数据数据分析 / 统计
什么时候用哪一层
| 产品层（默认） | 营销层 | |
|---|---|---|
| 页面 | 智算客户端、灵构、后台、App、小程序 | 官网、落地页、发布会物料、定价页、案例页 |
| 页底 / 文字 | background #f3f4f3 / foreground #1a1c1c |
brand-paper #f7f7f5 / brand-ink #171c26 |
| 主色 | 梧桐蓝 primary |
品牌金 brand-gold；深色带用 brand-navy + brand-cyan |
| 标题 | 无衬线，26 / 19 / 15 | 首屏衬线 900 m-display 52；区块 m-h2 28 无衬线 |
| 正文 | 14 / 22 | m-body 15 / 25，引言 m-lede 16 / 27 |
| 圆角 | 4 / 6 / 8 / 12 | 按钮 radius-m-btn 10、卡片 radius-m-card 14、截图窗 16 |
| 控件默认档 | md 36 |
lg 40（原型按钮 10 × 18 内距 = 40 高） |
| 卡片边 | 发丝线阴影 | 1px 实线 brand-line，hover 上浮 4px + 柔投影 |
| 胶囊形 | 禁止 | 只允许 Badge（首屏卖点、「推荐」角标） |
| web font | 禁止 | 允许（Noto Serif SC / Noto Sans SC / JetBrains Mono） |
| 分隔线 | 实线或不画 | 列表项之间用 1px 虚线 brand-line |
不变的：状态五色（原型自带的 #2f8f5b / #b2571b 弃用，统一用 success / warning）、图标（同一套 105 个）、4 的间距基数、六档尺寸、文案规则（按钮动词带数量）。
落地
Web 端把根节点包进 <Marketing>，语义 token 自动重映射，产品组件在里面直接换皮：
import { Marketing, Eyebrow, StatRow, Chip, Tag, Badge, Button, Card } from "@wutong/ui";
<Marketing>
<Eyebrow>Wutong AI · Main Site</Eyebrow>
<h1 className="m-display">产业决策 AI 工作台</h1>
<Button variant="primary" size="lg">下载 macOS 版</Button> {/* 自动变成品牌金、圆角 10 */}
<StatRow size="sm" items={[{ value: "60+", label: "官方 Skills" }]} />
</Marketing>
<Marketing dark>…</Marketing> {/* 藏青深色带：知库、数据大屏 */}
组成
- Eyebrow：区块上方 11px mono 全大写小字，
brand-gold；深色带里brand-cyan。每个区块一个，放在 h2 上方 14px。 - 首屏：左文右图，
m-display衬线 900 +m-display-enmono 英文副题 +m-lede+ CTA 行（一个金色主按钮带两行文案、两个描边次级按钮）+ 底部统计行StatRow size="sm"。右侧是产品截图 / 模拟窗口，圆角 16、1pxbrand-line-2边、大投影0 30px 60px -30px。 - 数据带：
StatRow divided，白底、上下 1px 线，四等分，mono 32 大数字。 - Chip / Tag / Badge：描边 chip 标技能与分类（点亮态金边）；mono
Tag标层级（AGENT / SKILL / TOOL）；Badge胶囊只在首屏卖点与「推荐」角标。 - 卡片：白底 1px 线、圆角 14、内距 22；bento 布局 gap 14；hover 上浮 4px。
- 动效：首屏元素逐个
rise（上移 12px 淡入，0.7s，错峰 100ms）；截图窗appIn；卡片 hover 0.25s。曲线cubic-bezier(.2,.7,.2,1)。这是营销层唯一允许「入场动画」的地方，产品层不做。
不要做的
- 把品牌金带进产品 UI 当主色（那里橙系归
warning）。 - 把衬线用到区块标题以下——只有首屏 h1。
- 营销页里用产品的
md36 按钮，看着会小一号。 - 自己配一套绿红做状态，用
success/warning/destructive。