今天刷视频刷到一个UP主说：open-design这个开源仓库撕碎了Claude-design的底裤

我的第一反应：这么牛逼？我要高低尝尝咸淡。

正好，我的个人项目hermes-yachiyo刚发布v0.1 ，UI这部分我一直都不太满意，让我们来试试吧！

1. 先准备Node 24和pnpm

open-design 要求Node~24以及pnpm 10.33.x。 官方建议如果用nvm的话，优先执行：

nvm install 24
nvm use 24
corepack enable

2. clone open-design

mkdir -p ~/dev
cd ~/dev

git clone https://github.com/nexu-io/open-design.git
cd open-design

3. 安装依赖并且启动

corepack pnpm --version
pnpm install
pnpm tools-dev run web

启动之后的WebUI长这样：

配置好你的CLI，你可以用codex CLI，或者Hermes都可以。我这里用的opencode + 小米 mimo模型，因为最近有百万亿token发放计划，白嫖了很多。昨天在使用过程中发现了很多问题，比如直接用API模式会无法支持tool_call和Generate file等功能，用CLI又只能操作2分钟，超过2分钟的Thinking没有输出的话会直接报错终止，下面我会把解决办法一一罗列：

现阶段只推荐使用CLI，为了完美使用小米模型，建议安装opencode

打开一个终端，输入指令：

重装Command Line Tools

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install

安装opencode

在弹出安装窗口之后安装，装完之后安装opencode

brew install anomalyco/tap/opencode
opencode --version

能够正常返回opencode的版本号就说明安装成功了。

配置opencode 使用Xiaomi MiMo

创建配置目录：

mkdir -p ~/.config/opencode

编辑配置：

vim ~/.config/opencode/opencode.json

填入下面的内容，请注意：把你的BaseURL、model id换成小米平台实际上给你的值：

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "xiaomi": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "Xiaomi MiMo",
      "options": {
        "baseURL": "从下面链接拿到的小米模型的BaseURL",
        "apiKey": "从下面链接拿到的小米模型的apikey"
      }
    }
  }
}

这里备注一点：如果你是用的小米的token plan的话，BaseURL和API模式不太一样，小米token plan的说明文档参考这个链接：小米 mimo token plan

解决open-design的超时问题

配置完了之后，进入open-design的目录下进行重启

但是基于昨天我自己使用发生的超时bug，在查阅了官方的issue，找到了解决方案：

我们将超时时间通过外部变量注入的方式进行修改，写进~/.zshrc:

echo 'export OD_CHAT_RUN_INACTIVITY_TIMEOUT_MS=1800000' >> ~/.zshrc
source ~/.zshrc

这段的意思就是30分钟以内的处理都不做超时中断。

如果你本地的node版本没有必要默认设置为v24的话，以后的启动逻辑就是这样的：

nvm use 24
cd ~/dev/open-design
pnpm tools-dev run web

进入之后，划到最下面，查看截图的1和2圈起来的部分：

我们可以看到，opencode已经生效了，并且在下面选择model的时候也可以看到小米的模型：

选择mimo-v2.5-pro之后，点击test：

可以返回内容，那么就打通链路了！

左上角创建项目：

创建项目名，设计系统（模型套用哪一套品牌/产品的视觉规范。），Fidelity（原型精细度， wirefreame就是低保真线框图，另一个就是高保真原型）

我们做个实验：

创建一个自由发挥的项目，实际使用中你可以参考这里面提供的几十种成熟的品牌设计方案。这里我们只是做个简单的例子：

接下来就可以直接对话开始设计方案了：

还会要求你回答一些能够合理定位的问题：

还可以给你挑选视觉包：

等待运行结束之后，看看结果：

加装了loading page：

加载完成的效果：

动效也做的很不错，详细文章页：

好叻，学会了也开始你的设计之旅吧！

PS：透露一下Yachiyo的新UI（就是通过这个技术结合做的）：