BWVI

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 generate "产品路线图" --deck        # Deck 幻灯片
npx bwvi generate "新品发布" --social        # 社交卡片
npx bwvi skill list                          # 查看所有技能模板
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

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 generate "2026 产品路线图" --deck
# → Deck 幻灯片（键盘←/→翻页 + 过渡动画 + 触屏支持）

bwvi generate "AI 新品发布" --social --brand=linear
# → 社交卡片（Twitter/X / 小红书风格）

bwvi skill list
# → 查看所有可用技能模板（YAML 文件系统）

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

# 注入 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

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

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

测量(measure) → 诊断(diagnose) → 改进(improve) → 验证(verify) → 固化(solidify) → 循环

bwvi learn-system status          # 查看所有能力状态 (彩色终端输出)
bwvi learn-system diagnose        # 诊断最大瓶颈

# critique → 自动注入评审模式到知识库
bwvi critique index.html                            # 评审后自动学习

# feedback < 6 → 自动触发改进记录
bwvi feedback 4 "字体不好看"                         # 低分自动改进

# 低分触发改进后，持久化到 capabilities/
# bwvi learn-system history → 可以看到自动产生的改进记录

bwvi learn-system ingest https://linear.app         # 从 URL 学习色板/字体/布局
bwvi learn-system ingest feedback                   # 从用户反馈分析模式
bwvi learn-system ingest critique                   # 从评审报告发现失败模式
bwvi learn-system ingest principles                 # 从源码抽取设计原理（新增🚀）

bwvi learn-system improve palette-generation   # 升级色板生成能力
bwvi learn-system improve direction-recommendation
bwvi learn-system history                      # 查看全部升级历史
bwvi learn-system knowledge                    # 查看已学知识块

用户 / Agent  →  learn-system CLI  /  MCP tools
                        │
          ┌─────────────┴─────────────┐
          ▼                           ▼
  Capability Graph            Knowledge Pipeline
  ┌─────────────────┐    ┌───────────────────────────┐
  │ 12 能力节点       │    │ URL → 提取 → 注入知识库    │
  │ 测量 / 诊断 / 记录 │    │ 反馈 → 分析 → 存储模式     │
  │ .bwvi/capabilities│    │ 评审 → 聚合 → 发现瓶颈    │
  │ (自动改进记录)     │    │ 源码 → principles-ingest  │ ← 新增
  └─────────────────┘    └─────────┬─────────────────┘
                                    ▼
                          .bwvi/learned/ + knowledge/*.md (~18KB)

不是"选套餐"，而是在原理约束下做创造性组合：

  色彩:    从色相环规则生成 → 6 种和谐模式 (类似色/补色/三角色...)
          自动 WCAG 对比度验证 → text-on-surface ≥ 4.5:1
  
  字体:    从字体分类学出发 → 5 大类 × 8 种比例尺 × 12 条配对规则
          智能推荐: "衬线标题 + 无衬线正文 → 经典组合"
  
  布局:    从 8px 网格系统出发 → 计算视觉重量 → 确定信息密度
          内容量越大 → 布局越紧凑 → 网格列数自适应
  
  冲突检测: 22 种风格属性 × 兼容矩阵 → 判断 A+B 能不能混搭
          "极简色板 × 多彩色板" → 冲突 → 给出修复建议

# 原理感知的 analyze（新增功能）
bwvi analyze "咖啡品牌"  # 现有：推荐 warm-minimal 方向
                          # 新增：同时推荐混搭方案

# 方案示例 — 不必整套用同一个方向的配置
方案A:  warm-minimal 的方向 + tech-utility 的布局 + 类似色和谐
方案B:  warm-minimal 的方向 + corporate-trust 的字体 + 互补色和谐
方案C:  自定义混搭（选择配色来源 + 字体来源 + 布局来源）

src/principles/
├── types.ts             → HSL 颜色、字体规格、网格系统等类型
├── color-harmony.ts     → HSL 运算 · 6 和谐模式 · WCAG 对比度 · 自动色板生成
├── typography.ts        → 字体分类 · 8 比例尺 · 12 配对规则 · 密度感知
├── layout.ts            → 8px 网格 · 视觉重量 · 信息密度 · 间距节奏
├── conflict.ts          → 22 风格属性 · 兼容矩阵 · 混搭建议引擎
├── composer.ts          → 组合生成器 · 原理评分 · 可读解释
└── __tests__/           → 95 个测试，全部通过

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

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

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

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  # 完整构建+运行

bwvi/
├── src/                TypeScript 源码（112+ 文件）
│   ├── skills/          YAML 技能文件 (v0.5.0 新增)
│   ├── engine/          skill-loader.ts + deck-renderer.ts (v0.5.0 新增)
│   └── cli/             skill.ts (v0.5.0 新增)
├── 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)