AI Agent 设计工具BWVI、Open-Design、Huashu-Design 怎么选、怎么搭一、三者概述1.1 BWVIBetter Way of Visual Intelligence1.2 Open-Design1.3 Huashu-Design二、三者定位关系三、BWVI 安装与使用3.1 安装3.2 核心命令3.3 决策链说明四、Open-Design 安装与使用4.1 方式一桌面应用免构建4.2 方式二Docker4.3 方式三从源码运行4.4 首次运行4.5 典型使用流程4.6 MCP Server只读五、Huashu-Design 安装与使用5.1 安装5.2 典型命令在 Agent 中对它说5.3 能力一览5.4 核心机制六、关键指标对比6.1 性能基准实测数据6.2 功能维度对比6.3 关键差异速读七、三者组合使用7.1 BWVI 单独使用纯决策 简易出图 7.2 Open-Design 单独使用全能执行引擎 7.3 Huashu-Design 单独使用对话式设计工匠 7.4 BWVI → Open-Design决策 多技能执行 7.5 BWVI → Huashu-Design决策 工匠级执行 7.6 Open-Design Huashu-Design双引擎按任务切换 7.7 BWVI → Open-Design Huashu-Design三者全链路 7.8 全部 7 种组合速查八、选型决策速查参考来源一、三者概述1.1 BWVIBetter Way of Visual IntelligenceBWVI 是一个Agent 原生设计决策协议以 CLI MCP Server 形态运行。它本身不产出像素级设计而是充当 AI Agent 与设计执行之间的决策层——分析任务意图输出结构化设计决策方向、色板、字体、布局、细节交由下游渲染后端执行。输出目标为 Open-Design、Huashu-Design 或内置渲染器。仓库github.com/lh123aa/bwvi-design版本v0.2.1许可证AGPL-3.0核心指标包体积 873KBCJS 单文件冷启动 0msnpx首次产出约 200ms内存占用约 5MB仅依赖 3 个 npm 包完全离线可用1.2 Open-DesignOpen-Design 是一个本地优先的 AI 设计执行引擎也是 Anthropic Claude Design 的开源替代。它不绑定特定 Agent而是自动检测系统 PATH 中已安装的编码 Agent CLI共 16 种将其编排为技能驱动的设计工作流后产出高保真设计制品。提供浏览器端界面Next.js 16与本地守护进程Express SQLite支持 Web 部署。仓库github.com/nexu-io/open-designStars43.7k截至 2026-05许可证Apache-2.0技能数量31 个内置技能27 个原型模式 4 个幻灯片模式设计系统数量129 个源自 awesome-design-md 与 awesome-design-skills支持的 Agent CLIClaude Code、Codex、Devin、Gemini CLI、OpenCode、Cursor Agent、Qwen Code、Qoder、Copilot、Hermes、Kimi CLI、Pi、Kiro、Kilo、Mistral Vibe、DeepSeek TUI以及 BYOK 代理回退Anthropic / OpenAI / Azure / Google Gemini1.3 Huashu-DesignHuashu-Design 是一个HTML 原生的设计 skill安装于 Claude Code 等 Agent 内直接使用。纯对话交互不需要图形界面、不需要 Figma 插件一句话即可产出高保真 App 原型、可编辑 PPT、产品动画 / MP4 / GIF、印刷级信息图等。由独立开发者花叔AlchainHust创建并维护。仓库github.com/alchaincyf/huashu-designStars14.1k截至 2026-05许可证MIT2026-05-14 由个人使用许可重新授权核心理念5 步品牌资产协议、设计方向顾问5 流派 × 20 设计哲学、初级设计师工作流、事实优先验证、反 AI 塑料味规则Agent 兼容性Claude Code、Cursor、Trae、Hermes、OpenClawAgent-agnostic二、三者定位关系BWVI 定义「画什么」→ Open-Design 或 Huashu-Design 负责「画出来」。角色定位类比BWVI设计决策协议决定「画什么」的架构师Open-Design设计执行引擎能「画任何东西」的工厂Huashu-Design设计工匠工作室把「一件事」做到极致的匠人三者在 AI 原生设计流水线中承担不同职责可独立使用也可串联组合。三、BWVI 安装与使用3.1 安装BWVI 无需安装即可通过 npx 直接运行npx bwvi--help如需全局安装npminstall-gbwvi bwvi--help3.2 核心命令# 创建项目npx bwvi init my-projectcdmy-project# 分析任务 → 方向推荐 指纹npx bwvi analyze咖啡品牌 landing page# 展示 10 种设计方向--pick 选择方向npx bwvi showcase--picklanding-warm# 直接出 HTML内置渲染器约 200msnpx bwvi generate咖啡品牌--direct# 10 维客观 5 维主观评审npx bwvi critique index.html# 评分 1-10自动更新指纹npx bwvi feedback8# 品牌列表npx bwvi brand list# 知识块查看npx bwvi knowledge list# 决策管理列表 / 查看 / 回滚npx bwvi checkpoint list npx bwvi checkpoint showidnpx bwvi checkpoint restoreid# 基准测试全部 13 项约 235msnpx bwvi benchmark3.3 决策链说明BWVI 的核心抽象是一条渐进约束的决策链每一步缩小设计空间direction → palette → typography → [information_density] → layout → detail_signature所有决策持久化为 JSON支持追溯与回滚。四、Open-Design 安装与使用4.1 方式一桌面应用免构建从 open-design.ai 或 GitHub Releases 页面下载预构建桌面应用macOS Apple Silicon / Intel x64Windows x64。4.2 方式二Dockergitclone https://github.com/nexu-io/open-design.gitcdopen-design/deploydockercompose up-d访问http://localhost:7456。4.3 方式三从源码运行gitclone https://github.com/nexu-io/open-design.gitcdopen-design corepackenablecorepackpnpm--version# 应输出 10.33.2pnpminstallpnpmtools-dev run web# 前台模式要求 Node ~24 与 pnpm 10.33.x。4.4 首次运行守护进程启动后自动完成以下操作创建./.od/目录含 SQLite 数据库、项目文件夹、制品存储检测系统 PATH 中可用的 Agent CLI加载 31 个技能与 129 个设计系统显示欢迎对话框可选配置 API Key4.5 典型使用流程在浏览器界面输入设计需求系统强制弹出问题表单场景、受众、调性、品牌背景、规模防止盲目出图从 5 个视觉方向中选一或指定品牌设计系统选择技能如web-prototype、saas-landing、mobile-appAgent 在真实文件系统中读写项目文件产出 HTML 制品在沙箱 iframe 预览导出为 HTML / PDF / PPTX / ZIP4.6 MCP Server只读Open-Design 提供 STDIO MCP Server可向任意 MCP 兼容 Agent 暴露项目文件读取、元数据与搜索能力。五、Huashu-Design 安装与使用5.1 安装通过 skills.sh 注册表一行安装npx skillsaddalchaincyf/huashu-design安装后在 Claude Code 中直接对话即可触发。5.2 典型命令在 Agent 中对它说Make a keynote for AI psychology. Give me 3 style directions to pick from. Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable. Turn this logic into a 60-second animation. Export MP4 and GIF. Run a 5-dimension expert review on this design.不限于 Claude Code——Cursor、Trae、Hermes、OpenClaw 等任意支持 markdown-skill 的 Agent 均可使用。5.3 能力一览能力交付物典型耗时交互原型App / Web单文件 HTML · iPhone 真机边框 · 可点击 · Playwright 验证10–15 分钟幻灯片HTML 演示文稿 可编辑 PPTX真实文本框15–25 分钟动画设计MP425fps / 60fps 插值 GIF调色板优化 BGM8–12 分钟设计变体3 并排对比 · 实时参数调节10 分钟信息图 / 数据可视化印刷级排版 · PDF/PNG/SVG 导出10 分钟设计方向顾问5 流派 × 20 哲学 · 推荐 3 方向 · 并发生成演示5 分钟5 维专家评审雷达图 Keep / Fix / Quick Wins 清单3 分钟5.4 核心机制品牌资产协议5 步强制流程当任务涉及特定品牌时技能强制执行① 询问 6 类资产清单 ② 搜索官方渠道 ③ 按资产类型下载每类三条回退路径④ 验证并提取 ⑤ 冻结到brand-spec.md。禁止凭记忆猜测品牌颜色。设计方向顾问回退模式当需求过于模糊时触发——从 5 个设计流派 × 20 种设计哲学中推荐 3 个差异化方向每个方向附带代表作、格式塔关键词、代表设计师并生成三份视觉演示供选择。初级设计师工作流一次性发送完整问题集、将假设与占位符写入 HTML、尽早向用户展示哪怕只是灰色方块、在内容→变体→调参三个节点各展示一次、交付前通过 Playwright 肉眼检查浏览器效果。反 AI 塑料味规则避免紫色渐变 / emoji 图标 / 圆角卡片左框线强调 / SVG 人物 / Inter 字体当展示用 / CSS 剪影代替真实产品图。使用text-wrap: pretty CSS Grid 衬线展示字体 oklch 颜色。六、关键指标对比在了解如何组合之前先看清三者的性能差异和功能侧重。本章数据来源于 BWVI 官方基准测试README 中标注为「实测数据」及各项目 README。6.1 性能基准实测数据指标BWVIOpen-DesignHuashu-Design包体积873 KBCJS 单文件约 500 MBpnpm 37K node_modules约 3.8 MB154 文件冷启动0msnpx无需安装约 30-60spnpm install build0msskill 加载首次产出约 200msgenerate --direct约 10-30sdaemon → Agent → 流式约 30-120sAgent 出初稿¹内存占用约 5 MBheap约 150-300 MBExpress SQLite0无独立进程依赖数量3 个包1200 包0源文件数约 50 个 TS约 740 应用文件 37K node_modules154 个离线能力完全离线有限有限¹ BWVI 基准测试中的「首次产出」测量的是 Agent 开始生成初稿的延迟非最终交付时间。Huashu-Design 各能力的完整交付时间见 5.3 节3-30 分钟不等。6.2 功能维度对比维度BWVIOpen-DesignHuashu-Design产出视觉质量依赖后端高高决策框架结构化决策链 指纹系统问题表单 方向选择器品牌资产协议 方向顾问品牌系统115 品牌129 品牌无内建品牌库运行时搜索App 原型有设备边框有设备边框iPhone 真机边框 状态管理评审体系10 维客观 5 维主观5 维自评审5 维专家评审 雷达图视频 / 动画StageSprite MP4 BGMgpt-image-2 Seedance HyperFramesStageSprite 时间片 60fps BGM设计系统库115 品牌 56 风格 50 蓝图129 设计系统20 设计哲学Agent 集成原生 MCP Server5 tools16 CLI BYOK 代理SkillAgent-agnostic上手速度200ms 产出零配置需安装 Node pnpm 依赖npx skills add 一行可扩展性插件 知识 MD npm CI技能文件夹 设计系统 DESIGN.mdSKILL.md references/ scripts/6.3 关键差异速读从上述两张表可以得出三条结论直接影响后续组合选择BWVI 是「轻量决策器」200ms 极速、零依赖、完全离线。它的价值不在出图在出方向。任何组合中加入 BWVI 都不会增加实质性安装负担。Open-Design 是「重量级工厂」生态最大129 设计系统 / 31 技能、Agent 覆盖最广16 种但首次安装成本高Node ~24 pnpm 1200 依赖。Huashu-Design 是「轻量级工匠」一行安装、零进程、动画和 App 原型最精细但不适合需要 Dashboard / SaaS 等复杂多页面 Web 场景。七、三者组合使用三个工具各自可独立使用亦可两两组合或三者串联。以下逐一说明全部 7 种用法。每个小节按统一结构展开适用情况何时用→核心逻辑为什么成立→ 流程图怎么做→适用边界限制与代价。三者定位关系见第二章指标差异见第六章。可信度标注 官方明确支持BWVI README 直接列出了该组合方式 架构推导成立组合逻辑与官方架构一致但不以独立方案形式出现在文档中组合类型可信度① BWVI 单独 / ② Open-Design 单独 / ③ Huashu-Design 单独单一工具独立使用 各自官方 README 的默认用法④ BWVI → Open-Design / ⑤ BWVI → Huashu-Design决策层 执行层串联 BWVI README 明确列出输出目标⑥ Open-Design Huashu-Design双执行引擎按任务切换 工作流层面的共存无技术桥接⑦ BWVI → Open-Design Huashu-Design决策层 双执行引擎全链路 ④和⑤的逻辑并集BWVI 多后端架构支撑7.1 BWVI 单独使用纯决策 简易出图 适用情况只需要快速确定设计方向、做设计走查、或在 CI/CD 流水线中设置设计质量门禁。也适用于没有安装其他 Agent CLI 的轻量场景——BWVI 零依赖、完全离线。核心逻辑BWVI 的价值不在产出的 HTML 有多精美而在 200ms 内给出有依据的设计方向。对于「只需要知道该用什么配色 / 字体 / 布局」的场景装 Open-Design500MB Node ~24是过度投入。BWVI 对标的是设计决策这个单一环节而非整个设计生产流程。你说需求 │ ▼ bwvi analyze 描述 → 方向推荐 指纹~200ms │ ▼ bwvi showcase --pick 方向 → 预览 10 种方向选一个 │ ▼ bwvi generate 描述 --direct → 内置渲染器直接出 HTML~200ms │ ▼ bwvi critique index.html → 10 维客观 5 维主观评审~150ms适用边界内置渲染器产出的是简单页面不是高保真原型。如果你最终需要复杂 Dashboard / 多页面网站 / 可点击 App 原型BWVI 单独不够——它只能做决策层的事执行层还得交给 Open-Design 或 Huashu-Design。7.2 Open-Design 单独使用全能执行引擎 适用情况需要高保真 Web 页面Dashboard / SaaS Landing / Blog / Pricing Page / 移动端页面等且系统已安装可用的 Agent CLI如 Claude Code。团队中有多品类 Web 设计需求时Open-Design 的 31 个技能覆盖面最广。核心逻辑Open-Design 是这个赛道里生态最大的执行引擎——129 个品牌设计系统、31 个技能横跨设计 / 营销 / 运营 / 工程等 9 个领域、支持 16 种 Agent CLI。如果你已经有 Claude Code 或 Cursor 等 AgentOpen-Design 就是把它的设计能力「专业化」的最快路径。启动 Open-Design 守护进程 → 浏览器打开 localhost:7456 │ ▼ 在聊天界面输入设计需求 │ ▼ 填写问题表单场景 / 受众 / 调性 / 品牌 / 规模← 强制步骤 │ ▼ 选择技能31 选 1 视觉方向5 选 1或品牌设计系统129 选 1 │ ▼ Agent 在工作目录读写文件生成 HTML 制品~10-30s 出初稿 │ ▼ 沙箱 iframe 预览 → 导出 HTML / PDF / PPTX / ZIP适用边界首次安装成本高——需要 Node ~24 pnpm 1200 依赖冷启动约 30-60s。另外Open-Design 的动画能力依赖于外部模型Seedance / HyperFrames没有自己的 StageSprite 动画引擎。如果你的核心诉求是产品动画或 App 原型真机边框Huashu-Design 更合适。7.3 Huashu-Design 单独使用对话式设计工匠 适用情况在 Claude Code或 Cursor / Trae / Hermes / OpenClaw中直接对话出设计尤其侧重 App 原型、产品动画、幻灯片、信息图这四类高价值单品。安装一行命令不需要图形界面。核心逻辑Huashu-Design 的哲学是「打字回车一份能交付的设计」。它的 StageSprite 动画引擎和 iPhone 15 Pro 真机边框在同类工具中没有替代品。如果你已经在用 Claude Code加装这个 skill 的边际成本为零。另外它是 MIT 许可证可商用。npx skills add alchaincyf/huashu-design ← 一次性安装 │ ▼ 在 Claude Code 中直接对话 做一个咖啡品牌 landing page3 个方向让我选 把这个逻辑做成 60 秒动画导出 MP4 和 GIF │ ▼ Skill 内部执行方向顾问 → 品牌资产搜集 → Junior Designer 工作流 │ ▼ 交付物HTML / MP4 / GIF / 可编辑 PPTX / PDF3-30 分钟适用边界从输入到完整交付需要 3-30 分钟不是实时预览。复杂 Web 页面Dashboard / SaaS 后台不是它的强项——31 个技能覆盖面的广度不如 Open-Design。另外无品牌素材时即完全从零做设计质量会降到 60-65 分Huashu-Design README 自身的评估。7.4 BWVI → Open-Design决策 多技能执行 适用情况先快速定方向、配色、字体再做高保真多页面产出。适合需要结构化决策记录 高质量多页面 Web 产出的品牌项目。BWVI 将方向决策从 Open-Design 的问题表单中前移做到「先决策再执行」。核心逻辑BWVI 做「理性决策」200ms、可回滚、指纹学习Open-Design 做「感性执行」31 技能、129 设计系统。两者解耦后各司其职——决策层只管方向对错执行层只管产出质量。BWVI 的 fingerprint 系统会记住你的偏好用越多越准。你说需求 │ ▼ ① bwvi analyze 需求描述 → 方向推荐 设计指纹~200ms ② bwvi showcase --pick 方向 → 选定方向 ③ bwvi generate 需求描述 → 输出决策 JSON含 palette / typography / layout │ ▼ ④ 将决策 JSON 作为设计约束在 Open-Design 中输入需求 ⑤ Open-Design Agent 按决策参数渲染高保真页面~10-30s │ ▼ ⑥ bwvi critique index.html → 自动化 10 维评审 ⑦ bwvi feedback 8 → 评分更新指纹下次更准适用边界BWVI 和 Open-Design 之间没有 API 级自动桥接——第④步是人工操作将决策 JSON 内容作为设计约束输入到 Open-Design 中不是自动串联。另外如果你只需要一个简单 Landing Page这个组合是过度工程——直接用 Open-Design 单独即可。7.5 BWVI → Huashu-Design决策 工匠级执行 适用情况最终产物是动画 / App 原型 / 幻灯片 / 信息图Huashu-Design 的强势品类但需要 BWVI 先做结构化决策避免「方向没想清楚就开始画」。中文项目尤其合适——BWVI 的决策链用中文分析任务Huashu-Design 的 SKILL.md 也是中文编写。核心逻辑BWVI 解决「从 0 到 1 的方向迷茫」——10 种方向、115 品牌、56 风格构成结构化的决策空间Huashu-Design 解决「从 1 到 100 的工匠打磨」——StageSprite 动画引擎、iPhone 真机边框、5 维专家评审构成精细化的执行能力。两者的中文原生支持也让中文用户没有语言转换损耗。你说需求 │ ▼ ① bwvi analyze 需求描述 → 方向 品牌分析 指纹~200ms ② bwvi generate 需求描述 → 输出决策 JSON │ ▼ ③ 在 Claude Code 中对 Huashu-Design 下指令附上 BWVI 决策结果 基于这个配色和字体方案做一个 iOS 原型 / 一段产品动画 │ ▼ ④ Huashu-Design 执行品牌资产搜集 → Junior Designer 工作流 → Playwright 验证 ⑤ 交付 HTML / MP4 / PPTX适用边界和 7.4 一样BWVI 的决策 JSON 到 Huashu-Design 之间是人工传递没有自动化桥接。另外BWVI 的品牌系统115 个和 Huashu-Design 的品牌资产协议运行时搜索 下载是两套独立的品牌处理机制——前者是静态数据库后者是动态搜索流程。两者叠加使用时不会冲突但也不是无缝衔接。7.6 Open-Design Huashu-Design双引擎按任务切换 ⚠️ 此组合为工作流层面的共存使用非 API 级技术集成——两者之间没有数据桥接或互调接口。你需要在不同任务中手动选择用哪个工具。适用情况项目中既有复杂 Web 页面需求Dashboard / SaaS Landing / Blog又有动画 / App 原型 / 幻灯片需求。两个执行引擎各做各的不互相替代。核心逻辑Open-Design 和 Huashu-Design 的擅长领域几乎不重叠——OD 的 31 个技能覆盖的是「品类广度」设计 / 营销 / 运营 / 工程 / 产品 / 财务 / 人事等 9 个领域HS 的能力集中在「单品深度」动画引擎的时间片模型、App 原型的真机边框、信息图的印刷级排版。OD 做不了 HS 的 StageSprite 动画HS 做不了 OD 的 Kanban Board / Finance Report / HR Onboarding 等垂直技能。两者不是竞品是互补。Open-Design 的 README 也明确将 Huashu-Design 列为设计哲学来源包括问题优先工作流、品牌资产协议、反 AI 塑料味检查清单均受其启发。日常 Web 页面需求 │ ▼ Open-Design ← Saas Landing / Dashboard / Blog / Pricing Page / 移动端页面 31 技能129 设计系统沙箱预览 动画 / App 原型 / 幻灯片需求 │ ▼ Huashu-Design ← 产品动画MP4MP3/ iOS 原型 / HTML 幻灯片 / 信息图 StageSprite 引擎60fps 输出可编辑 PPTX适用边界两个工具独立安装、独立运行没有统一的决策入口或共享的设计语言。如果你需要「同一个品牌色被 OD 和 HS 产出的页面同时使用」你得自己确保两边用了一致的配色参数——没有一个中央决策层来做这件事。这也正是 7.7 三者全链路要解决的问题。7.7 BWVI → Open-Design Huashu-Design三者全链路 ⚠️ 此组合是7.4BWVI → Open-Design与 7.5BWVI → Huashu-Design的逻辑并集——BWVI 的架构天然支持多渲染后端README 明确列出 4 种后端内置 / Open-Design / Huashu-Design / 本地 Agent因此将决策 JSON 同时用于两个执行层在架构上完全一致。但三者未在官方文档中以单一流水线形式出现属于基于架构推导的工作流组合而非预集成的方案。适用情况复杂商业项目——品牌统一风格的 Web 多页面 App 高保真原型 产品发布动画 设计走查报告需要从统一决策到多品类执行的全覆盖。核心逻辑7.6 的痛点是「两个执行引擎没有统一的决策入口」——OD 产出和 HS 产出可能用了不同的配色、字体、调性。BWVI 补上这个缺口所有产出共享同一份决策 JSONpalette / typography / layoutOpen-Design 覆盖「广度」31 技能 × 129 设计系统Huashu-Design 覆盖「深度」动画 / 原型 / 幻灯片BWVI critique 对所有产出做统一评审并反馈回指纹系统——形成「决策 → 双轨执行 → 评审 → 反馈 → 更精准决策」的闭环。┌── 你说需求 ──┐ │ │ ▼ ▼ ┌──────────────────────────────┐ │ ① BWVI │ │ analyze → 方向色板字体 │ │ generate → 决策 JSON │ │ ~200ms离线零依赖 │ └─────────────┬────────────────┘ │ 决策 JSON共享 │ ┌───────────────┼───────────────┐ │ │ │ ▼ ▼ ▼ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ ② Open-Design │ │③ Huashu-Design│ │ BWVI critique │ │ Web 页面 │ │ App 原型 │ │ 评审 评分 │ │ Dashboard │ │ 产品动画 │ │ 反馈回指纹 │ │ Landing Page │ │ HTML 幻灯片 │ │ │ │ ~10-30s │ │ 3-30min │ │ ~150ms │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ └───────┬───────┘ ▼ 最终交付物合集 Web 页面 App 原型 动画 幻灯片 设计走查报告适用边界这是 7 种组合中复杂度最高的——你需要同时维护 BWVI、Open-Design、Huashu-Design 三个工具。BWVI 到两个执行层之间目前都是人工传递决策参数没有自动化管线。另外对于中小项目比如只做一个 Landing Page 或一段产品动画7.4 或 7.5 的两两组合已经足够三者全链路是过度投入。仅在「品牌统一风格 多品类产出 设计走查」三者同时成立时才值得上。7.8 全部 7 种组合速查编号组合核心逻辑典型总耗时适合谁①BWVI 单独只要方向不要工厂 1s设计走查 / CI 门禁 / 轻量决策②Open-Design 单独把已有 Agent 的设计能力专业化首次安装 5min 产出 10-30s有多页面 Web 需求的团队③Huashu-Design 单独打字→回车→交付安装 10s 产出 3-30minClaude Code 用户 / 要动画和原型的个人④BWVI → Open-Design200ms 定方向 → 工厂级执行BWVI 1s OD 10-30s品牌项目 / CI/CD 设计门禁⑤BWVI → Huashu-Design200ms 定方向 → 工匠级打磨BWVI 1s HS 3-30min要动画原型的品牌项目⑥Open-Design Huashu-Design广度引擎 深度引擎各司其职视任务既有 Web 需求又有动画/App 需求的团队⑦BWVI → Open-Design Huashu-Design统一决策 双轨执行 闭环评审决策 1s 执行 10s-30min追求品牌一致性的复杂商业项目八、选型决策速查详细使用链路见第七章全部 7 种组合的逐一说明本节为速查结论。按你的起点选你的情况推荐组合说明还没装任何 Agent CLIHuashu-Design 单独一行npx skills add即可用无需额外环境已装 Claude Code / Cursor 等Open-Design 单独 或 Huashu-Design 单独Open-Design 覆盖宽、Huashu-Design 做得深按产出类型选已装 Agent CLI 需要方向决策BWVI → Open-Design 或 BWVI → Huashu-DesignBWVI 1s 定方向执行层按需选既要 Web 多页面 也要动画/原型Open-Design Huashu-Design双执行引擎Web 找 Open-Design、动画找 Huashu-Design团队项目追求系统化管理BWVI → Open-Design Huashu-DesignBWVI 统一决策双引擎执行critique 闭环评分按产出类型选我要…单用搭配决策层一个简单 Landing PageOpen-Design 单独BWVI → Open-Design先让 BWVI 定调iOS / Android App 高保真原型Huashu-Design 单独BWVI → Huashu-Design产品发布动画 / 宣传视频Huashu-Design 单独BWVI → Huashu-Design可编辑 PPT HTML 演示Huashu-Design 单独BWVI → Huashu-DesignDashboard / SaaS / Blog 等复杂 Web 页面Open-Design 单独BWVI → Open-DesignCI/CD 流水线中的设计质量门禁BWVI 单独bwvi critique—设计走查 / 客观评审报告BWVI 单独bwvi critique—以上全部都要BWVI → Open-Design Huashu-Design—参考来源BWVI READMEhttps://github.com/lh123aa/bwvi-design/blob/master/README.mdOpen-Design READMEhttps://github.com/nexu-io/open-design/blob/main/README.mdHuashu-Design READMEhttps://github.com/alchaincyf/huashu-design/blob/master/README.mdHuashu-Design 中文 READMEhttps://github.com/alchaincyf/huashu-design/blob/master/README.zh.md
AI Agent 设计工具:BWVI、Open-Design、Huashu-Design 怎么选、怎么搭
发布时间:2026/5/18 20:31:17
AI Agent 设计工具BWVI、Open-Design、Huashu-Design 怎么选、怎么搭一、三者概述1.1 BWVIBetter Way of Visual Intelligence1.2 Open-Design1.3 Huashu-Design二、三者定位关系三、BWVI 安装与使用3.1 安装3.2 核心命令3.3 决策链说明四、Open-Design 安装与使用4.1 方式一桌面应用免构建4.2 方式二Docker4.3 方式三从源码运行4.4 首次运行4.5 典型使用流程4.6 MCP Server只读五、Huashu-Design 安装与使用5.1 安装5.2 典型命令在 Agent 中对它说5.3 能力一览5.4 核心机制六、关键指标对比6.1 性能基准实测数据6.2 功能维度对比6.3 关键差异速读七、三者组合使用7.1 BWVI 单独使用纯决策 简易出图 7.2 Open-Design 单独使用全能执行引擎 7.3 Huashu-Design 单独使用对话式设计工匠 7.4 BWVI → Open-Design决策 多技能执行 7.5 BWVI → Huashu-Design决策 工匠级执行 7.6 Open-Design Huashu-Design双引擎按任务切换 7.7 BWVI → Open-Design Huashu-Design三者全链路 7.8 全部 7 种组合速查八、选型决策速查参考来源一、三者概述1.1 BWVIBetter Way of Visual IntelligenceBWVI 是一个Agent 原生设计决策协议以 CLI MCP Server 形态运行。它本身不产出像素级设计而是充当 AI Agent 与设计执行之间的决策层——分析任务意图输出结构化设计决策方向、色板、字体、布局、细节交由下游渲染后端执行。输出目标为 Open-Design、Huashu-Design 或内置渲染器。仓库github.com/lh123aa/bwvi-design版本v0.2.1许可证AGPL-3.0核心指标包体积 873KBCJS 单文件冷启动 0msnpx首次产出约 200ms内存占用约 5MB仅依赖 3 个 npm 包完全离线可用1.2 Open-DesignOpen-Design 是一个本地优先的 AI 设计执行引擎也是 Anthropic Claude Design 的开源替代。它不绑定特定 Agent而是自动检测系统 PATH 中已安装的编码 Agent CLI共 16 种将其编排为技能驱动的设计工作流后产出高保真设计制品。提供浏览器端界面Next.js 16与本地守护进程Express SQLite支持 Web 部署。仓库github.com/nexu-io/open-designStars43.7k截至 2026-05许可证Apache-2.0技能数量31 个内置技能27 个原型模式 4 个幻灯片模式设计系统数量129 个源自 awesome-design-md 与 awesome-design-skills支持的 Agent CLIClaude Code、Codex、Devin、Gemini CLI、OpenCode、Cursor Agent、Qwen Code、Qoder、Copilot、Hermes、Kimi CLI、Pi、Kiro、Kilo、Mistral Vibe、DeepSeek TUI以及 BYOK 代理回退Anthropic / OpenAI / Azure / Google Gemini1.3 Huashu-DesignHuashu-Design 是一个HTML 原生的设计 skill安装于 Claude Code 等 Agent 内直接使用。纯对话交互不需要图形界面、不需要 Figma 插件一句话即可产出高保真 App 原型、可编辑 PPT、产品动画 / MP4 / GIF、印刷级信息图等。由独立开发者花叔AlchainHust创建并维护。仓库github.com/alchaincyf/huashu-designStars14.1k截至 2026-05许可证MIT2026-05-14 由个人使用许可重新授权核心理念5 步品牌资产协议、设计方向顾问5 流派 × 20 设计哲学、初级设计师工作流、事实优先验证、反 AI 塑料味规则Agent 兼容性Claude Code、Cursor、Trae、Hermes、OpenClawAgent-agnostic二、三者定位关系BWVI 定义「画什么」→ Open-Design 或 Huashu-Design 负责「画出来」。角色定位类比BWVI设计决策协议决定「画什么」的架构师Open-Design设计执行引擎能「画任何东西」的工厂Huashu-Design设计工匠工作室把「一件事」做到极致的匠人三者在 AI 原生设计流水线中承担不同职责可独立使用也可串联组合。三、BWVI 安装与使用3.1 安装BWVI 无需安装即可通过 npx 直接运行npx bwvi--help如需全局安装npminstall-gbwvi bwvi--help3.2 核心命令# 创建项目npx bwvi init my-projectcdmy-project# 分析任务 → 方向推荐 指纹npx bwvi analyze咖啡品牌 landing page# 展示 10 种设计方向--pick 选择方向npx bwvi showcase--picklanding-warm# 直接出 HTML内置渲染器约 200msnpx bwvi generate咖啡品牌--direct# 10 维客观 5 维主观评审npx bwvi critique index.html# 评分 1-10自动更新指纹npx bwvi feedback8# 品牌列表npx bwvi brand list# 知识块查看npx bwvi knowledge list# 决策管理列表 / 查看 / 回滚npx bwvi checkpoint list npx bwvi checkpoint showidnpx bwvi checkpoint restoreid# 基准测试全部 13 项约 235msnpx bwvi benchmark3.3 决策链说明BWVI 的核心抽象是一条渐进约束的决策链每一步缩小设计空间direction → palette → typography → [information_density] → layout → detail_signature所有决策持久化为 JSON支持追溯与回滚。四、Open-Design 安装与使用4.1 方式一桌面应用免构建从 open-design.ai 或 GitHub Releases 页面下载预构建桌面应用macOS Apple Silicon / Intel x64Windows x64。4.2 方式二Dockergitclone https://github.com/nexu-io/open-design.gitcdopen-design/deploydockercompose up-d访问http://localhost:7456。4.3 方式三从源码运行gitclone https://github.com/nexu-io/open-design.gitcdopen-design corepackenablecorepackpnpm--version# 应输出 10.33.2pnpminstallpnpmtools-dev run web# 前台模式要求 Node ~24 与 pnpm 10.33.x。4.4 首次运行守护进程启动后自动完成以下操作创建./.od/目录含 SQLite 数据库、项目文件夹、制品存储检测系统 PATH 中可用的 Agent CLI加载 31 个技能与 129 个设计系统显示欢迎对话框可选配置 API Key4.5 典型使用流程在浏览器界面输入设计需求系统强制弹出问题表单场景、受众、调性、品牌背景、规模防止盲目出图从 5 个视觉方向中选一或指定品牌设计系统选择技能如web-prototype、saas-landing、mobile-appAgent 在真实文件系统中读写项目文件产出 HTML 制品在沙箱 iframe 预览导出为 HTML / PDF / PPTX / ZIP4.6 MCP Server只读Open-Design 提供 STDIO MCP Server可向任意 MCP 兼容 Agent 暴露项目文件读取、元数据与搜索能力。五、Huashu-Design 安装与使用5.1 安装通过 skills.sh 注册表一行安装npx skillsaddalchaincyf/huashu-design安装后在 Claude Code 中直接对话即可触发。5.2 典型命令在 Agent 中对它说Make a keynote for AI psychology. Give me 3 style directions to pick from. Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable. Turn this logic into a 60-second animation. Export MP4 and GIF. Run a 5-dimension expert review on this design.不限于 Claude Code——Cursor、Trae、Hermes、OpenClaw 等任意支持 markdown-skill 的 Agent 均可使用。5.3 能力一览能力交付物典型耗时交互原型App / Web单文件 HTML · iPhone 真机边框 · 可点击 · Playwright 验证10–15 分钟幻灯片HTML 演示文稿 可编辑 PPTX真实文本框15–25 分钟动画设计MP425fps / 60fps 插值 GIF调色板优化 BGM8–12 分钟设计变体3 并排对比 · 实时参数调节10 分钟信息图 / 数据可视化印刷级排版 · PDF/PNG/SVG 导出10 分钟设计方向顾问5 流派 × 20 哲学 · 推荐 3 方向 · 并发生成演示5 分钟5 维专家评审雷达图 Keep / Fix / Quick Wins 清单3 分钟5.4 核心机制品牌资产协议5 步强制流程当任务涉及特定品牌时技能强制执行① 询问 6 类资产清单 ② 搜索官方渠道 ③ 按资产类型下载每类三条回退路径④ 验证并提取 ⑤ 冻结到brand-spec.md。禁止凭记忆猜测品牌颜色。设计方向顾问回退模式当需求过于模糊时触发——从 5 个设计流派 × 20 种设计哲学中推荐 3 个差异化方向每个方向附带代表作、格式塔关键词、代表设计师并生成三份视觉演示供选择。初级设计师工作流一次性发送完整问题集、将假设与占位符写入 HTML、尽早向用户展示哪怕只是灰色方块、在内容→变体→调参三个节点各展示一次、交付前通过 Playwright 肉眼检查浏览器效果。反 AI 塑料味规则避免紫色渐变 / emoji 图标 / 圆角卡片左框线强调 / SVG 人物 / Inter 字体当展示用 / CSS 剪影代替真实产品图。使用text-wrap: pretty CSS Grid 衬线展示字体 oklch 颜色。六、关键指标对比在了解如何组合之前先看清三者的性能差异和功能侧重。本章数据来源于 BWVI 官方基准测试README 中标注为「实测数据」及各项目 README。6.1 性能基准实测数据指标BWVIOpen-DesignHuashu-Design包体积873 KBCJS 单文件约 500 MBpnpm 37K node_modules约 3.8 MB154 文件冷启动0msnpx无需安装约 30-60spnpm install build0msskill 加载首次产出约 200msgenerate --direct约 10-30sdaemon → Agent → 流式约 30-120sAgent 出初稿¹内存占用约 5 MBheap约 150-300 MBExpress SQLite0无独立进程依赖数量3 个包1200 包0源文件数约 50 个 TS约 740 应用文件 37K node_modules154 个离线能力完全离线有限有限¹ BWVI 基准测试中的「首次产出」测量的是 Agent 开始生成初稿的延迟非最终交付时间。Huashu-Design 各能力的完整交付时间见 5.3 节3-30 分钟不等。6.2 功能维度对比维度BWVIOpen-DesignHuashu-Design产出视觉质量依赖后端高高决策框架结构化决策链 指纹系统问题表单 方向选择器品牌资产协议 方向顾问品牌系统115 品牌129 品牌无内建品牌库运行时搜索App 原型有设备边框有设备边框iPhone 真机边框 状态管理评审体系10 维客观 5 维主观5 维自评审5 维专家评审 雷达图视频 / 动画StageSprite MP4 BGMgpt-image-2 Seedance HyperFramesStageSprite 时间片 60fps BGM设计系统库115 品牌 56 风格 50 蓝图129 设计系统20 设计哲学Agent 集成原生 MCP Server5 tools16 CLI BYOK 代理SkillAgent-agnostic上手速度200ms 产出零配置需安装 Node pnpm 依赖npx skills add 一行可扩展性插件 知识 MD npm CI技能文件夹 设计系统 DESIGN.mdSKILL.md references/ scripts/6.3 关键差异速读从上述两张表可以得出三条结论直接影响后续组合选择BWVI 是「轻量决策器」200ms 极速、零依赖、完全离线。它的价值不在出图在出方向。任何组合中加入 BWVI 都不会增加实质性安装负担。Open-Design 是「重量级工厂」生态最大129 设计系统 / 31 技能、Agent 覆盖最广16 种但首次安装成本高Node ~24 pnpm 1200 依赖。Huashu-Design 是「轻量级工匠」一行安装、零进程、动画和 App 原型最精细但不适合需要 Dashboard / SaaS 等复杂多页面 Web 场景。七、三者组合使用三个工具各自可独立使用亦可两两组合或三者串联。以下逐一说明全部 7 种用法。每个小节按统一结构展开适用情况何时用→核心逻辑为什么成立→ 流程图怎么做→适用边界限制与代价。三者定位关系见第二章指标差异见第六章。可信度标注 官方明确支持BWVI README 直接列出了该组合方式 架构推导成立组合逻辑与官方架构一致但不以独立方案形式出现在文档中组合类型可信度① BWVI 单独 / ② Open-Design 单独 / ③ Huashu-Design 单独单一工具独立使用 各自官方 README 的默认用法④ BWVI → Open-Design / ⑤ BWVI → Huashu-Design决策层 执行层串联 BWVI README 明确列出输出目标⑥ Open-Design Huashu-Design双执行引擎按任务切换 工作流层面的共存无技术桥接⑦ BWVI → Open-Design Huashu-Design决策层 双执行引擎全链路 ④和⑤的逻辑并集BWVI 多后端架构支撑7.1 BWVI 单独使用纯决策 简易出图 适用情况只需要快速确定设计方向、做设计走查、或在 CI/CD 流水线中设置设计质量门禁。也适用于没有安装其他 Agent CLI 的轻量场景——BWVI 零依赖、完全离线。核心逻辑BWVI 的价值不在产出的 HTML 有多精美而在 200ms 内给出有依据的设计方向。对于「只需要知道该用什么配色 / 字体 / 布局」的场景装 Open-Design500MB Node ~24是过度投入。BWVI 对标的是设计决策这个单一环节而非整个设计生产流程。你说需求 │ ▼ bwvi analyze 描述 → 方向推荐 指纹~200ms │ ▼ bwvi showcase --pick 方向 → 预览 10 种方向选一个 │ ▼ bwvi generate 描述 --direct → 内置渲染器直接出 HTML~200ms │ ▼ bwvi critique index.html → 10 维客观 5 维主观评审~150ms适用边界内置渲染器产出的是简单页面不是高保真原型。如果你最终需要复杂 Dashboard / 多页面网站 / 可点击 App 原型BWVI 单独不够——它只能做决策层的事执行层还得交给 Open-Design 或 Huashu-Design。7.2 Open-Design 单独使用全能执行引擎 适用情况需要高保真 Web 页面Dashboard / SaaS Landing / Blog / Pricing Page / 移动端页面等且系统已安装可用的 Agent CLI如 Claude Code。团队中有多品类 Web 设计需求时Open-Design 的 31 个技能覆盖面最广。核心逻辑Open-Design 是这个赛道里生态最大的执行引擎——129 个品牌设计系统、31 个技能横跨设计 / 营销 / 运营 / 工程等 9 个领域、支持 16 种 Agent CLI。如果你已经有 Claude Code 或 Cursor 等 AgentOpen-Design 就是把它的设计能力「专业化」的最快路径。启动 Open-Design 守护进程 → 浏览器打开 localhost:7456 │ ▼ 在聊天界面输入设计需求 │ ▼ 填写问题表单场景 / 受众 / 调性 / 品牌 / 规模← 强制步骤 │ ▼ 选择技能31 选 1 视觉方向5 选 1或品牌设计系统129 选 1 │ ▼ Agent 在工作目录读写文件生成 HTML 制品~10-30s 出初稿 │ ▼ 沙箱 iframe 预览 → 导出 HTML / PDF / PPTX / ZIP适用边界首次安装成本高——需要 Node ~24 pnpm 1200 依赖冷启动约 30-60s。另外Open-Design 的动画能力依赖于外部模型Seedance / HyperFrames没有自己的 StageSprite 动画引擎。如果你的核心诉求是产品动画或 App 原型真机边框Huashu-Design 更合适。7.3 Huashu-Design 单独使用对话式设计工匠 适用情况在 Claude Code或 Cursor / Trae / Hermes / OpenClaw中直接对话出设计尤其侧重 App 原型、产品动画、幻灯片、信息图这四类高价值单品。安装一行命令不需要图形界面。核心逻辑Huashu-Design 的哲学是「打字回车一份能交付的设计」。它的 StageSprite 动画引擎和 iPhone 15 Pro 真机边框在同类工具中没有替代品。如果你已经在用 Claude Code加装这个 skill 的边际成本为零。另外它是 MIT 许可证可商用。npx skills add alchaincyf/huashu-design ← 一次性安装 │ ▼ 在 Claude Code 中直接对话 做一个咖啡品牌 landing page3 个方向让我选 把这个逻辑做成 60 秒动画导出 MP4 和 GIF │ ▼ Skill 内部执行方向顾问 → 品牌资产搜集 → Junior Designer 工作流 │ ▼ 交付物HTML / MP4 / GIF / 可编辑 PPTX / PDF3-30 分钟适用边界从输入到完整交付需要 3-30 分钟不是实时预览。复杂 Web 页面Dashboard / SaaS 后台不是它的强项——31 个技能覆盖面的广度不如 Open-Design。另外无品牌素材时即完全从零做设计质量会降到 60-65 分Huashu-Design README 自身的评估。7.4 BWVI → Open-Design决策 多技能执行 适用情况先快速定方向、配色、字体再做高保真多页面产出。适合需要结构化决策记录 高质量多页面 Web 产出的品牌项目。BWVI 将方向决策从 Open-Design 的问题表单中前移做到「先决策再执行」。核心逻辑BWVI 做「理性决策」200ms、可回滚、指纹学习Open-Design 做「感性执行」31 技能、129 设计系统。两者解耦后各司其职——决策层只管方向对错执行层只管产出质量。BWVI 的 fingerprint 系统会记住你的偏好用越多越准。你说需求 │ ▼ ① bwvi analyze 需求描述 → 方向推荐 设计指纹~200ms ② bwvi showcase --pick 方向 → 选定方向 ③ bwvi generate 需求描述 → 输出决策 JSON含 palette / typography / layout │ ▼ ④ 将决策 JSON 作为设计约束在 Open-Design 中输入需求 ⑤ Open-Design Agent 按决策参数渲染高保真页面~10-30s │ ▼ ⑥ bwvi critique index.html → 自动化 10 维评审 ⑦ bwvi feedback 8 → 评分更新指纹下次更准适用边界BWVI 和 Open-Design 之间没有 API 级自动桥接——第④步是人工操作将决策 JSON 内容作为设计约束输入到 Open-Design 中不是自动串联。另外如果你只需要一个简单 Landing Page这个组合是过度工程——直接用 Open-Design 单独即可。7.5 BWVI → Huashu-Design决策 工匠级执行 适用情况最终产物是动画 / App 原型 / 幻灯片 / 信息图Huashu-Design 的强势品类但需要 BWVI 先做结构化决策避免「方向没想清楚就开始画」。中文项目尤其合适——BWVI 的决策链用中文分析任务Huashu-Design 的 SKILL.md 也是中文编写。核心逻辑BWVI 解决「从 0 到 1 的方向迷茫」——10 种方向、115 品牌、56 风格构成结构化的决策空间Huashu-Design 解决「从 1 到 100 的工匠打磨」——StageSprite 动画引擎、iPhone 真机边框、5 维专家评审构成精细化的执行能力。两者的中文原生支持也让中文用户没有语言转换损耗。你说需求 │ ▼ ① bwvi analyze 需求描述 → 方向 品牌分析 指纹~200ms ② bwvi generate 需求描述 → 输出决策 JSON │ ▼ ③ 在 Claude Code 中对 Huashu-Design 下指令附上 BWVI 决策结果 基于这个配色和字体方案做一个 iOS 原型 / 一段产品动画 │ ▼ ④ Huashu-Design 执行品牌资产搜集 → Junior Designer 工作流 → Playwright 验证 ⑤ 交付 HTML / MP4 / PPTX适用边界和 7.4 一样BWVI 的决策 JSON 到 Huashu-Design 之间是人工传递没有自动化桥接。另外BWVI 的品牌系统115 个和 Huashu-Design 的品牌资产协议运行时搜索 下载是两套独立的品牌处理机制——前者是静态数据库后者是动态搜索流程。两者叠加使用时不会冲突但也不是无缝衔接。7.6 Open-Design Huashu-Design双引擎按任务切换 ⚠️ 此组合为工作流层面的共存使用非 API 级技术集成——两者之间没有数据桥接或互调接口。你需要在不同任务中手动选择用哪个工具。适用情况项目中既有复杂 Web 页面需求Dashboard / SaaS Landing / Blog又有动画 / App 原型 / 幻灯片需求。两个执行引擎各做各的不互相替代。核心逻辑Open-Design 和 Huashu-Design 的擅长领域几乎不重叠——OD 的 31 个技能覆盖的是「品类广度」设计 / 营销 / 运营 / 工程 / 产品 / 财务 / 人事等 9 个领域HS 的能力集中在「单品深度」动画引擎的时间片模型、App 原型的真机边框、信息图的印刷级排版。OD 做不了 HS 的 StageSprite 动画HS 做不了 OD 的 Kanban Board / Finance Report / HR Onboarding 等垂直技能。两者不是竞品是互补。Open-Design 的 README 也明确将 Huashu-Design 列为设计哲学来源包括问题优先工作流、品牌资产协议、反 AI 塑料味检查清单均受其启发。日常 Web 页面需求 │ ▼ Open-Design ← Saas Landing / Dashboard / Blog / Pricing Page / 移动端页面 31 技能129 设计系统沙箱预览 动画 / App 原型 / 幻灯片需求 │ ▼ Huashu-Design ← 产品动画MP4MP3/ iOS 原型 / HTML 幻灯片 / 信息图 StageSprite 引擎60fps 输出可编辑 PPTX适用边界两个工具独立安装、独立运行没有统一的决策入口或共享的设计语言。如果你需要「同一个品牌色被 OD 和 HS 产出的页面同时使用」你得自己确保两边用了一致的配色参数——没有一个中央决策层来做这件事。这也正是 7.7 三者全链路要解决的问题。7.7 BWVI → Open-Design Huashu-Design三者全链路 ⚠️ 此组合是7.4BWVI → Open-Design与 7.5BWVI → Huashu-Design的逻辑并集——BWVI 的架构天然支持多渲染后端README 明确列出 4 种后端内置 / Open-Design / Huashu-Design / 本地 Agent因此将决策 JSON 同时用于两个执行层在架构上完全一致。但三者未在官方文档中以单一流水线形式出现属于基于架构推导的工作流组合而非预集成的方案。适用情况复杂商业项目——品牌统一风格的 Web 多页面 App 高保真原型 产品发布动画 设计走查报告需要从统一决策到多品类执行的全覆盖。核心逻辑7.6 的痛点是「两个执行引擎没有统一的决策入口」——OD 产出和 HS 产出可能用了不同的配色、字体、调性。BWVI 补上这个缺口所有产出共享同一份决策 JSONpalette / typography / layoutOpen-Design 覆盖「广度」31 技能 × 129 设计系统Huashu-Design 覆盖「深度」动画 / 原型 / 幻灯片BWVI critique 对所有产出做统一评审并反馈回指纹系统——形成「决策 → 双轨执行 → 评审 → 反馈 → 更精准决策」的闭环。┌── 你说需求 ──┐ │ │ ▼ ▼ ┌──────────────────────────────┐ │ ① BWVI │ │ analyze → 方向色板字体 │ │ generate → 决策 JSON │ │ ~200ms离线零依赖 │ └─────────────┬────────────────┘ │ 决策 JSON共享 │ ┌───────────────┼───────────────┐ │ │ │ ▼ ▼ ▼ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ ② Open-Design │ │③ Huashu-Design│ │ BWVI critique │ │ Web 页面 │ │ App 原型 │ │ 评审 评分 │ │ Dashboard │ │ 产品动画 │ │ 反馈回指纹 │ │ Landing Page │ │ HTML 幻灯片 │ │ │ │ ~10-30s │ │ 3-30min │ │ ~150ms │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ └───────┬───────┘ ▼ 最终交付物合集 Web 页面 App 原型 动画 幻灯片 设计走查报告适用边界这是 7 种组合中复杂度最高的——你需要同时维护 BWVI、Open-Design、Huashu-Design 三个工具。BWVI 到两个执行层之间目前都是人工传递决策参数没有自动化管线。另外对于中小项目比如只做一个 Landing Page 或一段产品动画7.4 或 7.5 的两两组合已经足够三者全链路是过度投入。仅在「品牌统一风格 多品类产出 设计走查」三者同时成立时才值得上。7.8 全部 7 种组合速查编号组合核心逻辑典型总耗时适合谁①BWVI 单独只要方向不要工厂 1s设计走查 / CI 门禁 / 轻量决策②Open-Design 单独把已有 Agent 的设计能力专业化首次安装 5min 产出 10-30s有多页面 Web 需求的团队③Huashu-Design 单独打字→回车→交付安装 10s 产出 3-30minClaude Code 用户 / 要动画和原型的个人④BWVI → Open-Design200ms 定方向 → 工厂级执行BWVI 1s OD 10-30s品牌项目 / CI/CD 设计门禁⑤BWVI → Huashu-Design200ms 定方向 → 工匠级打磨BWVI 1s HS 3-30min要动画原型的品牌项目⑥Open-Design Huashu-Design广度引擎 深度引擎各司其职视任务既有 Web 需求又有动画/App 需求的团队⑦BWVI → Open-Design Huashu-Design统一决策 双轨执行 闭环评审决策 1s 执行 10s-30min追求品牌一致性的复杂商业项目八、选型决策速查详细使用链路见第七章全部 7 种组合的逐一说明本节为速查结论。按你的起点选你的情况推荐组合说明还没装任何 Agent CLIHuashu-Design 单独一行npx skills add即可用无需额外环境已装 Claude Code / Cursor 等Open-Design 单独 或 Huashu-Design 单独Open-Design 覆盖宽、Huashu-Design 做得深按产出类型选已装 Agent CLI 需要方向决策BWVI → Open-Design 或 BWVI → Huashu-DesignBWVI 1s 定方向执行层按需选既要 Web 多页面 也要动画/原型Open-Design Huashu-Design双执行引擎Web 找 Open-Design、动画找 Huashu-Design团队项目追求系统化管理BWVI → Open-Design Huashu-DesignBWVI 统一决策双引擎执行critique 闭环评分按产出类型选我要…单用搭配决策层一个简单 Landing PageOpen-Design 单独BWVI → Open-Design先让 BWVI 定调iOS / Android App 高保真原型Huashu-Design 单独BWVI → Huashu-Design产品发布动画 / 宣传视频Huashu-Design 单独BWVI → Huashu-Design可编辑 PPT HTML 演示Huashu-Design 单独BWVI → Huashu-DesignDashboard / SaaS / Blog 等复杂 Web 页面Open-Design 单独BWVI → Open-DesignCI/CD 流水线中的设计质量门禁BWVI 单独bwvi critique—设计走查 / 客观评审报告BWVI 单独bwvi critique—以上全部都要BWVI → Open-Design Huashu-Design—参考来源BWVI READMEhttps://github.com/lh123aa/bwvi-design/blob/master/README.mdOpen-Design READMEhttps://github.com/nexu-io/open-design/blob/main/README.mdHuashu-Design READMEhttps://github.com/alchaincyf/huashu-design/blob/master/README.mdHuashu-Design 中文 READMEhttps://github.com/alchaincyf/huashu-design/blob/master/README.zh.md