开源Claude Design本地部署指南：免费自托管AI UI设计工具

大多数创作者只使用Claude Design的官方云版本，面临严格的速率限制和付费订阅。很少有人知道有一个完全开源的Claude Design复刻版，可以在本地PC上部署，实现无限设计生成，无需网络限制或计费。本教程涵盖自托管开源Claude Design的完整环境配置、源码部署、模型对接和常见故障排除，每一步都配有可执行代码块。

1. 自托管开源Claude Design的核心优势

无限生成：本地运行无每日请求上限，无Token计费。
数据隐私：所有设计稿、提示词和图片素材存储在本地，不上传第三方服务器。
自定义模型对接：兼容本地开源视觉模型、Ollama和远程LLM API。
功能可定制：修改源码添加品牌模板、批量导出和团队协作模块。
低硬件门槛：8GB显存的消费级GPU流畅运行，甚至支持纯CPU部署。

2. 部署前环境准备

2.1 依赖安装

该开源项目依赖Python 3.10+、Git和Node.js。根据操作系统运行以下安装命令。

Windows（PowerShell管理员）：

# 安装winget依赖
winget install Python.Python.3.10 Git.Git OpenJS.NodeJS.LTS
# 验证安装版本
python --version
git --version
node -v
npm -v

macOS（终端）：

# 如缺少Homebrew则先安装
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 安装所需运行时
brew install python@3.10 git node

Linux Ubuntu/Debian：

sudo apt update && sudo apt install python3.10 python3-pip git nodejs npm -y

2.2 GPU加速设置（推荐）

如果你有NVIDIA显卡，安装CUDA工具包加速图像渲染：

# 安装支持CUDA的PyTorch
pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121

3. 克隆开源仓库并安装项目依赖

3.1 拉取源码

创建空文件夹并克隆官方开源仓库：

# 创建工作目录
mkdir claude-design-local && cd claude-design-local
# 克隆源码仓库
git clone https://github.com/open-claude-design/claude-design.git
cd claude-design

3.2 后端Python依赖安装

# 创建独立虚拟环境避免版本冲突
python3 -m venv venv
# 激活虚拟环境（Windows）
venv\Scripts\activate
# 激活虚拟环境（macOS/Linux）
source venv/bin/activate
# 安装所有后端依赖
pip install -r requirements.txt

3.3 前端Web构建

# 进入前端文件夹
cd web
# 安装npm包
npm install
# 构建静态前端文件
npm run build

4. 模型配置：对接本地和远程视觉模型

开源Claude Design默认不嵌入模型，需要在配置文件中设置模型访问。

4.1 修改核心配置文件

# 打开配置文件进行编辑
cp config.example.yaml config.yaml

编辑config.yaml设置模型来源，示例Ollama本地模型配置：

model_provider: ollama
vision_model: llama3.2-vision:11b
api_base: http://127.0.0.1:11434
api_key: dummy-key
max_image_size: 1024
render_batch: 4

4.2 通过Ollama拉取本地视觉模型

如果使用Ollama作为模型后端，启动服务前运行此命令下载视觉模型：

ollama pull llama3.2-vision:11b

5. 启动本地服务并访问Web界面

5.1 启动后端服务

保持虚拟环境激活状态，执行：

# 启动后端API服务
python main.py --host 0.0.0.0 --port 7890

5.2 访问设计面板

打开浏览器访问http://127.0.0.1:7890，功能完整的开源Claude Design界面将加载。你可以输入UI设计提示词、上传参考草图、生成页面布局，并在本地导出PNG/SVG设计文件，无任何网络限制。

可直接在本地工具中输入的实际设计提示词示例：

设计一个极简AI工具落地页，移动端优先布局，蓝色科技调，包含功能卡片区、下载按钮和页脚版权信息。输出清晰的Figma风格分层设计。

6. 常见新手陷阱及修复命令

陷阱1：端口7890被占用，服务启动失败

检查占用端口并终止进程：

# Windows
netstat -ano | findstr "7890"
taskkill /F /PID [目标PID号]

# macOS/Linux
lsof -i :7890
kill -9 [进程ID]

陷阱2：图像生成黑屏，模型连接错误

重启Ollama并重新加载服务：

ollama stop llama3.2-vision:11b
ollama start
# 重新运行后端
python main.py

陷阱3：npm构建后前端页面空白

重新安装前端依赖：

cd web
rm -rf node_modules package-lock.json
npm install && npm run build

7. 长期使用的高级优化

开机自启服务：编写简单的启动脚本，让PC开机后自动运行后端。
批量导出脚本：添加Python脚本批量导出所有生成的设计稿到本地文件夹：

# 批量导出所有设计稿示例
import os
import shutil

export_dir = "./export_designs"
source_dir = "./static/output"
os.makedirs(export_dir, exist_ok=True)

for file in os.listdir(source_dir):
    if file.endswith((".png", ".svg")):
        shutil.copy2(os.path.join(source_dir, file), export_dir)
print("所有设计文件导出成功")

局域网共享访问：修改启动命令，让同一Wi-Fi下的其他设备也能访问你的设计工具：

python main.py --host 0.0.0.0 --port 7890

其他设备通过http://[你的本地IP]:7890访问。

常见问题

开源Claude Design需要强大的GPU吗？

不需要。虽然推荐8GB以上显存的GPU以获得最佳性能，但该项目支持纯CPU部署。CPU模式下生成速度较慢，但功能完整。RTX 3060等消费级GPU甚至笔记本GPU都能很好地处理大多数设计任务。如果本地机器GPU性能不足，也可以将模型推理卸载到局域网中的远程Ollama服务器。

开源版本与官方Claude Design功能对比如何？

开源复刻版涵盖了核心设计生成工作流——文本生成UI、参考草图上传和设计导出（PNG/SVG）。然而，官方Claude Design云版本提供协作编辑、版本历史和高级设计模板等额外功能。对于主要需要AI驱动UI生成的个人创作者和小团队，开源版本完全够用。

可以用自己的品牌风格自定义生成的UI设计吗？

可以。由于源码完全开放，你可以修改配置文件中的提示词模板、调色板和布局预设。还可以将自定义品牌素材（Logo、字体、配色方案）添加到静态资源文件夹，生成管道会自动融入。高级用户可以在自己的设计数据集上微调底层视觉模型，以获得品牌专属输出。

下一篇： 一个Claude Code，两种角色：无需Codex也能写代码和审代码 →