BWVI 不是设计工具。 它是 AI Agent 与设计执行之间的决策层。它不画像素——它确保每个像素都有理由。

CLI + MCP Server，让 AI Agent 拥有结构化的设计决策能力。
输出 → Open-Design、Huashu-Design 或内置渲染器。

📋 目录

• 核心特性
• 全面对比评估
• 快速开始
• 安装
• 架构
• 设计决策协议
• 命令
• 设备边框
• 交互原型模式
• 组件变体
• Page Builder 蓝图引擎
• 56 种视觉风格
• 动画引擎
• 品牌系统
• 多后端渲染引擎
• 评审体系
• 知识块系统
• MCP Server
• 跨会话工作流
• API 参考
• 开发
• 基准测试
• 许可证

🆚 全面对比评估

BWVI、Open-Design（21.8k ★）和 Huashu-Design 在 AI 原生设计流水线中扮演不同角色。以下评估基于实际测量数据和源码分析。

一句话定位

📊 性能基准测试（实测数据）

🎯 效果评分（10 维度 ★★★★★ 全满贯）

⏱ BWVI 命令实测延迟

🎯 场景推荐

🔄 决策枢纽架构

┌──────────────────────────────────────────┐
│                  BWVI                    │
│     分析 → 决策链 → Checkpoint           │
│     方向 + 色板 + 字体                    │
└─────────────┬────────────────────────────┘
              │ 决策 JSON (~200ms)
     ┌────────┴────────┐
     ▼                  ▼
┌────────────┐   ┌──────────────┐
│Open-Design │   │Huashu-Design │
│129 品牌    │   │iPhone 边框   │
│64 个技能   │   │动画引擎      │
│沙箱预览     │   │视频导出      │
│(~10-30s)   │   │(~30-120s)    │
└────────────┘   └──────────────┘
     │                  │
     └──────────────────┘
            ▼
     ★★★★★ 质量

🖼 产出展示

demo 页面	demo 页面
摄影个人主页 photography.html	化妆品品牌站 cosmetics.html
企业页面 enterprise.html	创意页面 metallix-3d.html

🚀 快速开始

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

🎯 设计决策协议

核心抽象是一条渐进约束的决策链：

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

📟 命令

🏭 Page Builder 蓝图引擎

generate --direct 自动匹配行业蓝图，生成真实页面。

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 页面

覆盖行业：咖啡餐饮、化妆品美妆、SaaS/科技、餐厅美食、健身运动、时尚服饰、教育培训、房产物业、金融科技、电商零售、个人作品集、创意代理、非营利组织、活动会议、医疗诊所、法律律所、商业咨询、摄影视频、婚礼策划、旅行旅游、宠物服务、音乐人、健身房、瑜伽冥想、艺术家、建筑设计、酒吧、面包店、酒店度假村、共享办公、水疗按摩、汽车经销、游戏电竞、博客自媒体（共 50+ 蓝图）。

🎨 56 种视觉风格

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

分类：极简/干净、大胆/戏剧、科技/现代、趣味/创意、自然/有机、专业/企业、创意/作品集。

代表风格：minimal-white neo-brutalism glassmorphism cyberpunk pastel-dream kawaii-japan nature-organic corporate-trust photography music-vibe 等。

🎬 动画引擎 + 视频录制

# 注入 CSS 动画（原行为）
bwvi animate output.html --embed

# 视频录制（需 Playwright + ffmpeg）
bwvi animate output.html --record                    # 默认 1080p 25fps MP4
bwvi animate output.html --record --fps=60           # 60fps 高清
bwvi animate output.html --record --format=gif       # GIF 导出
bwvi animate output.html --record --bgm=tech         # 加背景音乐
bwvi animate output.html --record --duration=10      # 固定时长
bwvi animate output.html --record --interactive      # 自动录制交互操作
bwvi animate output.html --record --quick            # 快速模式（720p 15fps）
bwvi animate output.html --record --watermark=logo.png  # 加水印

录制流水线

HTML 页面
  │  injectAnimations() 注入 12 种 CSS 动画
  ▼
带动画的 HTML
  │  Playwright 打开页面 → 原生录屏 → 自动滚动/交互
  ▼
原始 WebM
  │  ffmpeg 合成 → H.264 编码 → BGM → 水印
  ▼
成品 MP4 / GIF

12 种动画类型：fade-in、fade-up、scale-in、slide-left/right、bounce-in、rotate-in、flip-in、shimmer、float、glow、typewriter
7 种 easing：linear、ease-out、ease-in、ease-in-out、bounce、elastic、spring

📱 设备边框

🎮 交互原型

--interactive 嵌入 2KB 无依赖状态机：

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

支持：Modal、Tab、Accordion、Carousel、暗色模式、Toast、表单提交。

🧩 组件变体

🏷️ 品牌系统

115 个内置品牌，--brand 自动加载色板+字体：

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

覆盖 12 分类：Tech、Fintech、Enterprise、Consumer、Retail、Automotive、Gaming、Food、Media、Creative、Education、Health。

部分内置品牌：Linear, Stripe, Vercel, Apple, Notion, Airbnb, Figma, Supabase, Cursor, Shopify, Spotify, Coinbase, Tesla, Nike, IBM, NVIDIA, Miro, Framer, Claude, Xiaohongshu, WeChat 等。

🔌 多后端渲染引擎

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

🔍 评审体系

10 维客观指标

color_compliance、font_compliance、asset_authenticity、accent_overuse、token_efficiency、accessibility、semantic_html、responsive、seo_score、html_validity

5 维主观评分

philosophy、hierarchy、detail、function、innovation

📚 知识块系统

15 个知识块，双层加载（knowledge/ 目录 MD 文件优先，源码 fallback）：

00-方向顾问.md  01-色板规则.md  02-字体规则.md  03-布局模式.md
04-动效原则.md  05-内容规则.md  06-品牌协议.md  07-组件规格.md
08-间距系统.md  09-响应式.md    10-图标规范.md  11-图片规范.md
12-表单规范.md  13-导航模式.md  14-数据可视化.md

🤖 MCP Server

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

5 个原生工具：analyze_design generate_design critique_design learn_design list_directions

🔄 跨会话工作流

# 会话 1: 用户选方向
bwvi showcase --pick landing-editorial
# → 写入 .bwvi/checkpoints/

# 会话 2（新终端）: 读取决策
bwvi checkpoint list
# → 方向已定，直接 generate

📋 API 参考

bwvi analyze "SaaS landing page"
bwvi generate "SaaS landing" --direction=tech-utility
bwvi critique output.html --brand-colors #1E1E2E,#00E698
bwvi learn https://linear.app
bwvi showcase --pick dashboard-clean
bwvi checkpoint list
bwvi checkpoint restore dec_direction_123
bwvi feedback 8 "排版不错"
bwvi knowledge list
bwvi asset color stripe
bwvi brief "咖啡品牌, 受众:投资人, 语气:专业"
bwvi debt add "Logo 需要替换为官方 SVG"
bwvi history
bwvi brand fetch linear
bwvi plugin my-plugin
bwvi test index.html --a11y --interactive
bwvi diff v1.html v2.html
bwvi video index.html --fps=60 --format=mp4
bwvi benchmark

🛠 开发

npm install              # 安装依赖
npm run dev -- <args>    # 开发模式（TS 直接运行）
npm run typecheck        # 类型检查（tsc --noEmit）
npm run build            # 生产构建（esbuild CJS+ESM）
npm start                # 运行 dist/bwvi.cjs
npm run benchmark        # 13 用例基准测试
npm test                 # 100 用例单元测试
npm run build && npm start  # 完整构建+运行

技术栈

• 语言: TypeScript 5.7+ (strict mode)
• 运行时: Node.js 20+ (ES2022)
• 打包: esbuild（CJS + ESM 双格式）
• MCP: @modelcontextprotocol/sdk v1.29+ (stdio transport)
• 测试: vitest
• 配置: YAML

项目结构

bwvi/
├── src/                TypeScript 源码（50+ 文件）
├── dist/               构建产物 (CJS 873KB + ESM 867KB)
├── scripts/            构建脚本
├── knowledge/          15 个知识块 (MD)
├── demo/               展示预览（生成文件 + 截图）
├── docs/               设计文档
├── node_modules/       依赖（3 个包）
├── package.json
├── tsconfig.json
├── vitest.config.ts
└── README.md

✅ 基准测试

bwvi benchmark
# → 13/13 通过 (0.2s)

📄 许可证

Apache-2.0