Open Design 是一款开源且支持本地优先运行的 AI 驱动界面设计与原型生成工具，旨在成为 Anthropic 的 Claude Design 的开源平替方案。它解除了模型绑定限制，通过连接用户本地已安装的 11 种代码智能体（如 Claude Code、Cursor、Gemini CLI 等）或兼容 OpenAI 格式的第三方 API（BYOK），将大模型转化为专业的 UI/UX 设计师。平台内置 31 种专业设计场景模块（覆盖网页原型、SaaS 落地页、移动端 App、数据面板、演示文稿等）以及 129 套顶级品牌的设计系统。用户只需输入自然语言需求，系统将利用交互问卷确认设计方向，由 AI 自动生成带有沙盒实时预览的代码与界面，并支持一键导出为 HTML、PDF、PPTX 和 ZIP 等格式。
功能列表
- 多模型与本地智能体支持：自动检测并接入本地环境变量中的 11 种 AI 编程客户端（包括 Claude Code、Cursor Agent、Gemini CLI、GitHub Copilot CLI 等），或通过自带密钥模式（BYOK）接入任何兼容 OpenAI API 格式的大模型。
- 31 种开箱即用的设计技能（Skills）：内置网页原型、SaaS落地页、管理仪表盘、手机 App、动态页面、演示文稿（PPT）等海量场景模板，一键切换 AI 的输出形态。
- 129 套内置品牌设计系统：提供如 Apple、Stripe、Vercel、Notion、Figma 等全球知名大厂和产品的全套设计系统规范，一键应用即可获得专家级配色、排版和交互基调。
- 精准需求交互问卷（Discovery Form）：在 AI 开始执行代码前，强制弹出多选问卷确认目标受众、视觉基调、尺寸约束等基础信息，消除 AI 的“盲目猜测”，避免反复返工。
- 沙盒实时渲染与多格式导出：生成的 UI 代码将在安全的 iframe 沙盒环境中实时渲染预览。支持直接将生成的项目导出为 HTML、支持打印排版的 PDF、PPTX 文件以及完整的源码压缩包（ZIP）。
- 自带 5 大视觉风格流派：在没有明确品牌参考时，提供极简现代、技术实用主义、柔和治愈等 5 大预设风格库，并附带明确的色彩和字体定义参数。
- 五维度自我纠错与审查：AI 模型输出结果前，必须遵循 5 个维度的客观自我打分（设计理念、视觉层级、细节执行等），得分合格后才呈递结果，从机制上杜绝粗制滥造的“AI感”。
- 无缝衔接 Claude Design 历史导出：支持将从 Anthropic 官网直接导出的原型 ZIP 压缩包拖拽导入，读取历史环境后在本地继续完成编辑操作。
使用帮助
一、 环境要求与准备
Open Design 是基于 Web 框架和本地后端守护进程构建的工具系统，因此在使用之前，您必须在本地计算机上搭建基础运行环境：
- Node.js: 需保证系统安装 Node.js 24 或相近的最新版本（建议通过 nvm / fnm 工具进行版本切换）。
- 包管理工具 pnpm: 项目强依赖 pnpm（版本需为 10.33.x 系列）。您可以通过在终端执行
corepack enable命令，而后运行corepack pnpm --version验证环境。 - AI 底座准备：您可以准备诸如 DeepSeek、OpenRouter 或自定义本地 vLLM 兼容 OpenAI 标准的 Base URL 与 API Key（自带密钥）；也可以提前全局安装 Claude Code 或 Cursor CLI 等本地编程代理工具。
二、 详细安装流程
请打开电脑的终端（Terminal 或命令提示符），按顺序输入以下命令进行安装：
- 下载项目源代码：
使用 Git 将项目代码克隆至本地并进入文件夹。git clone https://github.com/nexu-io/open-design.git cd open-design - 启用核心包管理与安装依赖：
corepack enable pnpm install等待进度条走完，系统将自动拉取包括前端工作台和后端守护程序的全部依赖包。
- 启动 Open Design 本地服务：
pnpm tools-dev run web启动成功后，终端面板上会打印出 Web 端的本地访问地址（如
http://localhost:3000）。复制该链接到浏览器中打开即可进入操作界面。首次启动时，程序会在本地自动生成一个.od/隐藏文件夹，用于储存 SQLite 数据库以保存您的历史对话与进度。
三、 核心功能操作与工作流指引
步骤 1：配置 AI 驱动引擎与工作流选项
进入网页端首页，左侧为您展示所有的工具栏。如果您未安装任何受支持的本地 CLI，系统会弹出“欢迎界面（Welcome）”。您可以选择 BYOK（自带密钥模式），只需将兼容 OpenAI 格式的接口地址、对应的调用模型（如 gpt-4o）以及 API Key 粘贴进去。这确保了不论何种网络环境，您都能连通 AI。
步骤 2：选择“设计技能”与“设计系统”
在输入对话框上方有两个非常关键的下拉菜单卡片：
- 技能（Skill）选择：此处定义您希望输出什么样的产品形态。例如选择
saas-landing可生成落地长页，选择mobile-app会调用自带的 iPhone 15 Pro 边框并生成移动端组件，选择guizang-ppt则会进入演示文稿模式。 - 系统（Design System）选择：此处决定您 UI 界面的基础视觉特征。下拉菜单中涵盖了
stripe、vercel、linear-app等多达 129 种规范，一键点击即可继承对应厂牌的设计哲学。
步骤 3：提交描述与填写“发现问卷”（Discovery）
在底部输入框用简短的话语描述目标，例如：“帮我生成一个包含注册流程的社交工具 App 首页”。
回车发送后，AI 会被系统“截停”。随后屏幕中间会弹出一个包含受众群体、视觉情感、色调要求等选项的动态表单。请根据需要勾选（耗时通常不超过一分钟），该机制能强制 AI 收敛想象域，确保生成的代码极具专业针对性。
步骤 4：实时查阅代码生成与成果渲染
问卷提交后，界面会发生如下变化：
- Todo Progress（待办追踪卡）：屏幕左侧面板会立刻以卡片形式流水线打印 AI 的行为（例如正在解析 CSS、正在书写 HTML 结构、正在测试动态效果等）。
- Sandboxed Preview（沙盒渲染窗口）：右侧主要工作区是一个包含安全隔离性质的 iframe。当底层 HTML 和 CSS 构建完毕后，该区域会实时加载渲染出的图形化界面。您可以看到高度保真的阴影、交互及响应式效果。
步骤 5：无缝修改与文件导出
- 若需要局部修改界面，无需离开当前页面，直接在聊天框内输入要求（例如：“将大标题字体变小，并将背景更换为暗色模式”），AI 会根据上下文在沙盒中实时替换更新。
- 点击界面右上角的导出按钮。若生成的是页面原型，您可以点选
Export HTML或Export ZIP下载包含了所有本地化样式依赖的开发压缩包；若生成的是幻灯片，还支持点击Export PPTX/PDF获取原生的办公演示文档供公司会议使用。项目数据会自动持久化存储于本地，关机重启后进度无损恢复。
应用场景
- 产品经理与设计师的快速低成本原型构建
无需精通复杂的 Figma 连线技巧，通过一句话描述加上问卷筛选，即可在几分钟内生成极具真实感、自带大厂品牌视觉风格（如 Apple 或 Vercel 风格）的高保真网页或手机 App 可交互原型，极大提高需求文档宣发与团队内部评审效率。 - 全栈开发者与工程师的前端提效
后端或全栈开发者往往欠缺高超的设计排版能力。他们可以直接在 Open Design 中输入要实现的功能需求，通过选择自带的前端框架技能模块，将 AI 生成的干净清爽、遵循专业设计系统规范的 HTML 和 CSS 源码以 ZIP 格式全盘导出，用于真实生产环境的二次开发。 - 市场营销与商业化推广物料生成
通过选择 “deck mode”（幻灯片模式）和 “Social Carousel”（社媒轮播图模式），营销人员仅需提供文案大纲，AI 就能自动配比文字大小、生成具备高级动画效果的在线杂志风幻灯片或社交平台多格卡片，支持直接导出为 PDF 用于商务投递或客户汇报。 - 敏捷团队的日常运营与汇报材料
包含 Kanban-board（看板）、Finance-report（财务报表）及 Meeting-notes（会议纪要）等多项偏内部管理的独立生成模块，团队成员可以低成本将干瘪的文本瞬间转变为数据大屏展示板、精美财务单据页面等功能性办公资产。
QA
- Open Design 与 Anthropic 官方的 Claude Design 有何主要区别？
官方的 Claude Design 是闭源、付费且仅限云端特定模型使用的工具；而 Open Design 是全开源、本地优先运行的系统架构。它不仅继承了沙盒预览和渲染逻辑，更允许您任意接入本地部署的 AI 代码智能体或通过代理 API 切换几乎市面上所有的大语言模型，同时没有功能封锁。 - 使用 Open Design 是否需要掌握编程知识？
不需要。系统的操作逻辑非常贴近自然语言交互式设计工具。它自带图形化界面、交互问卷表单和下拉菜单。即使您不具备代码基础，系统在后台代写的代码也会直接转化为直观的高保真视觉界面并进行呈现。 - 生成的代码项目和设计素材可以商用吗？
Open Design 本身遵循 Apache-2.0 开源协议发布，生成的产出物属于使用者。但需注意，系统中内置了一些知名品牌（如 Stripe、Tesla 等）的真实设计规范模板，若直接使用这些高度还原他人品牌的 UI 进行公开商业变现，需要自行审查是否存在侵犯第三方品牌版权的法律风险。 - 如果没有在本地安装过任何 AI 智能体，我该如何使用？
完全没有问题。系统提供 BYOK（自带密钥机制）。在首次使用的欢迎界面，您只需要填入类似 DeepSeek、OpenRouter 等平台的 OpenAI 兼容 API 请求地址、API 密钥以及模型名称，一样可以顺利驱动全套功能。 - 为何输入需求后 AI 没有直接开始画图而是弹出了表单？
这是该工具的核心特色之一。传统的 AI 绘图经常会盲目“自由发挥”，产生俗气的作品。Open Design 内嵌的“智能发现表单”强迫在 AI 下笔前明确核心目标和限制条件。虽然花费使用者 30 秒进行多选确认，但从根源上节约了后期数十次的无效重复修改。
