Better Way of Visual Intelligence

Agent 原生设计决策协议 — CLI · MCP Server · 多后端渲染

🌐 English

npx bwvi init my-project && cd my-project
npx bwvi analyze "咖啡品牌 landing page"     # 分析任务 → 方向推荐
npx bwvi showcase --pick landing-warm        # 选方向（真实 HTML 预览）
npx bwvi generate "咖啡品牌" --direct        # 直接出 HTML
npx bwvi critique index.html                 # 评审
npx bwvi feedback 8                          # 评分

# 直接运行（无需安装）
npx bwvi --help

# 全局安装
npm install -g bwvi
bwvi --help

src/
├── types/              纯接口定义，0 依赖
│   ├── decision.ts     决策链类型
│   ├── project.ts      项目 / Checkpoint 配置
│   ├── critique.ts     评审报告类型
│   └── fingerprint.ts  设计指纹类型
│
├── engine/             核心引擎
│   ├── analyzer.ts     任务分析 → 10 种方向
│   ├── composer.ts     Prompt 组装
│   ├── agent.ts        Agent CLI 检测
│   ├── learner.ts      外部设计学习
│   ├── brand-loader.ts 115 个内置品牌系统
│   ├── imager.ts       真实图片管道
│   ├── slop-guard.ts   反 AI Slop 检测（8 项检查）
│   ├── page-builder.ts 页面组装引擎
│   ├── renderer.ts     多后端渲染调度器
│   ├── animation-engine.ts 动画引擎
│   ├── style-systems.ts 56 种视觉风格
│   └── bridges/
│       ├── od-bridge.ts      Open-Design 客户端
│       └── huashu-bridge.ts  Huashu-Design 调用器
│
├── frames/             设备边框
│   ├── index.ts        iPhone/Pixel/iPad/MacBook/Browser
│   └── state-machine.ts 2KB 交互状态机
│
├── templates/          组件库
│   ├── components.ts    Navbar/Hero/StatsGrid… 15+ 组件
│   └── content-presets.ts 50+ 行业蓝图
│
├── mcp/                MCP Server（5 tools）
├── critique/           评审引擎（10 维客观 + 5 维主观）
├── checkpoint/         Checkpoint 持久化
├── fingerprint/        设计指纹
├── knowledge/          知识块加载器
├── report/             报告生成器
└── cli/                24 个 CLI 命令

direction → palette → typography → [information_density] → layout → detail_signature

bwvi generate "咖啡品牌 豆蔻咖啡 landing page" --direct
# → 匹配 blueprint: landing-cafe → 方向 warm-minimal → 真实页面

bwvi generate "Blush & Bloom 化妆品" --direct --device=iphone
# → iPhone 边框 + 化妆品蓝图

bwvi generate "SaaS AI platform" --direct --dark
# → 深色 SaaS 页面

bwvi style list                    # 列出所有风格
bwvi style search brutalism        # 搜索风格
bwvi style show pastel-dream       # 查看风格详情

bwvi animate output.html --embed              # 嵌入动画 CSS + scroll-trigger
bwvi animate output.html --fps=60 --format=mp4  # 导出 MP4
bwvi animate output.html --bgm=tech             # 添加 BGM

bwvi generate "App onboarding" --device=iphone --interactive
bwvi generate "Dashboard" --device=browser --interactive --dark

bwvi brand search fintech    # 搜索 fintech 品牌
bwvi brand get linear        # 查看 Linear 品牌详情
bwvi generate "SaaS" --brand=linear

bwvi generate "SaaS landing" --engine=od --brand=linear
bwvi generate "App 原型" --engine=huashu --device=iphone

{
  "mcpServers": {
    "bwvi": {
      "command": "npx",
      "args": ["-y", "bwvi", "mcp"]
    }
  }
}

bwvi benchmark
# → 5/5 通过 (0.3s)