前不久Anthropic公司推出了自己的AI视觉设计工具Claude Design，通过对话就能让AI完成项目的UI设计。最近发现一款对标Claude Design的开源工具Open Design，体验了一下非常惊艳，今天就以电商项目的设计为例，给大家分享下它的使用！
Open Design简介
Open Design是一款开源、agent-native的Claude Design/Figma替代品，上线不到两周就收获了40k+star。
Open Design的主要特性如下：
- 支持16种Coding Agent CLI：能自动检测你安装的Agent CLI，直接调用本地CLI进行设计，支持Claude Code、Codex、Qoder等CLI。
- 可自定义AI模型：如果未安装Agent CLI，可以直接配置自己的API Key来调用大模型。
- 内置72套设计系统：各种风格随意切换，涵盖Linear、Anthropic、Apple、Cursor、Supabase、Figma等设计系统。
- 内置31个可组合的skills：覆盖了从设计原型（网页/App/仪表盘/动画）到演示文稿（杂志风PPT/周报），横跨设计、营销、产品、工程、财务、HR等9大职能场景。
- 媒体生成：支持图像（gpt-image-2）、视频（Seedance 2.0）、动态图形（HyperFrames）的生成。
- 视觉方向：支持5套精选流派，包括编辑杂志风、极简现代、温暖柔和、科技实用、粗野主义。
- MCP服务调用：支持作为MCP服务调用，Claude Code通过MCP可以直接读取Open Design中的设计文件。
下面是Open Design使用过程中的效果图，还是挺炫酷的！
安装及配置
Open Design支持Windows、MacOS、及pnpm命令安装，这里以Windows下的安装为例。
- 首先我们可以去Open Design的官网下载安装包，我这里使用的是目前最新的
0.8.0-preview版本，下载地址：github.com/nexu-io/ope...
- 下载完成后进行安装，安装完毕双击
Open Design.exe文件运行，可以通过右上角的设置按钮，将界面语音设置为简体中文；
- 首次运行时Open Design会扫描你安装在PATH路径下的Agent CLI，我这里安装的是Claude Code，点击测试没问题后就可以开始使用了。
这或许是一个对你有用的开源项目，mall项目是一套基于 SpringBoot3 + Vue3 的电商系统（Github标星60K），后端支持多模块和微服务架构，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！
- Boot项目：github.com/macrozheng/...
- Cloud项目：github.com/macrozheng/...
- 文档网站：www.macrozheng.com
项目演示：
使用
这里以mall项目前台商城中首页、分类、购物车、我的四个功能的页面设计为例，来介绍下Open Design的使用。
- 首先我们得整理下需求，可以通过Chrome插件（例如GoFullPage）将项目的界面截长图下载下来；
- 之后将这四个页面的截图放到可以识别图片的AI工具中去，让AI帮助我们根据图片整理需求，并生成markdown格式的需求文档保存下来；
- 点击Open Design左上角的加号按钮创建项目，选择好
设计体系和精度后即可创建；
- Open Design中的设计体系非常丰富，大家选择自己喜欢的界面风格即可，可以点击左侧
设计体系按钮来查看所有设计体系的效果；
-
然后在Open Design中输入如下提示词：
我想设计一个电商app，包括首页、分类、购物车、我的模块功能，具体需求参考上传的markdown文档。
-
然后Open Design会提供一个表单让你填写，包括视觉方向、品牌上下文和模块数量等内容；
- 填写完成之后Open Design就会开始设计了，设计完成后我们可以在设计文件里找到这些页面，都是html格式；
- 打开首页对应的html，直接预览看下，效果还是挺不错的，还原度也挺高；
- 点击顶部的
Tweaks按钮，还可以进行配色的切换，可以选择你喜欢的配色；
- 如果有需要修改的地方，可以点击评论按钮，然后选择对应组件提需求即可，Open Design会按要求修改；
- 界面设计完成后，我们如果想让Claude Code根据设计好的页面开发项目怎么办，这需要我们给Claude Code添加Open Design的MCP服务，打开设置里的
MCP服务器面板即可找到对应的命令；
- 之后我们就可以在Claude Code中看到Open Design的MCP服务了；
- 之后我们输入提示词让Claude Code查看目前Open Design中打开的是哪个项目，Claude Code会调用open-design的MCP来获取项目信息；
- 接下来输入如下提示词，让Claude Code列个开发计划；
arduino
我想根据open design里的设计稿，开发一个前端项目，给我列个开发计划，存放在当前目录下- 由于Claude Code提供的前端技术栈是React的，我让它改成了Vue3，最后我看着计划没问题了，就让它进行开发了，具体对话列表如下；
- 最终Claude Code根据Open Design里的设计稿，完成了所有页面的开发；
- 最终四个页面的效果如下，完全按照设计稿进行了开发，界面效果也是很不错的；
- 再看下生成的前端代码，代码结构和逻辑都很清晰，一个我的页面，里面的各个部分都封装成了组件；
- 我这里的开发和设计全程都是使用的
deepseek-v4-pro模型，不得不说，这个模型无论是Token输出速度还是性价比，体验下来都非常不错，用了接近2000wtoken，输入缓存命中有接近90%，花费了6块钱！
总结
今天给大家分享了下Open Design的使用，这款AI设计工具甚至可以改变我们的开发流程，前端工作交给它和Claude Code就可以了，感兴趣的小伙伴可以尝试下它！随便给Claude Code发个需求让它开发项目，往往效果达不到我们的预期，需要我们先设计好功能，然后把具体页面提交给Claude Code后让它进行开发，这才是一个合理的开发流程。